WordPress CSSカスタマイズは<h2>から始めよう

WordPress CSSカスタマイズは<h2>から始めよう
2020年1月30日

<h2>は文章構造に不可欠

WordPressやその他ブログで記事を書く際には「見出し」要素が、ほとんどの場合で使われます。
「見出し」を使わないと、Web上の文章としては非常に読みづらいものになってしまうのです。

WordPressの投稿画面を操作をしてみると、本文中の見出し候補として<h2>〜<h4>が出現します。

<h1>はどこにいったのかと言うと、記事のタイトルです。タイトルと見出しでは構造上、明確に区分が異なりますので<h1>は本文中の候補には現れないのです。

そして<h2>〜<h4>の中からは、まず<h2>を選択することになります。
<h2>を使わずに、それ以下の<h3><h4>を使用するのはHTMLとして良い文章構造とは言えないからです。

ですので、WordPressでは<h2>が最も使用頻度の高い「見出し」と言えるのです。

<h2>はデザインの裁量が大きい

あたりまえのことですが、<h2>が負っている機能的な使命の一つが「本文より目立つ」です。

目立たせるものなので、無限のデザインパターンが考えれれます。
また、フォントサイズも普通は本文より大きくするので、<h2>のアピアランスがページ全体の印象に与える影響は大きいのです。

だからまずは<h2>から

このように、文章構造に不可欠で、デザインの裁量も大きいので、WordPressのCSSカスタマイズは<h2>から考えるべきです。

何かをデザインする際は、影響の大きな要素から決めていく方が、後戻りが少ないです。

参考: このブログの例

このブログの<h2>のデザインのポイントは「ロゴと共通するスタイル」です。
そのスタイルとは、文字の下半分に水色のラインを引く、というものです。

タイトルロゴと見出しに共通のアピアランスを持たせることで、ページがスッキリまとまった印象になります。
訪問者に「ちゃんとした情報」と感じてもらう、デザイン効果が期待できます。

こちらが<h2>のCSSです。

.entry-content > h2 {
  color: #2e2e2e;
  font-weight: 600;
  /* 背景のライン */
  background: linear-gradient(transparent 61%, #b6def2 61%);
  background-position: 0 -1px;
  /* 複数行でもラインが引かれるよう、インライン要素に */
  display: inline;
}

以上です。
WordPressのテーマをカスタマイズするときは、<h2>のアピアランスが大事だよ、という話をさせてもらいました。