WordPressに目次を付ける方法｜見出し構造・表示位置・崩れの確認

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

長い記事を開いたとき、知りたい章へすぐ移動できる目次があると便利です。WordPressでも、利用中のテーマやプラグイン、見出しへのリンクを使って目次を用意できます。ただし、機能を追加する前に本文の見出しを整えないと、短い項目が大量に並んだり、同じ目次が二つ出たりすることがあります。

この記事では、目次の設計、表示方法の選択、見出しとアンカーの対応、スマートフォンでの確認、表示されないときの切り分けを順番に説明します。見た目を付けるだけでなく、読者が目的の情報へ迷わず移動でき、記事を更新した後もリンクが壊れない状態を目指しましょう。

WordPressの版、テーマ、プラグイン、編集方式によって設定画面は異なります。特定の機能がすべてのサイトで使えるとは限りません。この記事は一般的なブロックエディターの考え方を軸にし、公式資料で確認できる操作を紹介します。画像は編集画面そのものではなく、記事構造を説明する生成イメージです。公開済みサイトの設定変更は、バックアップとテスト環境を用意してから慎重に進めてください。

WordPressの目次設計｜見出しと読者の移動を整理する

目次を付ける目的を「探しやすさ」に置く

目次は、本文に何が書かれているかを一覧で伝え、必要な位置へ移動するための案内です。文字数が多いから機械的に付けるというより、読者が途中の章だけを読み直す場面や、複数の疑問を選んで調べる場面を想像すると設計しやすくなります。料金、準備、手順、トラブル対処など、目的が分かれた長文では特に役立ちます。

反対に、短いお知らせや一つの質問への短い回答では、目次が本文より目立ってしまう場合があります。全記事へ同じ設定で表示するなら、短い記事でどう見えるかも確認してください。表示する見出し数の条件や、記事単位での有効・無効が設定できる機能なら、内容に合わせて調整する考え方があります。

目次を付けるだけで検索順位が上がると考えるのは避けましょう。本文の質や検索意図との一致を代わりに作ってくれるものではありません。読者が必要な情報を探しやすくなるか、見出しだけで内容を把握できるかをまず点検します。目次から飛んだ先に答えがなければ、整った一覧でも期待を裏切ることになります。

太字の文章と見出しブロックを区別する

自動生成の目次は、多くの場合、本文内のH2・H3などの見出しを基にします。段落を大きな太字にしただけでは、見出しとして認識されないことがあります。見た目が似ていても、文章の構造を表す見出しブロックと、段落の装飾は役割が違います。目次へ入れたい章は、適切な見出しとして設定しましょう。

一般的な記事ではページタイトルがH1になり、本文の大きな章をH2、その中の小見出しをH3とする構成が考えられます。文字サイズを小さくしたいからH4へ飛ばすなど、見た目の都合だけで階層を変えると、章の関係が分かりにくくなります。文字の大きさはデザイン側、情報の親子関係は見出しの階層として分けて考えます。

見出しの基本操作とアウトラインの見方は、WordPress公式の見出しブロック説明で確認できます。本文を読み返すときは、見出しだけを順に並べても内容の流れが通じるかを確かめてみてください。目次を付ける前のこの確認が、そのまま記事構成の点検になります。

H2だけを出すか、H3まで出すかを決める

目次へすべての小見出しを出すと、長い記事では一覧が数十項目になることがあります。細かく探せる利点はありますが、スマートフォンでは目次を通り過ぎるだけで何度もスクロールが必要になるかもしれません。大きな章へ移動できれば足りる記事ならH2中心、細かな疑問を選んで読む記事ならH3も含めるなど、使い方から決めます。

表示する階層を変えても、本文の見出しの意味まで変える必要はありません。目次を短くするために、本来のH3を段落へ崩すのではなく、目次側でどの階層を載せるかを調整する方が整理しやすい場合があります。利用中の機能で対象レベルを選べるかを確認してください。

たとえば、五つのH2と各章四つのH3がある記事なら、H2のみで五項目、H3まで含めると二十五項目になります。どちらが良いかは記事の使われ方によります。初めて読む人が全体を知るための案内なのか、読み返す人が一点を探すための索引なのかを考え、表示量を決めましょう。

※表は横にスクロールできます。

見出しの名前は、単独でも内容が分かるようにする

