見出しのデザインは、CSSを数行足すだけで大きく印象が変わります。ただしコピペしたコードをそのまま貼ると、文字が長くなったときに崩れたり、WordPressのテーマに負けて反映されなかったりします。この記事では、コピペで使える見出しCSSを用途別に紹介したうえで、仕組みの理解、WordPressでの当て方、実務でやりがちな失敗までをまとめます。

見出しデザインを決める前に押さえること

結論から言うと、見出しの装飾は「目立たせるため」ではなく「文章の構造を伝えるため」に付けます。ここを取り違えると、凝ったデザインほど読みにくいページができあがります。

装飾の目的は階層を見せること

読者は本文を読む前に、見出しだけを拾ってページの構造をつかみます。そのとき必要なのは「どこが大きな区切りで、どこがその中の小項目か」が一目で分かることです。装飾はその判別を助けるために使います。

h2とh3は明確に差をつける

よくある失敗が、h2とh3を似たデザインにしてしまうことです。どちらも太字で下線が付いていると、階層が伝わりません。h2は背景色や左の太いラインでブロック感を出し、h3は細い下線程度に抑える。この差があるだけで、記事全体の読みやすさが変わります。

使う装飾は2〜3種類までに絞る

デザイン集を見ていると全部使いたくなりますが、1つのサイトで使う見出しデザインは2〜3種類までにしてください。種類が増えるほど統一感が失われ、どれが上位の見出しなのか分からなくなります。

コピペで使える基本の見出しデザイン

まずは実務で使用頻度の高い6種類です。色はサイトに合わせて変更してください。

1｜シンプルな下線

h2 {
  padding-bottom: 0.4em;
  border-bottom: 2px solid #2589d0;
}

いちばん基本の形です。border-style を dotted（点線）、dashed（破線）、double（二重線）に変えるだけで印象が変わります。迷ったらここから始めてください。

2｜左に縦ライン

h2 {
  padding: 0.2em 0.6em;
  border-left: 6px solid #2589d0;
}

ブログ記事のh2で最も多く使われる形です。文字数が増えても崩れず、複数行になっても自然に見えます。安全策としてこれを選んでおけば失敗しません。

3｜左ライン＋背景色

h2 {
  padding: 0.5em 0.75em;
  background: #f4f8fb;
  border-left: 6px solid #2589d0;
}

背景を薄く敷くと、見出しがブロックとして認識されます。本文との区切りが強くなるため、長い記事ほど効果があります。背景色は必ず薄く。濃くすると文字が読みにくくなります。

4｜背景ベタ塗り

h2 {
  padding: 0.6em 0.8em;
  color: #fff;
  background: #2589d0;
  border-radius: 4px;
}

存在感が強いので、h2だけに使ってh3には使わない、という運用にします。白抜き文字にするときは、背景色とのコントラストを必ず確認してください。

5｜上下に線

