【Cocoon】見出しデザインをおしゃれにCSSカスタマイズ

見出しデザインをCSSカスタマイズする方法を紹介します。

見出しとは？
1. 見出しは順番に使うことが大事！
見出しのCSSカスタマイズ
記事内以外の見出しもCSSカスタマイズできる！
1. サイドバー見出しのカスタマイズ
2. フッター見出しのカスタマイズ
まとめ：見出しを変えてサイトの雰囲気を変えてみよう！

見出しとは？

ブログの見出しは記事の内容を簡潔に伝え、興味を引くための重要な要素です。

見出しは記事全体のテーマやポイントを凝縮したものであり、非常に重要な役割を果たします。

検索エンジンの評価向上
記事の内容を明確に示す

見出しは順番に使うことが大事！

見出しは、大きい数字の見出しの下にそれより小さい数字の見出しがくるようにしてください。

<h2>の中に<h3>を飛ばして<h4>を使う……なんていうのは、見にくいうえにSEO的にもよくありません。

h2の下にはh3を使用してください。また、h3の下にはh4を使用します。

わかりにくいときは下記の方法で調べることができます。

記事作成時に左にあるアイコン「ドキュメント概観」をクリックします。

リストビューとアウトラインがあるので、「アウトライン」を選択します。

階層に過ちがある場合は、わかりやすい指摘があります。

見出しのCSSカスタマイズ

このブログの見出しのカスタマイズは以下のとおりです。

見出しのデザインを変更するときは、初期デザインの背景色やボーダーを取る作業も必要になります。

h1見出し

h1見出しは記事のタイトルに使用されます。

あまりデザインを変更する必要がないので、色変更やフォント変更程度の変更がおすすめです。

h2見出し

.article h2 {
  box-shadow: 0px 0px 0px 5px #8195a2;  /*点線の外側の余白と色*/
  border: dashed 2px white;  /*点線の種類、太さ、色*/
  padding: .4em;  /*余白のサイズを変える*/
  background: #8195a2;  /*背景色を変える*/
  color: #fff;  /*文字の色を変える*/
  border-radius: 0px;  /*角の丸みを取る*/
}

h3見出し

.article h3 {
  border: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  position: relative;  /*要素を相対配置にする*/
  padding: .1em .3em .4em .5em;  /*余白*/
  border-left: solid 8px #a8bcc8;  /*左の線の種類、太さ、色*/
  color: #5C676D;  /*文字の色*/
  border-bottom: solid 2px #8195a2;  /*下の線の種類、太さ、色*/
}
.article h3:before { /*左ラインの下部の色*/
  position: absolute;  /*要素を絶対配置にする*/
  content: '';  /*空欄を挿入する*/
  left: -8px;  /*左下部の線の位置の調整*/
  bottom: -2px;  /*左下部の線の位置の調整*/
  width: 8px;  /*左下部の線の太さ*/
  background-color: #5C676D;  /*左下部の色*/
  height: 50%;  /*左下部の線の色の高さ*/
}

h4見出し

.article h4 {
  border-top: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  border-bottom: solid 1px #a8bcc8;  /*下の線の種類、太さ、色*/
  position: relative;  /*要素を相対配置にする*/
  color: #5C676D;  /*文字の色*/
}
.article h4::after {
  position: absolute;  /*要素を絶対配置にする*/
  content: " ";  /*空欄を挿入する*/
  border-bottom: solid 2.5px #8195a2;  /*左の線の種類、太さ、色*/
  left: 0px;  /*左の線の位置の調整*/
  bottom: -1px;  /*左の線の位置の調整*/
  width: 30%;  /*左の線の長さ*/
}

h5見出し

.article h5 {
  border-bottom: dashed 2px #a8bcc8;  /*下部の点線の種類、太さ、色*/
  color: #5C676D;  /*文字の色*/
}

h6見出し

.article h6 {
  border-bottom: none;  /*Cocoon標準のデザインにあるボーダーを取る*/
  position: relative;  /*要素を相対配置にする*/
  padding-left: 1.4em;  /*余白*/
  color: #5C676D;  /*文字の色*/
}
h6::before {
  font-family: "Font Awesome 5 Free";  /*Font Awesome 5を使用する*/
  content: "\f00c";  /*アイコンの指定*/
  position: absolute;  /*要素を絶対配置にする*/
  left: 0;  /*アイコンの位置の調整*/
  color: #a8bcc8;  /*アイコンの色*/
}

Font Awesomeについては「【Cocoon】Font Awesomeアイコンの使い方｜表示されない理由とカスタマイズ」の記事で詳しく紹介しています。