投稿した記事内に自動で目次を設定してくれる便利プラグイン「Table of Contents Plus」

本日は便利で有名な目次プラグインのご紹介です。ホームページやブログでコンテンツを読んでいると目次が差し込まれている記事がありますよね。当サイトにも以下のような「目次」が表示されています。

表示という部分をクリックしたら目次が開きます。

そして各タイトルをクリックしたらそれぞれの見出しにページ内でアンカー移動します。目次があれば急いでいる方は「気になるタイトル」を見つけてクリックするだけですぐ記事の続きが読めるのでとても便利です。

では本記事では大人気プラグイン「Table of Contents Plus」を解説させていただきます。

記事内に自動で目次を設定するプラグイン Table of Contents Plus

ちなみにプラグインが有効になっていない状態が以下です。

目次を自動で作るためのプラグイン「Table of Contents Plus」を導入していきましょう。

プラグインのインストール

プラグインのインストールは「プラグイン > 新規追加」から行います。

手元にプラグインデータ（zip形式）がある方は「プラグインのアップロード」から進めてください。

管理画面からインストールする場合は「検索ボックス」にTable of Contents Plusと入力。そして下記がヒットしたら「今すぐインストール」をクリックしてプラグインのインストールを進めてください。

インストールが完了したら「有効化」をクリック。

下記のメッセージが表示されたら完了です。

目次プラグインの初期設定

管理画面の「設定 > TOC+」をクリックすると設定が開きます。

初期設定は以下となっています。「page（固定ページ）」でしか表示されない状態になっています。

では設定を変更していきましょう。post（投稿ページ）にチェックを入れます。そして初期設定では英文字になっている「目次の文言」を英語から日本語に切り替えましょう。お好きな文言を設定ください。併せてタイトルまでスルスルと移動させるために「アンカーリンクにジャンプではなくスクロールする」を有効にします。

入力が完了したら「設定を更新」をクリック。

以上で設定が完了です。

ページ側の表示を確認する

ページ側を更新すると以下のように目次が差し込まれています。

クリックで目次を開く

カッコのなかの「表示」をクリックすると目次が開きます。

タイトルをクリックして挙動テスト

なかのタイトルをクリックしてみましょう。

すると該当のタイトルまで移動します。URLに「/#」とアンカーが入っていますね。ただ、タイトルに対してぴったりの位置にアンカー移動しているため少し窮屈な印象を受けます。設定画面から調整可能です。

上級者向けの設定で余白を調整

上級者向けの「表示」をクリックしましょう。

余白の設定は以下の値で変更可能です。

15px余裕を持たせて「45px」に設定したら「設定を更新」をクリック。余白のバランスは好みもあるので更新してアンカーの位置を再度確認するなど好みに合わせて数字を微調整していけばOKです。

以上ですべての設定が完了です。

まとめ

ブログ記事などに自動で目次が入ると来訪ユーザーは探しているコンテンツにすぐたどりつけます。もちろん、コンテンツを作成する際にしっかり見出しを分けて記事を書く工夫は必要となりますが、ユーザーにとって便利であればサイト滞在率は向上します。サイト滞在率の向上は「ホームページを見てくれる時間が伸びる」ということとイコールなので自然と成約（コンバージョン）率も上がります。良いコンテンツもナビゲーション１つで価値が下がってしまうこともあるので意識しておきましょう。もし「本」に目次がなかったらきっと多くの方が読む気を失せるはずです。本もブログもユーザーにとっては変わらないのでぜひお試しください。