h2 {
  padding: 0.4em 0;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

装飾を最小限にしたいコーポレートサイト向きです。色数を増やさずに区切りを作れます。

6｜蛍光マーカー風

h3 {
  display: inline;
  padding-bottom: 0.1em;
  background: linear-gradient(transparent 60%, #ffe680 60%);
}

グラデーションの境目を60%あたりに置くことで、下半分だけ色が付いたマーカー風になります。display: inline を指定しないと行全体に色が付くので注意してください。

少し凝った見出しデザイン

疑似要素を使うと、HTMLを増やさずに装飾を足せます。ここから4種類を紹介します。

7｜吹き出し風

h2 {
  position: relative;
  padding: 0.7em 1em;
  color: #fff;
  background: #2589d0;
  border-radius: 6px;
}
h2::after {
  position: absolute;
  bottom: -14px;
  left: 2em;
  content: "";
  border: 7px solid transparent;
  border-top: 7px solid #2589d0;
}

三角形は、透明な太いボーダーの一辺だけに色を付けて作ります。三角の色は必ず背景色と同じ値にしてください。片方だけ変更すると、吹き出しの先だけ色が違う状態になります。

8｜タグ風

h2 {
  position: relative;
  display: inline-block;
  padding: 0.5em 1em 0.5em 2em;
  color: #fff;
  background: #2589d0;
  border-radius: 0 4px 4px 0;
}
h2::before {
  position: absolute;
  top: 50%;
  left: 0.8em;
  width: 8px;
  height: 8px;
  content: "";
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
}

値札のような形です。display: inline-block にすることで、文字数に応じて幅が変わります。

9｜グラデーションの下線

h2 {
  position: relative;
  padding-bottom: 0.5em;
}
h2::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  content: "";
  background: linear-gradient(to right, #2589d0, #7ed0f7);
}

ベタ塗りの線より柔らかい印象になります。線の右端を透明にすると、すっと消えるような表現もできます。

10｜番号付き

.step { counter-reset: step; }
.step h3 {
  position: relative;
  padding-left: 2.2em;
}
.step h3::before {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.6em;
  color: #fff;
  font-size: 0.9em;
  background: #2589d0;
  border-radius: 50%;
  counter-increment: step;
  content: counter(step);
}

手順を説明する記事で便利です。番号をCSS側で自動採番するため、途中に手順を追加しても番号を振り直す必要がありません。

疑似要素の仕組みを理解する

コピペしたコードを自分で調整できるかどうかは、疑似要素を理解しているかで決まります。3つだけ押さえてください。

::beforeと::afterは「見えない箱」を1つ足す

この2つは、対象要素の内側の前後に架空の要素を作る指定です。HTMLを書き換えずに、線・三角・アイコン・番号などを追加できます。装飾のためだけのタグを増やさずに済むのが利点です。

contentがないと表示されない

疑似要素は content プロパティが必須です。装飾だけで文字が不要な場合も content: ""; と空文字を書きます。「コピペしたのに何も出ない」というトラブルの大半が、この記述漏れです。

positionは親と子をセットで指定する

疑似要素を好きな位置に置くには、親側に position: relative、疑似要素側に position: absolute を指定します。親側の指定を忘れると、ページ全体を基準に配置されて、見当違いの場所に飛びます。位置がおかしいときは、まずここを疑ってください。

WordPressで見出しCSSを当てるときの注意

コードは正しいのに反映されない、という相談の多くはWordPress特有の事情です。

テーマのCSSに負けている

テーマ側が .entry-content h2 { ... } のように詳細度の高いセレクタで指定していると、あとから書いた h2 { ... } は上書きされません。ブラウザの検証機能で、自分のCSSに打ち消し線が付いていないかを確認してください。

セレクタを具体的にして解決する

対処は、テーマと同等かそれ以上に具体的なセレクタで書くことです。!important を付けて力技で通す方法もありますが、後々の修正が難しくなるため最後の手段にしてください。

.entry-content h2 {
  padding: 0.5em 0.75em;
  background: #f4f8fb;
  border-left: 6px solid #2589d0;
}

記事本文だけに効かせる

h2 だけで指定すると、サイドバーのウィジェットやフッターの見出しにも装飾が付いてしまいます。記事本文を囲むクラス（テーマによって .entry-content、.post-content など）を先頭に付けて、範囲を限定してください。

CSSを書く場所を決める

手軽なのは「外観 > カスタマイズ > 追加CSS」です。テーマ更新で消えず、管理画面から編集できます。本格的にカスタマイズするなら子テーマのstyle.cssに書きます。親テーマのCSSを直接編集するのは、更新で消えるため避けてください。

ブロックエディタのプレビューには反映されない

追加CSSは公開ページに適用されるもので、編集画面の見た目には反映されません。編集中に「効いていない」と感じても、実際のページを開いて確認してください。

実務でやりがちな失敗

制作の現場で実際に起きる崩れを挙げます。公開前に必ず確認してください。

文字が長いと崩れる

デザイン集のサンプルは短い文言で作られています。実際の記事は見出しが長く、2行3行になることが珍しくありません。高さを height で固定していると、はみ出して崩れます。作ったら必ず、長い文言を入れて2行にしたときの表示を確認してください。

スマートフォンで文字が詰まる

PCで調整した余白や文字サイズが、スマートフォンでは窮屈になりがちです。px ではなく em や rem で指定しておくと、文字サイズに応じて余白も変わるため崩れにくくなります。

コントラストが足りない

淡い背景に白文字、といった組み合わせは見た目がきれいでも読めません。文字色と背景色のコントラスト比は、通常のテキストで4.5:1以上が基準です。この点はWebアクセシビリティの記事でも触れています。

装飾が本文より目立ちすぎる

派手な見出しが並ぶと、視線が見出しばかりに引っぱられて本文が読まれません。装飾はあくまで案内表示です。ページを引きで見て、本文がきちんと読める配分になっているかを確認してください。

見た目のために見出しレベルを選んでいる

「h2のデザインが好みだから」という理由で、本来h3であるべき箇所にh2を使うのは避けてください。見出しレベルは文書構造を示すもので、SNSやスクリーンリーダー、検索エンジンもこれを読み取ります。デザインが理由なら、h3のCSSを変更するのが正しい対処です。

制作会社の視点｜サイト全体で統一する

個々の見出しを凝るより、サイト全体で統一されているかのほうが完成度に効きます。実務では次のように進めます。

色は変数で一元管理する

:root {
  --main-color: #2589d0;
  --sub-bg: #f4f8fb;
}
.entry-content h2 {
  background: var(--sub-bg);
  border-left: 6px solid var(--main-color);
}

CSS変数にしておけば、ブランドカラーを変更したくなったときに1か所直すだけで済みます。見出しだけでなくボタンやリンク色にも同じ変数を使えば、サイト全体の色替えが数分で終わります。

余白のルールを先に決める

見出しの上下の余白がばらつくと、装飾が揃っていても雑に見えます。「h2の上は3em、下は1em」のようにルールを決めて、全ページで守ってください。

クライアントが更新することを前提にする

納品後に記事を書くのはクライアントです。見出しを選ぶだけでデザインが適用される状態にしておけば、更新のたびに崩れることがありません。特定のクラスを手で付けないと成立しないデザインは、運用で必ず崩れます。

よくある質問（FAQ）

コピペしたのに何も表示されません。

疑似要素を使うデザインなら content の記述漏れ、位置がずれるなら親要素への position: relative の指定漏れが多い原因です。まずブラウザの検証機能で、CSSが読み込まれているかを確認してください。

CSSが打ち消し線で表示されています。

他のCSSに上書きされている状態です。セレクタをより具体的に書き換えてください（例：h2 → .entry-content h2）。それでも解決しない場合のみ !important を検討します。

見出しが2行になると崩れます。

高さを固定している可能性が高いです。height の指定を外し、padding で余白を作る形に変えてください。疑似要素で線を引いている場合は、位置指定を bottom: 0 にしておくと行数に追従します。

h2とh3で同じデザインを使ってもいいですか？

避けたほうがよいです。階層の違いが視覚的に伝わらなくなります。色を薄くする、線を細くする、背景を外すなど、明確に差をつけてください。

装飾は何種類まで使っていいですか？

1サイトで2〜3種類までを推奨します。h2用、h3用、必要ならh4用の3つで足ります。それ以上増えると統一感が崩れます。

スマホ用に別のCSSを書くべきですか？

基本は不要です。em や rem で指定しておけば、多くのデザインはそのまま機能します。文字サイズだけメディアクエリで調整すれば足りるケースがほとんどです。

見出しデザインはSEOに影響しますか？

装飾そのものは順位に影響しません。ただし見出しレベルの使い方（h1が複数ある、階層が飛んでいる）は文書構造の理解に関わります。デザインの都合で見出しレベルを選ばないでください。

まとめ

見出しのCSSは、下線・左線・背景の3パターンを押さえておけば実務の大半に対応できます。凝ったデザインを使う場合も、疑似要素の仕組み（contentが必須、positionは親子セット）さえ理解していれば自分で調整できます。作ったあとは必ず、長い見出しを2行にしたときとスマートフォンでの表示を確認してください。ここを飛ばすと、公開後に崩れが見つかります。

スリーディープラスでは、サイトのデザイン調整やWordPressのカスタマイズのご相談を承っています。「コピペしたが思ったとおりにならない」「サイト全体の見た目を整えたい」という場合は、お気軽にお問い合わせください。