【Cocoon】コピペだけで簡単にできる！見出しデザインカスタマイズ

ブログで記事を投稿する際に必ず使用する「見出し」。

WordPressテーマ「Cocoon」では、もともと見出しのデザインが決まっています。

このままでももちろんいいのですが、ちょっとだけ使いにくいので、もう少し変化を持たせた、汎用性の高い見出しに変更してみました。

こちらの記事では、私がこのサイトで実際に行ったカスタマイズをご紹介します。

見出しの色の設定
見出しのカスタマイズ
参考サイト
まとめ

見出しの色の設定

見出しの色は、「キーカラー」の設定によって決まります。

「キーカラー」の設定は、「Cocoon設定」<「全体」の「サイトキーカラー」から変更できます。

「スキン」を利用している場合は、スキンの色になります。

見出しのカスタマイズ

初期設定のままだと、見出しはとってもシンプルなデザインになっています。

このままでも十分ですが、ここでは初心者の方でもコピペするだけで簡単にできちゃうカスタマイズをご紹介していきます。

CSSを貼り付ける場所

見出しデザインを変更するには、下記の場所にCSSを追加します。

WordPress管理画面から、「外観」>「カスタマイズ」>「追加CSS」を開きます。

コピーしたコードを貼り付けた後、「公開」をクリックしてください。

見出しを指定するコード

「Cocoon」の見出しをCSSで変更したいときは、「.article h⚪︎{}」で指定します。

hの次には、数字が入ります。

H2の見出しを変更したいときは「.article h2{}」、H5を変更したいときは「.article h5{}」のように指定することで、見出しをカスタマイズすることができます。

H3のデザインは割と気に入っていたので、そのままなんですが、設定をリセットする方法を記載しています。

WordPressのCSSを編集する前は、編集前に必ずバックアップを取って保存してください。もし編集後、エラーが出るようでしたら、バックアップファイルを元に復元してください。

カスタマイズ

それでは、それぞれの見出しのカスタマイズを紹介していきます。

H2見出し

H2見出しは背景はそのままで、内側に点線を追加しています。

CSSコード

.article h2 {
  box-shadow: 0px 0px 0px 5px #d4dfbb;
  border: dashed 2px white;
  padding: 1em;
}

box-shadow：枠線の外のフチ
border：枠線の指定（dashedは点線）
padding：余白の指定

pxの数値や、#の後のカラーコードを変更すると、お好きなデザインにできます。

もし、背景の色をなくしたい場合はは、下記のコードを入力して変更してください。

CSSコード

.article h2{
  background:none;
}

背景の色を変更したい場合は、「none」の部分を「#カラーコード」にすればOK！

H3見出し

H3見出しはカスタマイズしなかったのですが、変更したい場合は下記のコードをコピペして枠線を消してからカスタマイズするとスムーズです。

CSSコード

.article h3{
  border:none;
}

border：noneで非表示にする

H4見出し

H４見出しは、ボーダーの下線に変更しました。

もともとある上下の線は「border:none;」で非表示にすることができます。

CSSコード

.article h4 {
  position: relative;
  border:none;
}

.article h4:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 7px;
  background: -webkit-repeating-linear-gradient(-45deg, #d4dfbb, #d4dfbb 2px, #fff 2px, #fff 4px);
  background: repeating-linear-gradient(-45deg, #d4dfbb, #d4dfbb 2px, #fff 2px, #fff 4px);
}

position：relative＆absoluteで、位置(left/bottom)を固定するおまじない
border：noneで非表示にする
content：コンテンツの挿入に必要
width：ボーダーの横幅
height：ボーダーの高さ
background：背景（ボーダーを作るためのコード）

こちらも、pxの数値や、#の後のカラーコードを変更してお好みに変更してください。

H5見出し

H５見出しは下線を消して、シンプルに左のみに太めの線を追加してみました。

CSSコード

.article h5{
  border-bottom:none;
　border-left:solid 15px #d4dfbb;
}

border-bottom：下線。noneで非表示にする
border-left：左線。solidは実線。

こちらも、pxの数値や、#の後のカラーコードを変更してお好みに変更してください。

H6見出し

H6見出しは下線を消して、左にアイコンを追加してみました。

CSSコード

.article h6{
  border-bottom:none;
}

.article h6:before {
 font-family: 'Font Awesome 5 Free';
 content : "\f058";
 font-size: 2em;
 color: #d4dfbb;
 margin-right: 0.3em;
}