「まずはここ」「重要なポイント」「詳しく解説」のような見出しが並ぶと、目次だけを見てもどこへ飛べばよいか分かりません。「必要な準備」「申し込み前の確認」「届かないときの対処」など、その章で解決することが分かる言葉にします。本文で何を説明しているかに合わせ、目次用に過剰なあおり文句を付けないようにしましょう。

同じ名前の見出しを何度も使うと、一覧上の区別が難しくなります。「注意点」というH3が複数あるなら、「料金の注意点」「保存時の注意点」のように対象を加えると読み分けやすくなります。ただし、長すぎる見出しはスマートフォンで何行にも折り返すため、必要な情報を残しつつ簡潔に整えます。

記事の内容を変えたら、見出し名も見直してください。章の役割が変わったのに目次上の名前が古いままでは、読者が求めた場所へ到着できません。目次は本文と一体の案内なので、公開後の加筆やリライトでも、見出しを最後にまとめて点検する習慣を付けると運用しやすくなります。

表示方法を選ぶ｜テーマ・プラグイン・手動リンクを比較する

最初に、今のサイトが持つ目次機能を確認する

目次を追加する前に、現在のテーマ設定、投稿編集画面、導入済みプラグインを確認します。すでに自動目次が有効なら、新たなプラグインを入れなくても設定だけで済む可能性があります。編集画面で目次のブロックが見つからないからといって、目次機能がないとは限りません。本文の外側でテーマが自動挿入している場合もあります。

一つの投稿をプレビューし、冒頭付近に目次があるか、サイドバーや追従部分に別の一覧がないかを見ます。設定画面の名称はテーマごとに異なるので、利用中のテーマの公式マニュアルで確認してください。別テーマの解説をそのまま当てはめると、存在しないメニューを探したり、関係のない設定を変更したりしがちです。

管理している人が複数いる場合は、どの機能が目次を出しているかを確認してから変更します。以前の担当者がプラグインや独自コードで追加している可能性もあります。分からないまま新しい機能を重ねるより、現在の仕組みを一つ特定する方が、あとで不具合を切り分けやすくなります。

テーマの機能を使う場合は、移行時の扱いも考える

テーマに目次機能があるなら、記事と同じデザインへ揃えやすく、設定箇所をまとめやすい場合があります。対象の見出し階層、表示位置、折りたたみなど、必要な項目が揃うかを確認しましょう。使い方はテーマごとに違うため、名称が似た設定でも、実際にどこへ表示されるかはプレビューで確かめます。

テーマを変える予定がある場合は、目次やアンカーの引き継ぎも検討します。自動で付けられたアンカーの形式が変わると、以前の章リンクが同じ場所へ飛ばなくなる場合があります。外部や別記事から特定の章へリンクしているなら、重要なアンカーを把握しておきましょう。

テーマ付属だから一切の点検が不要になるわけではありません。更新後や見出し構成を変えた後は、目次項目数、飛び先、スマートフォンでの見え方を確認します。新しい機能を増やすより、今ある機能を理解して使う方が、維持の手間を抑えられるケースもあります。

プラグインは、必要な機能と更新状況で選ぶ

テーマに必要な機能がない場合、目次用プラグインを検討できます。例としてEasy Table of Contentsは、見出しを解析して目次を作る機能を案内しています。導入前には、公式ディレクトリで対応する環境、更新状況、機能の説明を確認してください。無料部分と有料部分の範囲を混同しないことも重要です。

公式のEasy Table of Contentsの配布ページでは、機能や更新履歴を確認できます。ただし、掲載されているからどのテーマでも問題なく動くと保証されるわけではありません。使うテーマや他のプラグインとの組み合わせで表示を確認し、必要な機能だけを使いましょう。

導入や有効化はサイト全体へ影響する可能性があります。バックアップを取り、可能ならテスト環境で一記事から確かめます。新しい機能を有効にする場合、既存の目次と二重にならないよう、どちらを使うかを決めてください。目次が二つ出たあとで、見た目だけをCSSで隠して済ませるより、挿入元を整理する方が保守しやすくなります。

※表は横にスクロールできます。

手動リンクは、小さく仕組みを理解する練習にも向く

数章だけのページなら、見出しへアンカーを付け、箇条書きからその場所へリンクする手動の目次も作れます。プラグインを追加せず、どの文字がどこへ移動するかを明確に設定できるのが特徴です。自動生成ではないので、見出しを増やしたり名前を変えたりしたときは、目次側も忘れずに直す必要があります。

