WordPress 記事の目次：見出し構造、アンカー、スマートフォンでの読みやすさ

サイト移転の記事を開く人は、URL のリダイレクトの節だけを探しているかもしれません。内容が充実していても、延々とスクロールしなければならない記事は使いにくいものです。目次は全体像を先に示し、必要な箇所に直接移動できるようにします。記事の考え方の順序を反映させることが大切です。

準備、作業手順、確認、よくある質問を含む長文を例に、WordPress のアンカーと Easy Table of Contents を説明します。まず章立てを明確にし、自動生成か手動管理かを選び、最後にパソコンとスマートフォンで確認します。

見出し名で読者の疑問に答える

記事の小見出しだけを抜き出して読んでみましょう。「紹介」「さらに紹介」「その他」と続いても、読者は目次から内容を判断できません。「開始前に必要な資料」「ファイルの移動方法」「移転後の確認方法」など具体的な問いに変えます。目次は全ての文を列挙するものではなく、主要な読み進め方を示すものです。

エディターでは本物の見出しブロックを使い、内容の階層に合わせて H2 と H3 を配置します。通常の段落を大きく太くするだけにしたり、文字サイズを変えるために階層を飛ばしたりしないでください。主な手順には H2、その中の補足には H3 を使い、見た目の大きさはテーマのスタイルで調整します。

繰り返し登場する FAQ や注意事項には、「移転前の注意」と「URL 変更時の注意」のように主題を加えます。読者は目次から本文に移動したときに現在地を把握でき、編集者やサポート担当者も特定の節を参照しやすくなります。

項目が少なければ手動アンカーから始める

見出しブロックの Advanced 設定に HTML Anchor として prepare-files などを入力します。記事冒頭のリストやボタンに #prepare-files へのリンクを作れば、同じページのその位置に移動できます。別の記事からリンクする場合は、ページの完全な URL に同じフラグメントを付けます。

WordPress 公式資料によると、アンカーは同じ文書内で一意である必要があり、大文字と小文字を区別し、空白は使えません。長期に参照される節には短く分かりやすい名前を付け、編集記録に残します。表示する見出しを変更しても、すでに参照されているアンカーまで変える必要は必ずしもありません。

手動方式は節が少なく構造の安定した案内ページや特集に向いています。ただし、節を追加・削除したら目次のリンクも自分で更新しなければなりません。冒頭のリストを作って終わりにせず、確認時には全項目をクリックし、移動先の欠落や同名の別の節への誤移動がないか調べます。

Easy Table of Contents で目次を生成する

Easy Table of Contents を有効にしたら、まず対応するコンテンツタイプを指定し、次に自動挿入するタイプを選びます。対応と自動挿入は別の設定です。最初は通常の記事だけにすると、トップページ、決済ページ、短いお知らせに不要な目次が現れるのを避けられます。

記事に合う位置と表示のしきい値を決め、一定数以上の節がある場合だけ表示するなど設定します。短い導入文の後に置けば、読者は記事の目的を先に知ることができます。分かりやすいラベルと見出し階層を指定し、通常は主な節と必要な小節だけを載せれば十分です。H1 から H6 まで全て詰め込む必要はありません。

1. 必要なコンテンツタイプを有効にし、代表的な長文で自動挿入を試す。
2. 表示位置、条件、対象にする見出し階層を設定する。
3. テーマや別のプラグインが既に目次を作っていないか調べ、二重表示を防ぐ。

不要な項目を除き、読みやすい目次にする

関連記事、フッター、広告の見出しが目次に紛れ込んだら、それらが本文として扱われる理由を調べます。プラグインには見出しの除外設定があります。CSS class による除外は公式資料では Pro 機能として紹介されているため、利用する版を確認してください。

ページビルダーやショートコードが見出しを動的に出力する場合、エディターでは正常でも公開ページの目次が違うことがあります。エディターのサイドバーだけでなく、実際の公開表示を試します。プラグイン更新後も、重複見出し、折りたたみ内容、動的ブロックを含む代表ページを再確認します。

目次の文字を小さくしすぎないでください。長い見出しは自然に折り返し、階層の字下げは分かりやすく保ちます。記事が非常に長ければ、主な節だけを先に表示するか、明確な展開ボタンを用意します。初期状態で閉じていても、操作できる目次がそこにあると読者に伝わるようにします。

固定目次と固定ヘッダーを合わせて確認する

Easy Table of Contents の公式資料では Fixed/Sticky TOC は Pro 機能です。固定目次を選ぶ前に、スクロール中も表示する必要が本当にあるか考えます。パソコンのサイドバーに空きがあっても、スマートフォンの画面隅に一覧全体を置けるとは限りません。問い合わせボタン、Cookie 通知、ページ上部へ戻るボタンと場所が重なる可能性があります。

目次を押した後に固定ヘッダーが見出しを隠す場合は、移動先の余白を調整します。まずプラグインやテーマに該当設定があるか調べます。独自の CSS が必要なら、担当者は scroll-margin-top などを検討し、ヘッダーの実際の高さに合わせて確認します。一つの数値が全端末で使えると決めつけないでください。

スムーズスクロールは視覚効果であり、正しい場所への移動の代わりにはなりません。長いページや低速の端末で試し、後から画像が読み込まれてレイアウトが動き、移動先がずれないか確認します。アニメーションが読書を妨げるなら簡素化し、明確なリンクと安定した節の位置を優先します。

編集工程に目次の確認を組み込む

公開前に最初、中央、最後の項目を順にクリックし、その後全項目を確認します。キーボードで展開操作とリンクを試し、フォーカスが見えるか調べます。狭い画面でははみ出しや本文への重なりを確認し、スマートフォンを回転させた後も固定要素を見直します。

アンカー付きの URL を新しい未ログインのウィンドウで開き、指定の節に直接到達するか確かめます。画像や広告の読み込み後にページの高さが変わるサイトでは、深いリンクを直接開いた結果に特に注意します。ページの読み込みが終わってから目次を押す試験とは異なるので、両方を行います。

記事を更新するときは、参照されている節を削除、改名、移動していないか調べ、目次も直します。アンカーの変更が必要なら、関連するサイト内リンクやサポートで使うリンクを修正します。ページは開けても目的の節に着かないリンクを残さないようにしましょう。目次を本文とともに維持してこそ、読者の探す時間を減らし続けられます。

WordPress の投稿と固定ページを整理する

サイトのカテゴリーとナビゲーションを設計する

• チュートリアル
• アプリ・ソフト
• サイト構築・EC
• WordPress