【Cocoon】見出し(h1〜h6タグ)をカスタマイズする

INDEX

見出し
見出しのカスタマイズ
1. カスタマイズ内容
最後に
新しい見出し(h1〜h6タグ)カスタマイズ記事についてのお知らせ

見出し

ブログを書く際の見やすさとして重要になってくるのが「見出し」です。

見出しは、新しくまとまった文章を書き始める最初に設定します。

もし見出しが無くて文章が切れ目なく続くと、読む方は文章を把握できない状況になり兼ねません。

そこで順に見出しを追っていく事で、文章全体の流れが把握できるるようにする必要があります。

見出しは所謂小タイトルで、文章が分かるようにタイトル（見出し）を設定します。

見出しの設定

設定出来る見出しは、「見出し１(h1タグ)」「見出し２(h2タグ)」「見出し３(h3タグ)」「見出し(h4タグ)」「見出し(h5タグ)」「見出し(h6タグ)」の6パターンです。

見出しの使い方は、「見出し１(h1タグ)」はタイトルで使用します。

そのため記事内で使う見出しは、「見出し１(h1タグ)」を除く「見出し２(h2タグ)～見出し６(h6タグ)」の5パターンとなります。

その中で必ず使うタグは「見出し２(h2タグ)」と「見出し３(h3タグ)」でしょう。

文章の流れによって「見出し４(h4タグ)～見出し(h6タグ)」を使う事になります。

また、目次を設定している場合は、この「見出し２～６(h2～h6タグ)」が目次として表示されます。

テーマCocoonの見出し１～６(h1～h2タグ)

そのWordPressテーマ Cocoonのデフォルトの見出しは、このように大変シンプルなデザインとなっています。

見出しのデザインについて

今回のこの「見出し１～６(h1～h6タグ)」のデザインを自分のブログサイトに合わせてカスタマイズしてみました。

「ブログ見出し」や「css 見出し」などで検索すると素晴らしいデザインの見出しが多く紹介されています。

但し、見出しのデザインをカスタマイズする際に注意することは、「見出し１～６(h1～h6タグ)」の6パターンに共通性が有り、尚且つ大小の関係を持つことが重要だと考えます。

見出し毎に大きくデザインが掛け離れていると、見出しの大小の関係が分かりづらくなり、サイトのデザインに統一感が無くなります。

シンプルなブログに派手なデザインの見出しは必要ありません。

そのブログのスタイルに合った見出しのデザインを採用するべきでしょう。

そして、一番大きいデザインの見出しは「見出し１(h1タグ)」、次に「見出し２(h2タグ)」、その次に「見出し３(h3タグ)」・・・とデザインの大きさを順に変えることで読み手が文章の流れが分かりやすく読むことができます。

見出しのカスタマイズ

このブログサイトMASAa.net用にカスタマイズした「見出し１～６(h1～h6タグ)」は次の通りです。

今回の見出しは、基本的にサイトカラーのピンクを採用しています。

タイトルとなる「見出し１(h1タグ)」は、バックカラーを他の見出しよりも濃いめにして、見出し全体のサイズもフォントも一番大きくしています。

「見出し２(h2タグ)」は、「見出し１(h1タグ)」よりも見出し全体とフォント若干小さくし、バックカラーは薄くしています。

文書内で一番よく使われる見出しと言う事で、アンダーラインを引いて差別化を行い文章内で一番目立つようにしています。

「見出し3(h3タグ)」は、「見出し２(h2タグ)」よりも小さくし、アンダーラインを無くしています。

「見出し4(h4タグ)」は、「見出し３(h3タグ)」よりも小さくし、左側の端のラインは一番細くしています。

これら「見出し１～４(h1～h4タグ)」は、左側の端のラインの太さで見出しの大小の関係を分かりやすくしています。

「見出し5(h5タグ)」と「見出し6(h6タグ)」はあまり出番が無いので、「見出し１(h1タグ)～見出し４(h4タグ)」とは違う見出しらしくないデザインを採用しました。

フォントの大きさは「見出し４(h4タグ)」と同じ大きさとしています。

カスタマイズ内容

「見出し１～６(h1～h6タグ)」のカスタマイズ内容は、下記の通りです。

このカスタマイズ内容を「スタイルシート(style.css)」に追記します。

/************************************
** ■見出しカスタマイズ（h1-6）
************************************/
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6{ /*見出し初期化*/
  padding: 0;
  margin: 0;
  font-size: medium;
  border-collapse: separate;
  border-spacing: 0;
  border-top: none;
  border-right: none;
  border-bottom: none;
  border-left: none;
  line-height: normal;
  position:relative;
}

.article h1{ /*見出し１（タイトル）カスタマイズ*/
  background: #ffddee; /*背景カラー*/
  font-size: 22px; /*フォントサイズ*/
  letter-spacing: 1px; /*文字間隔*/
  margin: -8px -8px 20px -8px;
  padding: 9px 10px 9px 10px;
  border-left: 10px solid #fe619a; /*左ラインの太さとカラー*/
  line-height: 35px; /*高さ*/
  border-radius: 3px; /*角丸コーナー*/
  }

.article h2{ /*見出し２カスタマイズ*/
  background: #fff2f9; /*背景カラー*/
  font-size: 20px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 10px 7px 10px 10px;
  border-left: 7px solid #fe619a; /*左ラインの太さとカラー*/
  border-bottom: 1px solid #fe619a; /*アンダーラインの太さとカラー*/
  line-height: 27px; /*高さ*/
}

.article h3{ /*見出し３カスタマイズ*/
  background: #fff2f9; /*背景カラー*/
  font-size: 18px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 9px 7px 9px 10px;
  border-left: 5px solid #fe619a; /*左ラインの太さとカラー*/
  line-height: 25px; /*高さ*/
}

.article h4{ /*見出し４カスタマイズ*/
  background: #fff2f9; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px -8px 20px -8px;
  padding: 8px 7px 8px 10px;
  border-left: 2px solid #fe619a; /*左ラインの太さとカラー*/
  line-height: 23px; /*高さ*/
}

.article h5{ /*見出し５カスタマイズ*/
  background: #fff2f9; /*背景カラー*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px 20px 20px 20px;
  padding: 5px 5px 5px 5px;
  border: 1px solid #fe619a; /*周囲ラインの太さとカラー*/
  line-height: 27px; /*高さ*/
  text-align: center; /*文字位置中央*/
  border-radius: 6px; /*角丸コーナー*/
  box-shadow: 3px 3px 2px rgba(0,0,0,0.3); /*シャドー*/
}

.article h6{ /*見出し６カスタマイズ*/
  font-size: 16px; /*フォントサイズ*/
  letter-spacing: 2px; /*文字間隔*/
  margin: 35px 0px 20px 0px;
  padding: 8px 16px 8px 25px;
  line-height: 25px; /*高さ*/
  background-color: #ffddee; /*背景カラー*/
  border-radius: 10px; /*角丸コーナー*/
  position: relative;
}
.article h6::after{ /*見出し６の逆三角部分のカスタマイズ*/
  position: absolute;
  top: 100%;
  left: 20px;
  content: '';
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 13px solid #ffddee;
}