記事が長くなるほど、読者は「今どこを読んでいるのか」を見失いやすくなります。MANIARUでも記事を増やす中で、本文を読みながら全体の流れを確認できる目次が欲しくなりました。
そこで、記事内のH2とH3から目次を自動で作り、PCではサイドバーに追従表示する仕組みを実装しました。スクロール位置に合わせて、読んでいる見出しも目次上で切り替わります。
この記事では、単に目次を表示する方法ではなく、サイドバーとの役割分担、固定ヘッダーとの間隔、現在位置の示し方、モバイルでの見せ方まで、MANIARUで実際に決めた内容を記録します。
追従する目次を作った理由
MANIARUの記事は、試したことを手順や判断とともに残すため、見出しが増えることがあります。短い記事なら本文の流れだけで読めますが、長くなると前後の関係を把握しにくくなります。
記事の最初に目次があるだけでも全体像は伝わります。ただ、読み進めた後に別の項目へ移動したいときは、ページ上部まで戻らなければなりません。
そこでPCでは、本文の横に目次を置き、スクロールしても参照できる形にしました。目的は目次を目立たせることではなく、長い記事を迷わず読めるようにすることです。
目次とサイドバーの役割を分ける
記事ページのサイドバーには、著者情報や関連する導線もあります。最初はサイドバー全体を追従させる案も考えられますが、すべてを固定すると表示領域を取りすぎます。
MANIARUでは、著者情報は「誰が書いているか」を伝えるもの、目次は「記事のどこを読んでいるか」を伝えるものとして役割を分けました。追従させるのは、読み進める間も必要になる目次だけです。
サイドバー全体ではなく、目次だけを追従させる
PC表示では、通常のサイドバーの下に目次を追加し、その目次だけに追従を設定しています。著者カードまで一緒に固定しないため、サイドバー本来の情報量を保ちながら、記事内ナビゲーションだけを残せます。
追従の基本にはCSSのposition: stickyを使っています。stickyが効く条件や、親要素の高さ、overflowとの関係は、別の記事「CSSのposition: stickyで追従サイドナビを作る。実装して分かった注意点」にまとめました。
この記事では、その仕組みをWordPressの記事目次としてどう組み合わせたかに絞ります。
H2とH3から目次を組み立てる
目次には、本文内のH2とH3を使います。記事の見出しをそのまま取得するため、目次だけを別に手入力する必要はありません。本文を直したときに、目次との内容がずれるのも防げます。
H2は記事の大きな流れを示す
H2は記事の主要な区切りとして、目次の第一階層に並べます。目次だけを見ても、記事がどの順番で進むのか分かることを優先しました。
H3はH2の下に入れる
H3は、直前のH2に属する第二階層として表示します。H2と同じ位置に並べるより、内容のまとまりが伝わりやすくなります。
一方で、階層を深くしすぎると目次そのものが読みづらくなります。現在の目次はH2とH3までに限定し、本文の構造を簡潔に見せる方針です。
固定ヘッダーの下から追従させる
MANIARUのヘッダーは画面上部に固定されています。そのため、目次を単純に上端へ固定すると、ヘッダーと重なったり、間隔が詰まりすぎたりします。
現在は目次の追従位置を上から92pxにしています。ヘッダーの高さに余白を加え、見た目と操作の両方で窮屈にならない位置を選びました。
目次が画面より長くなった場合に備え、最大の高さはcalc(100vh - 116px)にし、目次内をスクロールできるようにしています。項目が増えても、画面の外へはみ出したままになりません。
スクロール位置と現在位置を連動させる
追従するだけでは、目次は記事全体の地図にとどまります。そこで、本文のスクロール位置を見て、現在読んでいる見出しに対応する項目へactive表示を付けました。
判定の基準は、見出しが固定ヘッダーの下に入ったかどうかです。本文を下へ読むとactiveが次の項目へ移り、目次を見るだけで現在位置を確認できます。
ページの最下部まで到達したときは、最後の見出しを選ぶようにしています。記事末尾では次の見出しが存在しないため、通常の位置判定だけでは最後の項目へ切り替わらない場合があるからです。
active表示は一つだけにする
現在位置として強調する項目は、原則一つだけです。複数の項目が同時に強調されると、どこを読んでいるのかがかえって分かりにくくなります。
active項目には青いラインと淡い背景色を使い、文字も少し強くしています。大きく動かしたり色を増やしたりせず、視線を移したときに分かる程度の表現にしました。
PCとモバイルで目次の扱いを分ける
同じ目次でも、PCとスマートフォンでは使える画面幅が違います。両方で同じ配置を使うのではなく、端末に合わせて表示方法を分けました。
PCではサイドバーに追従表示する
画面幅が960px以上では、目次をサイドバーに表示します。本文の幅を保ちながら横の空間を使えるため、読み進めても目次を確認できます。
モバイルでは本文の前に折りたたんで置く
959px以下ではサイドバーの目次を隠し、本文の先頭に折りたたみ式の目次を表示します。初期状態は閉じたままにし、必要な人だけが開ける形です。
スマートフォンで目次を常に追従させると、本文を読む領域が狭くなります。小さい画面では追従よりも本文の見やすさを優先しました。
実装で気をつけたこと
この目次は、AI、WEB、CODE、BUILD、GROW、MONEYのカテゴリー記事を対象にしています。PROJECT記事には別のナビゲーションがあるため、同じ場所へ二つの追従ナビを重ねません。
また、H2とH3がない記事では目次を出さず、モバイル用に複製した目次内の文字を再び見出しとして拾わないようにしています。表示することよりも、不要な場面で出さないことを意識しました。
見出しにリンク先のIDがない場合は自動で付けますが、すでにIDがある場合はその値を使います。WordPress側で設定したアンカーを無理に置き換えないためです。
使って分かったこと
追従目次を追加したことで、長い記事でも全体の中の現在位置を把握しやすくなりました。気になる見出しへ直接移動できるため、最初から順番に読まない使い方にも対応できます。
実装して分かったのは、目次単体の機能よりも、既存のヘッダーやサイドバー、画面幅との組み合わせが大切だということです。stickyを指定するだけでは、実際の記事ページで使いやすい目次にはなりません。
H2とH3で構造を作り、目次だけを追従させ、現在位置を一つ示す。モバイルでは折りたたむ。この整理によって、MANIARUの記事に合う形へまとめることができました。
関連する実装記録
追従の基本的な仕組みや、stickyが動かないときに確認した点は「CSSのposition: stickyで追従サイドナビを作る。実装して分かった注意点」で詳しく整理しています。
今回の目次は、サイトを公開した後に実際の記事ページを使い、読みやすさを見直す中で追加しました。機能を最初から増やすのではなく、必要になった理由を確認してから作る。MANIARUでは、これからもこの順番でサイトを改善していきます。
FROM THE PROJECT
この方法を実際に試した記録