手動の一覧を作った記事で、テーマの自動目次も出ている場合は、二重表示にならないか確認します。手動の目次を選んだから自動機能が勝手に無効になるわけではありません。記事単位で制御できる方法か、サイト全体の設定を変える必要があるかを、利用中の機能に合わせて判断します。

方法を選ぶ基準は、どれが高機能かより、自分が更新できるかです。頻繁に見出しが増減する長文を多数運用するなら自動生成が便利な場合があります。一方、固定した案内ページで移動先を厳密に管理したいなら手動リンクが分かりやすい場合もあります。更新する人と記事の使われ方に合わせて選びましょう。

見出しとアンカーを整える｜迷わず飛べる構造を作る

三つの章で手動目次の仕組みを練習する

練習用の下書きに、「始める前の準備」「具体的な手順」「困ったときの確認」という三つのH2を作ります。本文がまったくないと移動したか分かりにくいので、各章へ短い練習用文章を入れます。実際の個人情報や顧客資料は不要です。公開記事のコピーで試す場合は、誤って公開状態を変えないよう注意してください。

最初の見出しブロックを選び、ブロックの設定にある高度な設定からHTMLアンカー欄を確認します。ここへ、たとえば toc-demo-prepare と入力します。アンカーを設定する欄には、先頭の#を付けない点を覚えておきましょう。次の二章にも、別のアンカー名を付けます。

ページ内の移動とアンカー設定の基本は、WordPress公式のページ内リンク説明で確認できます。ブロック設定が見えない場合は、対象ブロックを選んでいるか、設定サイドバーが閉じていないかを確かめます。画面の表示は版や権限によって異なることがあります。

アンカーは重複させず、意味が分かる名前にする

同じページの中では、アンカー名が重ならないようにします。見出しを複製したときに、元のアンカーまで同じになっていないか注意してください。「準備」という同名の見出しが複数あっても、移動先としては区別できる名前が必要です。記事の章を増やしたときも、既存の名前と衝突しないかを確認しましょう。

練習では英小文字で始め、単語をハイフンでつないだ短い名前を使うと管理しやすくなります。空白を入れず、大文字・小文字も統一します。見出しの文章を少し書き換えるたびにアンカーも変える運用より、章の役割を表す安定した名前にしておく方が、以前のリンクを保ちやすい場合があります。

名前を連番だけにすると簡単ですが、章の並べ替えで意味が分かりにくくなることがあります。必ずしも連番が悪いわけではありませんが、「どの章へ飛ぶリンクか」を後で確認しやすい設計を選びます。作成者が代わるサイトでは、アンカーの命名ルールを短く残しておくと、更新のたびに不統一な名前が増えるのを防ぎやすくなります。

※表は横にスクロールできます。

目次の文字へ#付きのリンクを設定する

記事の導入文の後など、目次を置きたい場所へリストブロックを作り、三つの章名を並べます。最初の項目の文字を選び、リンク先へ #toc-demo-prepare を指定します。ここでは#を付け、先ほど見出し側に設定したアンカー名と完全に一致させます。

他の二項目も同様に設定します。設定後はプレビューで各項目を押し、対応する見出しへ移動するかを確認します。最初だけでなく最後の項目まで試してください。一つのリンクをコピーして文字だけ変えた場合、三項目とも同じ章へ飛ぶようなミスが起こり得ます。

リンク先を設定するとき、本文の見出しそのものに外部リンクを付ける操作と混同しないようにしましょう。今回必要なのは見出し側のアンカーと、目次項目側のリンクです。二つが対になって動くことを理解すると、自動目次で飛び先がおかしいときも、何を確認すべきか考えやすくなります。

編集画面の構造と読者側の動作を分けて確認する

ブロックエディターのリスト表示やアウトラインは、記事を編集するための確認機能です。そこで章の順番が見えることと、読者向けの目次が表示されることは別です。編集時の一覧を見て、公開側の目次も完成したと判断しないようにしてください。読者が押せるリンクと移動先は、プレビューなどで確認します。

WordPress公式のリスト表示では、ブロックの階層やアンカーの確認方法が紹介されています。編集画面では見出しの順序や入れ子を点検し、プレビューでは実際の移動を点検する、という役割分担で使うと効率的です。

