WordPressで記事を書くとき、「H2とH3はどう使い分けるの？」「文字を小さくしたいときはH4にしてもよいの？」と迷うことはありませんか。
見出しは、文章を内容ごとに分け、読者が必要な情報を見つけやすくするためのものです。H1〜H6の数字は、内容の階層を表します。
この記事では、投稿や固定ページを書く人に向けて、見出しの役割と組み立て方、WordPressでの設定方法を紹介します。
- 1. 参考リンク
- 2. H1〜H6とは：見出しの「階層」を表すもの
- 3. 記事タイトルと本文の見出しを分けて考える
- 3.1. H1は「ページの主題を示す1つ」を基本にする
- 3.2. 具体例で分かるH2・H3・H4の使い分け
- 4. 階層を深くするときは飛ばさず、戻るときは話題に合わせる
- 4.1. H2の中を分けるなら、次はH3
- 4.2. H4からH2へ戻ることは問題ない
- 5. 見出しの階層とデザインは分けて考える
- 6. WordPressで見出しを設定・確認する方法
- 6.1. 見出しブロックを追加する
- 6.1.1. 投稿・固定ページの編集画面で「＋」ボタンを押す。
- 6.1.2. 「見出し」ブロックを選択、追加する。
- 6.1.3. 見出しブロックの設定で、H2・H3など適切な階層を選ぶ。
- 6.1.4. 見出しの文言を入力する。
- 6.2. アウトラインで記事全体を確認する
- 7. 適切な見出しは、読み上げソフトを使う人の道案内にもなる
- 8. 終わりに：公開前に確認したい見出しの基本
参考リンク
- 見出しブロック – サポートフォーラム – WordPress.org 日本語
- <h1>–<h6> セクション見出し要素 (HTML) – MDN Web Docs
- 解説書 達成基準 2.4.6: 見出し及びラベル | WAI | W3C
- H42: 見出しを特定するために、h1 要素～ h6 要素を使用する
H1〜H6とは：見出しの「階層」を表すもの
Webページでは、見出しをHTMLの <h1>〜<h6> という要素で表します。HTMLとは、文章が見出しなのか段落なのかなど、ページの構造を伝えるための仕組みです。
WordPressでは「見出し」ブロックを使えば、HTMLを直接書かずに設定できます。
本のタイトル・章・節のように、大きな話題から小さな話題へ分けていくと考えると分かりやすいでしょう。
| 見出し | 基本的な役割 |
|---|---|
| H1 | ページ全体の主題を示す見出し。記事の詳細ページでは、通常は記事タイトル |
| H2 | 記事の内容を大きく分ける見出し |
| H3 | H2の内容をさらに分ける見出し |
| H4 | H3の内容をさらに分ける見出し |
| H5 | H4の内容をさらに分ける見出し |
| H6 | H5の内容をさらに分ける見出し |
H1が最上位で、数字が大きくなるほど細かい階層になります。「H6の内容は読む価値が低い」という意味ではありません。
また、H1〜H6をすべて使う必要もありません。ブログ記事では、まずH2とH3で構成を考え、必要なときにH4以降を追加すると整理しやすくなります。
記事タイトルと本文の見出しを分けて考える
多くのWordPressテーマでは、投稿や固定ページの詳細ページで、記事タイトルがH1として表示されます。この場合、本文の大きな区切りにはH2を使います。
例えば、タイトル欄に「WordPressの始め方」と入力したなら、本文に同じタイトルのH1を追加する必要は通常ありません。
本文は、導入文を書いてからH2へ進む構成でも問題ありません。冒頭を必ず見出しにする必要はないため、まず記事の対象読者や、読めば分かることを伝えてもよいでしょう。
ただし、タイトルがH1になるかどうかは、テーマやテンプレートによって変わります。「WordPressのタイトル欄に入力すれば、どの画面でも必ずH1になる」とは限りません。
H1は「ページの主題を示す1つ」を基本にする
一般的な記事ページでは、ページ全体を表すH1を1つにすると、構成を整理しやすくなります。
ただし、これは実用上の基本方針です。「H1が複数あるだけで、必ずHTMLの構文エラーになる」という意味ではありません。
タイトルを非表示にしている場合や、独自のテンプレートを使っている場合は、公開ページでどのような見出しが出力されているか確認しましょう。
具体例で分かるH2・H3・H4の使い分け
「WordPressの始め方」という記事なら、次のような構成が考えられます。以下は見出しの配置例であり、実際の記事では必要に応じて説明文を挟みます。
| 階層 | 見出しの例 | 内容の関係 |
|---|---|---|
| H1 | WordPressの始め方 | 記事全体の主題 |
| H2 | WordPressを始める前に準備するもの | 最初の大きな話題 |
| H3 | レンタルサーバー | 「準備するもの」の内訳 |
| H4 | サーバーの料金を確認する | 「レンタルサーバー」の詳しい説明 |
| H4 | サーバーのサポート体制を確認する | 同じ話題の別の確認項目 |
| H3 | 独自ドメイン | 「準備するもの」の別の内訳 |
| H2 | WordPressをインストールする | 次の大きな話題 |
「レンタルサーバー」と「独自ドメイン」は、どちらも準備するものなので、同じH3です。「料金」と「サポート体制」は、どちらもサーバー選びの確認項目なので、同じH4になります。
同じ位置づけの話題には、同じ階層を使う。 これが見出しを組み立てる基本です。見出しが登場するたびに、数字を増やすわけではありません。
階層を深くするときは飛ばさず、戻るときは話題に合わせる
H2の中を分けるなら、次はH3
H2の内容を細分化するときに、H3を飛ばしてH4やH5などを使うのは避けましょう。
- 避けたい例： H2：サーバーの選び方 → H4：料金を確認する
- 理想的な例： H2：サーバーの選び方 → H3：料金を確認する
見出しの階層を順に深くすると、何についての詳しい説明なのかが分かりやすくなります。
H4からH2へ戻ることは問題ない
細かな説明を終えて、次の大きな話題へ進むときは、H4の後にH2を置いても問題ありません。
「H2 → H3 → H4 → H2」という並びは、最後のH2で新しい大きな話題に移っているなら自然です。H3を挟むためだけに、不要な見出しを追加する必要はありません。
見出しの階層とデザインは分けて考える
「H2は文字が大きすぎるからH4にする」「この装飾が好きだから全部H3にする」と、内容の関係が伝わりにくくなります。
先に内容に合う階層を選び、そのあとで見た目を調整しましょう。
| 目的 | 基本的な対応 |
|---|---|
| 記事の大きな話題を分ける | H2を使う |
| H2の中をさらに分ける | H3を使う |
| 見出しの文字を小さくする | フォントサイズやテーマの設定で調整する |
| 段落中の言葉を強調する | 太字などを使う |
| 見出しの前後に余白を設ける | 余白の設定で調整する |
利用できるデザイン設定は、テーマやブロックによって異なります。
また、段落を太字にして大きく表示しても、HTML上の見出しにはなりません。内容の区切りを表す場合は、見出しブロックを使います。
WordPressで見出しを設定・確認する方法
見出しブロックを追加する
投稿・固定ページの編集画面で「＋」ボタンを押す。
右側に表示される「＋」ボタンでも、画面左上に表示されるボタンでも、どちらでもOKです。
「見出し」ブロックを選択、追加する。
見出しブロックの設定で、H2・H3など適切な階層を選ぶ。
最初から選んでしまっても問題ありませんし、後から選び直すことも可能です。
見出しの文言を入力する。
節の内容を適切に表す文言を入力してください。
現在のWordPress公式資料では、階層の変更方法として、ブロックツールバーの「変換」メニューと、ブロック設定パネルの見出しレベルのボタンが案内されています。
バージョンによっては、ツールバーに「H2」などの選択欄が表示される場合もあります。手元の画面に合わせて操作してください。
アウトラインで記事全体を確認する
エディターの「ドキュメント概観」にある「アウトライン」では、本文の見出し構成を確認できます。見出しだけを読み、次の点を見直してみましょう。
- 大きな話題がH2で整理されているか
- H3の内容が、直前のH2の話題に含まれているか
- 同じ位置づけの話題が、同じ階層になっているか
- 階層を深くするときに、途中を飛ばしていないか
- 見出しから、その後に書かれている内容を予想できるか
例えば、「注意点」だけで伝わりにくいと感じたら、「サーバー契約時に確認したい注意点」とすると、扱う内容が具体的になります。
なお、エディターのアウトラインは、ヘッダーやフッターなどを含む公開ページ全体の見出し検査を代わりに行うものではありません。テーマ側の見出しも調べたい場合は、公開ページのHTMLも確認します。
適切な見出しは、読み上げソフトを使う人の道案内にもなる
適切な見出しは、画面を目で追う読者に加え、スクリーンリーダーを使う読者にも役立ちます。
スクリーンリーダーとは、画面の情報を音声などで伝えるソフトです。見出しとして設定された部分を認識し、見出し間を移動する機能を備えています。
そのため、文章の見た目を整えるだけでなく、内容に合った見出しを設定すると、必要な情報へたどり着きやすくなります。
このように、さまざまな人が情報を利用しやすくすることを「アクセシビリティ」といいます。見出しの設定は、その基本的な取り組みの一つです。
終わりに：公開前に確認したい見出しの基本
見出しを整えるときは、次の点を確認しましょう。
- 記事タイトルと本文の見出しの役割を分ける。
- 本文はH2で大きく分け、必要に応じてH3・H4で細分化する。
- 同じ位置づけの話題には、同じ階層を使う。
- 階層を深くするときは途中を飛ばさない。
- 文字の大きさや装飾は、階層を決めたあとで調整する。
- H1〜H6をすべて使おうとせず、内容に必要な見出しを設ける。
記事を書く前にH2で大まかな構成を作り、必要なところにH3を追加してみてください。見出しだけを読んでも、何について、どの順番で説明する記事なのかが分かる状態を目指すと、本文も書き進めやすくなります。
