WordPressの投稿にフローティング目次（追従型TOC）を追加する方法

オンラインコンテンツ制作に長く携わっている人なら誰でも知っているように、Googleは良質な情報をユーザーに提供する長文記事を高く評価しています。その結果、数千語に及ぶ記事がウェブ上で一般的になりました。しかし一方で、長い記事の中で読者が迷子になり、目的の場所へたどり着けないという問題も増えています。

こうした長文記事を読みやすくナビゲートするのに役立つのが「目次（Table Of Contents：TOC）」です。ところが多くの場合、目次は記事の冒頭など特定の位置に固定表示されるだけで、ユーザーがスクロールするとすぐに画面から消えてしまいます。目次が記事に沿って常に画面の決まった位置に浮かんでいれば、いつでもアクセスできて便利ですよね。

WordPressユーザーの方は、以下の手順で投稿にフローティング目次（追従型目次）を追加できます。

ステップ1：目次を追加する

まずは目次を挿入することから始めましょう。おすすめのプラグインは「Table of Contents Plus」です。このプラグインを使えば、記事内の見出しをもとに目次を自動生成してくれます。

インストールして有効化すると、「設定 → TOC+」メニューからプラグインにアクセスできるようになります。設定画面では、特定のコンテンツタイプに自動的に目次を表示させる、目次を有効化するために必要な見出しの最小数を指定する、ショートコードで目次の表示・非表示を切り替えたり任意の位置に挿入したりする、といったさまざまなカスタマイズが可能です。

目次をサイドバーに表示したい場合は、「外観 → ウィジェット」を開き、「TOC+」ウィジェットをサイドバーウィジェットエリアにドラッグ＆ドロップします。「保存」をクリックすれば完了です。

これで、条件を満たすすべての投稿や固定ページのサイドバーに目次が表示されるようになります。

ただしこのままでは、サイドバーの目次ウィジェットも記事と一緒にスクロールしてしまいます。ウィジェットを画面に固定するには、この先のチュートリアルに進みましょう。

ステップ2：目次を画面に固定する

2つ目の目的を達成するには、「Q2W3 Fixed Widget」という別のプラグインの力を借ります。通常どおりWordPressのプラグインディレクトリから検索し、インストールして有効化してください。

このプラグインの設定は「外観 → Fixed Widget Options」メニューからアクセスできますが、ほとんどのユーザーはデフォルトのままで問題ありません。

使い方はとてもシンプルです。再び「外観 → ウィジェット」を開き、サイドバーに固定したいウィジェットを選択します。今回はTOC+ウィジェットをスクロールに合わせてサイドバーの決まった位置に浮かせたいので、TOC+を選びましょう。

「保存」ボタンのすぐ上に「Fixed widget（ウィジェットを固定）」という新しいチェックボックスが表示されているはずです。このボックスにチェックを入れるだけで、固定された目次の完成です。

なお、この機能はTable of Contents Plusに限定されません。Q2W3プラグインを使えば、サイドバーのどんなウィジェットでも常に表示させておくことができます。

あとは、サイドバーに目次ウィジェットがあるページや投稿を開いて、成果を確認してみてください。もし無効化したくなったら、「外観 → ウィジェット」メニューに戻り、チェックを外すだけです。

知っておきたいちょっとしたコツ

CSSに精通している方なら、TOC+のスタイルカスタマイズ機能を活用して見た目を好みに調整できますが、ほとんどのユーザーはプラグインを初期状態のまま使うことになります。つまり、目次の表示は使用しているテーマの影響を大きく受けるということです。

筆者はTOC+とQ2W3の組み合わせを複数のテーマでテストしてみました。そこで得られた、最大限の効果を引き出すためのコツをいくつかご紹介します。

まず1つ目は、固定するTOC+ウィジェットをサイドバーの一番下、他のウィジェットより下に配置することです。そうすることで、スクロール時に他のウィジェットと重なるのを防げます。ウィジェットの背景は透明になっているため（少なくとも筆者がテストしたテーマではそうでした）、透明なウィジェット同士が重なり合う様子は決して美しくありません。特に片方が動いてもう片方が静止している場合は顕著です。

2つ目は、サイドバーに配置するウィジェットの数をできるだけ絞ることです。こうすることで、TOC+ウィジェットはファーストビュー（折り返し地点）より上に表示され、ページと一緒にスクロールして画面上部に到達した時点でそこに留まるようになります。

さらに、サイドバーを固定表示にするメリットとして、ページを大きく下までスクロールした際に生じがちな「空欄エリア」がなくなる点も挙げられます。訪問者は常に何らかのコンテンツを目にできるわけです。

ぜひこの組み合わせを試して、その使い心地を確かめてみてください。