こんにちは。バナナデスクです。
記事の見出しを「準備するもの」から「前日までに準備するもの」へ直したら、目次から違う場所へ移動してしまった。そんなときは、目に見える文章だけでなく、移動先を示す目印も確かめます。WordPressは、記事や画像を登録してWebサイトを作る仕組みです。その目次には、同じページの見出しへ移動する「ページ内リンク」を使えます。
更新しやすい目次を作るには、読者に見せる見出しの文章と、移動先の目印であるIDを分けて管理します。IDは、その場所をほかと区別するための名前です。「見出しの文章を変えたから、IDも変える」と考える必要はありません。
この記事では、ブログの編集担当が4見出しの架空記事を、改名・並べ替え・追加で5見出しへ変更した検証記録を使います。記事の題材は架空ですが、スマホ幅で全項目を押した結果は実際の確認記録です。自分の記事で目次を一つ作り、本文を直したあとに移動先まで点検する順番を説明します。
テーマやプラグインに目次があるか、先に確認する
最初に、編集する記事を読者向けの画面で開き、すでに目次が表示されていないかを見ます。次に、サイトの見た目や一部の機能を決める「テーマ」と、機能を追加する「プラグイン」の設定を確かめます。どちらかが、本文の見出しを読み取って目次を自動で作っていることがあります。
編集画面の本文に目次がなくても、公開ページには自動で追加されている場合があります。その状態で自分でも目次を入れると、二つ表示されることがあります。目次を作っている機能を特定し、この記事では自動と手動のどちらを使うか決めてから進めてください。
自動目次は、見出しから一覧を作れることが利点です。手動目次は項目や表示文を自分で決められますが、見出しを追加・移動したあとの修正も自分で行います。手動にするなら、テーマやプラグイン側で、その記事の自動目次を止められるかを確かめます。設定の名前や使える範囲は、利用中の機能の案内に沿って確認します。
ブログの編集担当による検証では、通常の公開サイトから切り離してWordPressを試せる「WordPress Playground」を使いました。環境はWordPress 7.1.2、テーマTwenty Twenty-Five 1.5です。通常のプラグイン一覧は無効のHello Dollyのみで、目次プラグインは使っていません。手動のHTML目次を一つ置き、公開ページにも目次の領域が一つだけあることを確認しました。自動目次を追加して競合させた試験ではありません。
見出しのIDと、目次のリンクを対応させる
WordPress公式のページ内リンクの説明では、見出しに「HTMLアンカー」を設定し、リンク側に同じ名前を指定する方法が紹介されています。HTMLは、文章の見出しやリンクなどの構造を記すための書き方です。HTMLアンカーはページ内の移動先に付ける目印で、保存されるHTMLではIDとして表されます。
ブロック編集では、見出しや段落などを「ブロック」という部品として扱います。たとえば「準備するもの」という見出しブロックを選び、設定の「高度な設定」または「詳細設定」にあるHTMLアンカー欄へprepareと入れます。アンカー欄には#を付けません。目次からその見出しへ移動させるリンクには、先頭に#を付けた#prepareを指定します。
この二つの名前は、大文字と小文字も含めて一致させます。同じIDは同じ記事の中で一度だけ使い、名前には空白を入れません。半角の英字から始まる短い名前にすると扱いやすくなります。数字の連番だけで管理すると、途中へ節を追加したときに付け直したくなるため、prepareのように内容を表す名前を使うと整理しやすくなります。
見出しの文章を直しても、そこで説明する内容が同じなら、既存のIDを保つ方法があります。以前からあるページ内リンクや、別の記事からその節へ向けたリンクを使い続けやすくするためです。節そのものを削除したり、ほかの節へまとめたりした場合は、目印だけ残して違う内容へ誘導せず、リンクを置いた側も見直します。
4見出しを編集した、変更前後の例
検証用の記事では、見出しの文章と順番を変え、料金についての節を一つ追加しました。元からある4つのIDは維持し、新しい節にだけfeeを付けています。変更後は次の5見出しです。
| 変更前 | 変更後の順番と表示名 | IDの扱い |
|---|---|---|
| 1. 講座で扱う範囲 | 1. 講座で扱う範囲 | scopeを維持 |
| 3. 当日の流れ | 2. 当日の時間配分 | dayを維持し、前へ移動 |
| 2. 準備するもの | 3. 前日までに準備するもの | prepareを維持し、後へ移動 |
| なし | 4. 料金に含むもの | feeを新設 |
| 4. 質問の送り方 | 5. 質問の送り方 | questionsを維持 |
自分の記事を直すときも、編集前に見出しの文章・順番・IDをメモしておきます。本文の変更が終わったら、そのメモと照らしながら目次の文章と順番も直します。IDが正しくても、目次だけ古い順番では、読者が記事の流れをつかみにくくなります。
新しい見出しを足した場合は、本文にその節と説明文があることを確かめ、そのIDへ向けた項目を目次に追加します。目次の項目だけ増やしても、移動先がなければ目的の場所へ案内できません。
同じ対応を持つ、手動目次のHTML例
以下は、検証記事の目次と見出しの対応を抜き出したHTMLです。見出しの下に入る説明文は省略しています。navは案内のまとまり、olとliは番号付きの一覧とその項目、a hrefはリンク先、h2 idは見出しとその目印を表します。
<nav aria-label="この記事の目次">
<ol>
<li><a href="#scope">講座で扱う範囲</a></li>
<li><a href="#day">当日の時間配分</a></li>
<li><a href="#prepare">前日までに準備するもの</a></li>
<li><a href="#fee">料金に含むもの</a></li>
<li><a href="#questions">質問の送り方</a></li>
</ol>
</nav>
<h2 id="scope">講座で扱う範囲</h2>
<h2 id="day">当日の時間配分</h2>
<h2 id="prepare">前日までに準備するもの</h2>
<h2 id="fee">料金に含むもの</h2>
<h2 id="questions">質問の送り方</h2>普段のブロック編集で作る場合は、コードを全部貼らなくても構いません。次の手順で、同じ対応の手動目次を作れます。
- 本文の各見出しブロックを選び、HTMLアンカー欄へ別々の名前を入れます。すでに名前がある見出しは、変更が必要か先に確かめます。
- 記事の冒頭など、目次を置く位置にリストブロックを一つ作ります。本文の見出しと同じ順番で、項目名を入力します。
- リストの項目名を選択し、リンクの設定へ、対応するアンカー名の先頭に
#を付けて入力します。たとえばprepareへのリンクは#prepareです。 - すべての項目にリンクを付け、保存します。本文に目次の項目に対応する見出しが一つずつあるかを照合します。
- 保存後のページを開き、目次が一つだけ表示され、各項目から正しい節へ移れるかを押して確認します。
コードを使う場合も、既存の見出しを残したまま、同じIDを持つ見出し一式を追加しないでください。目次だけを作りたいのか、見出しも新しく作るのかを決め、必要な部分だけを使います。
ブログの編集担当は、検証記事の追加・改名・並べ替えのために、編集用に作ったブロックデータをAPIで保存しました。APIは、プログラムからデータの保存などを依頼する窓口です。管理画面だけで全工程を入力した実演ではなく、保存後の実ページでリンクを押して確認した記録です。上のブロック編集の手順は、読者が自分の記事で進めるための説明です。
390px幅で、5つのリンクを実際に押す
検証用の記事は、外側が390px、内部の表示領域が375pxの画面で開きました。pxは、画面上の長さを表すピクセルという単位です。5項目を順番にクリックしたところ、すべての項目で、ページのアドレスであるURLの末尾の#以降が設定したIDと一致し、対応する見出しが画面内に表示されました。見出しの上端は、表示領域の上から約45〜46pxにあり、読める状態でした。
この位置は、検証で使ったテーマと環境での観測です。自分の記事でも、スマートフォンやブラウザのスマホ幅表示で、目次の全項目を一つずつ押します。「押せた」だけで終わらず、移動した見出しが合っているか、その見出しと続く説明文を読めるかまで確かめてください。
スクロールしても画面上部に残るメニューを「固定ヘッダー」と呼びます。これがあるサイトでは、正しいIDへ移動しても見出しがメニューの下へ隠れることがあります。URL末尾のIDが違う問題と、IDは合っているのに見出しが隠れる問題を分けると、確認する場所を絞れます。
目次が動かないときの、確認する順番
違う場所へ移動したり、項目を押しても変化が分からなかったりしたら、次の順番で見直します。一度に複数の設定を変えず、直した項目を保存してから、そのリンクをもう一度押して確かめます。
- 目次のリンクが
#prepareのような形になっているかを見ます。本文のIDと、スペル・大文字小文字が完全に一致するか確認します。 - 同じIDが記事内に二つないか、移動先の見出しが保存されているかを確かめます。コード例から見出しを重複して貼っていないかも見ます。
- 目次の表示名と順番を、現在の本文と照合します。追加・削除した節がある場合は、目次側にも変更を反映します。
- 公開ページで目次が二重になっていないかを見ます。二つある場合は、手動目次と、テーマやプラグインの自動目次の設定を照合します。古い表示が残る場合は、表示を速くするために保存された「キャッシュ」が関係していないかも、利用中の機能の案内で確認します。
- スマホ幅で全項目を押し直します。正しいIDへ移動しているのに見出しが隠れる場合は、固定ヘッダーと移動後の表示位置を確認します。
目次の目的は、読者が見出しから内容を予測し、必要な節へ移れるようにすることです。目次を付けるだけで検索順位やAIからの引用が保証されるわけではありません。記事を更新したら、「目次の文章」「本文と同じ順番」「押した先の見出し」の三つを点検してから仕上げましょう。