自動生成の目次でも、見出し構造の点検は同じです。目次へ表示したくない装飾用の文字が見出しブロックになっていないか、本文に不要なH1が重複していないかを確認します。見た目を整えるために使ったブロックが、目次や読み上げの構造へ影響することを意識してください。

表示位置とスマホを点検｜重複・長さ・固定ヘッダーを確認する

導入文と最初の章の関係を見て置く

目次は冒頭付近に置かれることが多いですが、具体的な場所はテーマや記事の構成に合わせて決めます。読者が記事の内容を把握する前に長い目次が出ると、何のための一覧なのか分かりにくい場合があります。短い導入で記事の対象や結論を伝え、その後に目次を置く形が合う記事もあります。

アイキャッチ、広告、告知ボックス、目次が続くと、最初の本文まで遠くなることがあります。個々の部品だけを見ず、冒頭から最初のH2までを通して確認してください。読者がどこから読み始めればよいか迷わないか、同じ画像や案内が重複していないかを点検します。

配置を変える設定がサイト全体へ反映される場合、一記事だけで判断しないことが大切です。長文の記事、短い記事、見出しが少ない記事など、代表的な複数ページを見ます。ある記事ではちょうどよくても、別の記事では目次が不自然な場所へ出る可能性があります。

スマートフォンでは、項目数と折り返しを見る

パソコンで一行の見出しでも、スマートフォンでは三行以上へ折り返す場合があります。H3をすべて載せた目次が画面を何枚分も占めるなら、階層を絞る、初期状態を折りたたむ、見出しを簡潔にするなどの調整を検討します。折りたたみ機能がある場合は、開閉できることが見た目で伝わるかも確認してください。

項目同士の間隔が狭すぎると、指で押したときに隣の章へ移動してしまうことがあります。文字を小さくして一覧を短くするだけでは、読みにくさや押しにくさを増やすおそれがあります。数を減らすか文章を整えるかを先に考え、文字サイズと余白は読みやすさを保ちましょう。

目次の番号や箇条書きが、枠の外へはみ出していないかも確認します。テーマや追加CSSの組み合わせで、リストの余白や字下げに影響が出る場合があります。本文の他の箇条書きまで同時に崩れているなら、目次だけの設定ではなく、共通のリスト装飾が関係している可能性もあります。

固定ヘッダーの下へ見出しが隠れないか試す

目次を押して移動しても、画面上部へ固定されたヘッダーの下に見出しが隠れる場合があります。リンク自体は正しい場所へ移動していても、読者には行き先が分かりにくくなります。スマートフォンとパソコンでヘッダーの高さが違うサイトでは、両方の表示で確認しましょう。

この問題に対して、むやみに本文へ空白行を挿入して位置をずらすと、別の画面幅で余白が大きくなることがあります。まずテーマや目次機能に移動位置を調整する設定があるかを確認します。CSSで対応する場合も、サイト全体へ影響する範囲を理解し、テスト環境で検証してから適用することが大切です。

移動時のなめらかなスクロールなど、見せ方を変える機能が重複していないかも点検します。テーマとプラグインの両方が同じ移動を制御していると、予想外の動きになる場合があります。すべての機能を同時に有効にするより、目的に必要な一つの仕組みに整理して確認しましょう。

※表は横にスクロールできます。

開閉とキーボード操作も確認する

目次の開閉ボタンは、マウスやタップだけでなくキーボードでも操作できるかを確認したい要素です。Tabキーで移動したときに、どの項目を選んでいるかが分かるか、Enterなどで目的のリンクへ移動できるかを試します。見た目を調整するCSSでフォーカスの表示を消してしまうと、操作しにくくなる場合があります。

開閉状態を小さな記号だけで示すと、使い方が伝わらないことがあります。「目次を開く」「閉じる」など、機能が分かる表示があるかを確認してください。利用中のテーマやプラグインが用意する構造をむやみに書き換えず、公式設定で調整できる範囲を優先すると維持しやすくなります。

目次の見た目にこだわる前に、読む・押す・移動するという基本動作が成立していることを確かめましょう。装飾は後から変えられますが、行き先の不一致や操作できないボタンは、記事を読もうとする人の障害になります。公開前の点検では、デザインと動作を別の項目として確認してください。

目次が出ない・崩れる時｜原因を切り分けて運用に残す

表示されないときは、条件を一つずつ調べる

