見出しのサンプルとカスタマイズコードです。見やすいサイトは見出しが整っていて、ストレス無く読み進める事ができますよね。

実際に当サイトで使っている見出しのコードを紹介します。色々と値を変えてアレンジしてみてください。

見出しの使い分け

WordPressの見出しは「H1 〜 H6」6つのデザインに分かれており、それぞれの役割は以下のとおりです。

まぁH5とH6は少しふざけてしまいましたが・・イメージできましたでしょうか？

H1はタイトル用なのでさておき、ブロックエディターで選べる見出しはH2〜H4まで。H5〜H6はHTMLモードにして編集すれば使うことができます。

とはいえ、個人的にもH6まで必要になるケースは今までに無く、仮に使ったとしても閲覧者に小分類・小小分類をパッと見て判断して貰うには、デザインや構成をかなり工夫する必要があります。

カスタマイズ方法

Cocoonであれば以下のいずれかの場所にコードを追加・編集します。サイト全体に適用されるので、ページ毎での設定は不要です。

※②は子テーマ(Cocoon child)を編集

見出しサンプルとコード

実際に当サイトで使っている見出しのコードを紹介します。

H1はフォントサイズと位置を変えただけのシンプルなカスタマイズです。paddingはさておき、フォントサイズ「23」の数値を大きくしたり小さくしたり・・どの様に変化するか色々試してみてください。

.article h1{
  font-size: 23pt;
  padding: 0.2em;
}

H2は背景を濃い目のカラーにして文字を白くしてみました。更に背景の角に丸みを持たせています。

.article h2{
  position: relative;
  color: #fff;
  background: #454537;
  line-height: 2;
  padding: 0.3em 0.3em 0.3em 0.5em;
  border-radius : 7px;
  font-size: 13pt;
  font-family: 'Noto Sans JP', sans-serif;
}

H3は先頭にラインを付けています。H2よりは控えめにして段落の文章よりは目立たせる、そんなことを意識しました。

article h3{
  padding: 0.4em;
  color: #000;
  font-size: 12.5pt;
  background: #ffffff;
  border-left: solid 4px #fb6542;
  border-top: none;
  border-right: none;
  border-bottom: none;
  font-family: 'Noto Sans JP', sans-serif;
}

先頭にFontAwesomeのアイコンを配置。この見出しではf0c8というシンプルなスクエアのアイコンを使っています。アイコンとフォント、2つの要素を横に並べている訳ですが、意外と位置の調整が難しいです。

PCとスマホでの見え方を確認しながらpaddingの値を調整してみてください。

.article h4{
  position: relative;
  padding: 0 0 0 18px;
  border-bottom: none;
  border-top: none;
  color: #454545;
  font-size: 10.5pt;
}
.article h4:before {
  font-family: FontAwesome;
  content: "\f0c8";
  position: absolute;
  left : 0em;
  color: red;
  padding-top: 0;
}

シンプルな罫線でテキストを囲みました。フォントの種類も変更してテキストは中央寄せに。

article h5{
  margin: 5px 2%;
  border:1px gray solid;
  line-height: 3em;
  text-align: center;
  color: gray;
  line-height: 3.5em;
  font-size: 12px;
  font-family: 'Baloo Thambi 2', noto sans jp;
  font-weight: bold;
}

フォントはGoogleフォントを使っています。かなり多数のフォントが無料で使えますので、導入方法は以下の記事を参考にしてください。

オシャレなフォントが無料で使える！Google Fonts の導入と設定方法

オシャレなフォントをサイトや記事で使いたい方にオススメなのがGoogle Fonts。無料で約1,000種類のデザインされたフォントを導入する事ができます。設定方法やCSS/HTMLサンプルコード。Cocoon目線で纏めてます。

unity-right.com

2020.03.11

もはや見出しではなく何かのアクセントとして使えるかなと思って作成しました。

.article h6{
  margin: 10px 10%;
  background: #000;
  color: red;
  font-size: 25px;
  font-family: 'Ultra', serif;
  text-align: center;
}

※こちらも Google Fonts を使っているので、コード内のフォントはそのまま使えない可能性があります