(確認事項)このMASAa.netには【広告】【PR記事】が掲載されています。MASAa.netご利用の方はプライバシーポリシーをご確認下さい。
WordPress関連Cocoon

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

アイキャッチ画像 Cocoon
この記事は約8分で読めます。

【広告】

※ 本ページには【広告】が含まれています

見出し

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

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

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

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

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

見出しの設定

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

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

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

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

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

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

テーマCocoonの見出し1~6(h1~h2タグ)

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

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

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

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

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

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

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

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

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

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

見出しのカスタマイズ

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

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

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

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

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

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

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

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

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

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

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

カスタマイズ内容

「見出し1~6(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{ /*見出し1(タイトル)カスタマイズ*/
  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{ /*見出し2カスタマイズ*/
  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{ /*見出し3カスタマイズ*/
  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{ /*見出し4カスタマイズ*/
  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{ /*見出し5カスタマイズ*/
  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{ /*見出し6カスタマイズ*/
  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{ /*見出し6の逆三角部分のカスタマイズ*/
  position: absolute;
  top: 100%;
  left: 20px;
  content: '';
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-top: 13px solid #ffddee;
}

最後に

見出しのデザインだけでもサイトの見やすさが変わってくるので、簡単に見えて難しいと実感しています。

自分の考えとしては、あまり派手な見出しよりもシンプルな見出しの方が好みです(・∀・)ノ

自分の場合、あまり大きなサイズのフォントが好きでないのでフォントは小さめとなっています。

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

新しく「見出し(h1〜h6タグ)」のカスタマイズについてエントリー記事を掲載しています。

こちらも一読頂ければ幸いです。

【Cocoon】見出し(h1〜h4タグ)を再カスタマイズする
見出しについては、以前「【Cocoon】見出し(h1〜h6タグ)をカスタマイズする」のエントリー記事でカスタマイズを行いましが、今回「見出し1(h1タグ)」~「見出し(h4タグ)」に対して少しだけ折り目のデザインを付けてみました。
【Cocoon】見出し(h1〜h4タグ)の再々カスタマイズ
WordPressテーマ Cocoonの見出しについては以前にも2度ほどカスタマイズを行ってきました。今回「見出し1タイトル(h1タグ)」~「見出し4(h4タグ)」に対して、改めて見出しが分かりやすくなるようなデザインに変更してみました。
MASAa.netをご覧頂きありがとうございます!
もしMASAa.netの記事がお役に立てた場合、
下記【サポート】を頂くことで今後の記事制作に繋ぎます!

シェアする
※ 記事内には【広告】が含まれています
MASAa.net

コメント

【広告】