目次が出ない場合、最初に本文に見出しブロックがあるかを確認します。次に、表示対象の投稿形式、必要な見出し数、記事単位で無効になっていないかを見ます。目次の機能によっては、一定数以上の見出しがある記事だけに表示する設定があります。短い練習記事で出ないからといって、すぐ不具合と決めつけないようにしましょう。

自動挿入と手動挿入のどちらを使っているかも確認します。手動用のショートコードやブロックが必要な設定なのに、自動で出ると思い込んでいる可能性があります。逆に、自動挿入している記事へ手動の表示を追加すると、二つ出る原因になります。現在の設定を一枚のメモへまとめると、条件を追いやすくなります。

見出しの対象レベルも点検してください。H2を載せる設定なのに、本文がH3だけで構成されていれば、期待した目次にならないかもしれません。目次側を場当たり的に変える前に、本文の階層が適切かを見直します。原因が本文にあるのか表示設定にあるのかを分けて調べることが大切です。

二重表示や飛び先違いは、生成元とアンカーを確認する

目次が二つ出るときは、テーマ、プラグイン、手動リスト、ショートコードなど、どの仕組みが表示しているかを調べます。一つずつ設定を確認し、使う機能を決めたうえで不要な表示を停止します。本番サイトでプラグインをまとめて停止すると他の機能へ影響するため、原因調査はバックアップやテスト環境を用意して行ってください。

押した項目と違う章へ飛ぶ場合は、リンク先のアンカーと、見出し側のアンカーが一致しているかを確認します。同じアンカーが複数ないか、コピーしたリンク先を直し忘れていないか、章を移動した際にIDが変わっていないかを点検します。表示される項目名が正しくても、リンク先の文字列が古いままということがあります。

見出し名を変えた後に自動アンカーが変わる仕組みでは、過去の章リンクへ影響する場合があります。重要な案内で使う章は、安定したアンカー名を維持できるかを確認しましょう。外部からのリンクすべてを把握するのは難しくても、自分のサイト内で設定した章リンクは、リライト時に合わせて点検できます。

※表は横にスクロールできます。

キャッシュの確認と設定変更を混同しない

設定を変更しても古い表示が見える場合、キャッシュが関係していることがあります。ただし、見出しや設定の不備が原因なのに、キャッシュを消す操作だけを繰り返しても解決しません。まず保存が完了しているか、正しい記事を見ているか、設定内容が適用される条件かを確認しましょう。

キャッシュを確認するときは、ブラウザー、WordPress側の機能、サーバーや配信サービスなど、どこに保存された表示を見ているかを整理します。管理者だけの表示とログアウト状態の表示が違う場合もあるので、閲覧者が見る状態で確認することが大切です。権限のないサービス設定を独断で変更しないようにしてください。

不具合調査では、一度に複数の設定を変えず、変更した項目と結果を記録します。たとえば対象見出し数を変えたあとに表示されるようになったなら、その条件が影響した可能性を説明できます。テーマ変更、複数プラグイン停止、CSS変更を同時に行うと、何が効いたのか分からなくなり、元へ戻すのも難しくなります。

更新後の確認項目を決め、必要な範囲だけ整える

目次の設定ができたら、更新後に見る項目を残します。目次が一つだけ表示されるか、項目名と章が一致するか、先頭と最後のリンクが動くか、スマートフォンで長すぎないか、固定ヘッダーに見出しが隠れないかが基本です。記事の見出しを増減したときにも、同じチェックを行います。

運用メモには、目次を生成する機能名、対象の見出し階層、表示条件、記事別の例外、手動アンカーの命名ルールを書いておきましょう。後任がどの設定を変えればよいか分かれば、機能を重ねて二重にする事故を減らせます。公開記事へ影響する設定は、変更前の状態も記録しておくと戻しやすくなります。

WordPressブログの運用環境をこれから決める段階なら、副業ブログ向けレンタルサーバーの比較と選び方も参考になります。日々の更新やバックアップを扱いやすい環境を選び、その上でテーマや目次の設定を整えていきましょう。目次そのものは、まず現在のテーマと本文の構造を確認するところから始められます。

最初は三つの見出しで、目次の項目と移動先が一対一でつながることを確かめてください。仕組みが理解できたら、記事の長さや更新頻度に合わせて自動生成を選び、実際の画面で読みやすさを確認します。目次を飾りとして増やすのではなく、読者が探している答えへ到着するための案内として育てていきましょう。