2026年7月29日
2026年7月29日
WordPressのブロックエディターで見出しを作る方法|H2〜H6の使い分けと正しい順番
WordPressのブロックエディターで見出しを作るには、「見出し」ブロックを追加してレベル(H2〜H6)を選びます。本文の大見出しはH2から始め、その下の小見出しをH3、H4…と順番に使うのが基本です。この記事では、見出しブロックの追加方法とレベルの変え方、見出しの正しい順番、見た目の変え方、目次やアクセシビリティとの関係、よくあるつまずきを説明します。
見出しを追加する方法
見出しブロックを追加する方法はいくつかあります。使いやすいものを選んでください。
ブロック挿入ツールから追加する
- 投稿の編集画面で、見出しを入れたい位置にカーソルを置きます。
- 左上の「+」(ブロック挿入ツール)をクリックし、「見出し」を検索して選びます。
- 表示された見出しブロックに文字を入力します。
キーボードで素早く追加する
空の段落の先頭で ## と半角スペースを入力すると、その段落がH2の見出しに変わります。### と半角スペースならH3です。また、空の段落で / を入力してから「見出し」と入力すると、候補からブロックを選べます。記事を続けて書くときは、この方法が手早く便利です。
段落を見出しに変換する
すでに入力した段落を見出しにしたいときは、その段落を選択し、ツールバーの左端にあるブロックアイコンをクリックして「見出し」を選びます。文字を入力し直す必要はありません。
見出しのレベルを変える
見出しブロックを選ぶと、ツールバーに「H2」などのレベル表示が出ます。これをクリックすると、H1〜H6の中からレベルを選べます。新しく追加した見出しブロックは、通常H2になっています。
H1は本文で使わない
ほとんどのテーマでは、記事のタイトルがH1として表示されます。本文にH1を追加すると、1ページにH1が2つ以上並び、ページの主題が分かりにくくなります。本文の見出しはH2から始めてください。
レベルは順番に使う
見出しは、本の目次のような階層構造を表します。
- H2:記事の大きな章
- H3:H2の中の節
- H4:H3の中のさらに細かい項目
- H5・H6:さらに深い階層(一般的な記事ではほとんど使いません)
H2の次にいきなりH4を使うなど、レベルを飛ばすのは避けます。読者にとって構成が分かりにくくなるうえ、後述する目次や読み上げソフトでも階層が正しく伝わりません。H3は、親となるH2の下に2つ以上あるときに使うと、構成が自然になります。
見た目はレベルではなく設定で変える
「H3だと文字が小さいから、ここはH2にしよう」「目立たせたいからH2にしよう」のように、見た目のためにレベルを変えるのはおすすめしません。レベルは文章の構造を表すもので、見た目は別に調整できます。
ブロックの設定で変える
見出しブロックを選ぶと、右側の設定サイドバーに文字サイズ、文字色、背景色などの項目が表示されます(テーマによって項目は異なります)。特定の見出しだけ見た目を変えたいときは、ここで調整します。
サイト全体の見出しのデザインを変える
すべての見出しのデザインをそろえて変えたい場合は、テーマの種類によって方法が違います。
- ブロックテーマ:「外観」→「エディター」→「スタイル」を開き、タイポグラフィの項目から見出しを選ぶと、H1〜H6ごとのフォントや文字サイズを設定できます。
- クラシックテーマ:テーマによっては「外観」→「カスタマイズ」やテーマ独自の設定画面に、見出しのデザインを選ぶ項目があります。項目がない場合は、「外観」→「カスタマイズ」→「追加CSS」でCSSを書いて調整します。
/* 投稿本文のH2に左の線と下余白を付ける例(クラスはテーマにより異なります) */
.entry-content h2 {
border-left: 6px solid #2b6cb0;
padding-left: 0.6em;
margin-bottom: 1em;
}
本文を囲むクラス名(上の例では .entry-content)はテーマによって違います。反映されないときは、ブラウザの開発者ツールで確認してください。
構造を確認する方法
ブロックエディターには、記事の見出し構造を一覧で確認する機能があります。画面上部のツールバーにある「ドキュメント概要」(リスト表示)のボタンを開き、概要のタブを選ぶと、見出しが階層ごとに並び、文字数や段落数とあわせて表示されます。レベルを飛ばしている箇所や、本文にH1がある場合は、注意の表示が出ることがあります。公開前にここを見る習慣をつけると、構成の乱れに気づきやすくなります。
目次と見出しの関係
記事に目次を自動で表示するプラグインやテーマの機能の多くは、本文の見出しブロック(H2〜H6)を読み取って目次を作ります。そのため、次の点が目次の見え方に影響します。
- 段落を太字にして見出しのように見せた部分は、目次に表示されません。見出しにしたい文は見出しブロックで作ります。
- レベルを飛ばすと、目次の字下げが不自然になります。
- 見出しの文言はそのまま目次の項目になるため、内容が分かる短い文にすると読みやすくなります。
- 「見出しが○個以上のときだけ目次を表示する」といった条件がある場合、見出しが少ない記事では目次が出ません。プラグインやテーマの設定を確認してください。
見出しへのページ内リンクを自分で作りたい場合は、見出しブロックの設定サイドバーの「高度な設定」にある「HTMLアンカー」に英数字の名前を入れ、リンク先を #名前 にします。
アクセシビリティの観点
画面読み上げソフトを使う人は、見出しの一覧を使って記事内を移動することがよくあります。見出しが正しいレベルで、内容が分かる文言になっていれば、目的の箇所にすばやく移動できます。見た目だけで見出しを表現したり、レベルを飛ばしたりすると、こうした読者には構成が伝わりにくくなります。検索エンジンにとっても、整った見出し構造は記事の内容を理解する手がかりになります。
よくあるつまずき
- 見出しにしたのに本文と見た目がほとんど変わらない:テーマの見出しデザインが控えめな場合があります。前述のブロック設定や、サイト全体の見出し設定で調整します。
- 見出しが大きすぎる・小さすぎる:レベルを変えるのではなく、文字サイズの設定やテーマのスタイルで調整します。
- WordやGoogleドキュメントから貼り付けたら見出しがおかしい:元の文書の見出し設定がそのまま引き継がれ、H1や意図しないレベルになることがあります。貼り付け後にドキュメント概要で構造を確認し、レベルを直します。
- 目次に見出しが出ない:太字の段落を見出し代わりにしていないか、目次の表示条件を満たしているかを確認します。
- 変更が公開ページに反映されない:保存または更新を忘れていないか、キャッシュ系プラグインのキャッシュが残っていないかを確認します。
画面の名称や設定項目の位置は、WordPress のバージョンやテーマによって異なります(2026年10月現在)。
まとめ
- 見出しは「見出し」ブロックで追加し、
##と半角スペースの入力でもH2を作れます。 - 本文の見出しはH2から始め、H3、H4と順番に使い、レベルを飛ばさないようにします。
- 見た目はレベルではなく、ブロックの設定やテーマのスタイル、追加CSSで変えます。
- 目次やアクセシビリティのためにも、見出しブロックで正しい構造を作り、公開前にドキュメント概要で確認します。