H1〜H6見出しのサンプルとカスタマイズ方法【Cocoon】

※このページにはプロモーションが含まれています

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

例えばこんな見出しとか

当サイトで使っている見出しのカスタマイズコードを紹介するので、ご自身でカスタマイズするきっかけになってくれたら嬉しいです。

スポンサーリンク

「見出し」の使い分けについて

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

WordPressの見出しは6種類
  • H1:記事タイトル
  • H2:大分類
  • H3:中分類
  • H4:小分類
  • H5:小小分類
  • H6:小小小分類

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

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

H6まで必要になるケースが個人的にはありませんが、見出しではなく「パッと呼び出せるデザイン」と考えれば活用の幅も広がります。

カスタマイズ方法

WordPress(当サイトはCocoon)であれば以下のいずれかの場所にコードを追加・編集します。サイト全体にデザインが適用されるので、ページ毎でのカスタマイズは不要です。

ダッシュボードより
  1. 外観 → カスタマイズ → 追加CSS
  2. 外観 → テーマエディタ → style.css

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

見出しのサンプルとカスタマイズコード

実際に当サイトで使っている見出しを紹介します。※たまに微調整しているので、サンプルの見た目とコードが若干違う場合があります

↓【H1】サンプル↓

WordPressの見出しをカスタマイズ

ページタイトルのH1はフォントサイズと位置を変えただけです。フォントサイズ「23」の数値を大きくしたり小さくしたり・・どの様に変化するか試してみてください。

.article h1 {
  font-size: 23pt;
  padding: 0.2em;
}
↓【H2】サンプル↓

WordPressの見出しをカスタマイズ

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;
}
スマホの時だけ左右の余白を消しています
.article H2 {
  margin-left: -0.7em;
  margin-right: -0.7em;
  width: auto;
  max-width: none;
  border-radius: none;
}
※スマホ用コードとして追加が必要です
↓【H3】サンプル↓

WordPressの見出しをカスタマイズ

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;
}
↓【H4】サンプル↓

WordPressの見出しをカスタマイズ

先頭に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;
}
↓【H5】サンプル↓
見出しのカスタマイズ

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

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

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

↓【H6】サンプル↓
WordPress Cocoon

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

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

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

↓色が変わる↓
WordPress見出しカスタマイズ

ページが読み込まれて最初の5秒だけで色が変化し、その後は単色となります。こういうのが出来ると個人的には嬉しいのですが、上手く活用できないのであまり実用的では無いかもしれません。

/*色が変わる見出し*/
.midashi3 {
  animation: bg-color 5s forwards;
  animation-duration: 5s;
  color: #e73e92;
  font-size: 15pt;
  text-align:center;
  font-family: 'Baloo Thambi 2', noto sans jp;
  font-weight: bold;
  padding: 7px;
}
.midashi3 a {
  color: #e73e92;
  text-decoration: none;
  display: block;
}
@keyframes bg-color {
  0% { background-color: #fff; }
  30% { background-color: #e2e8e4; }
  60% { background-color: #bcb6e5; }
  100% { background-color: #393939; }
}

Comment

タイトルとURLをコピーしました