お気軽にご相談ください
050-8885-7511
全国対応・平日10時〜18時

WordPressでかんたんに目次を自動挿入できるプラグイン「Table of Contents Plus」の使い方を徹底解説

代表取締役

児島 大

WordPressで目次をかんたんに実装できるプラグイン「Table of Contents Plus」の設定方法やカスタマイズ方法を解説します。

Table of Contents Plusの設定方法

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

管理画面の[プラグイン][新規追加]をクリックします。
右上の検索窓に[Table of Contents Plus]と入力すると検索結果に表示されます。[今すぐインストール]をクリックしてインストール後[有効化]をクリックします。

設定をする

管理画面の[設定][TOC+]をクリックします。

位置

目次の表示位置を設定できます。目次の自動表示を設定している場合のみ有効です。

  • 最初の見出しの前(デフォルト)
  • 最初の見出しの後

表示条件

見出しがいくつ以上あるときに目次を表示させるかを設定できます。目次の自動表示を設定している場合のみ有効です。
見出しが1つとか2つしかないのに目次をつけるのもあまり意味はないので、4つ以上がデフォルメで設定されています。[2]〜[10]で設定変更できます。

以下のコンテンツタイプを自動挿入

どのコンテンツに目次を自動挿入させるかを選択できます。
自動挿入が不要な場合にはすべてチェックを外します。[post]が投稿ページで、[page]が固定ページになります。その他は、通常は使うことはありませんので、そのままで問題ありません。
カスタム投稿タイプを利用している場合にはここにカスタム投稿タイプも表示されます。

見出しテキスト

目次の上にタイトルを表示させるかを設定できます。
[目次の上にタイトルを表示]にチェックした場合、以下の項目が設定できます。
[見出しテキスト]「目次」や「コンテンツ」と入力します。
[ユーザーによる目次の表示・非表示を切り替えを許可]チェックをいれると、目次の表示と非表示をユーザーが切り替えられるようになり、その際のテキストも設定できます。
[最初は目次を非表示]チェックをいれると、デフォルトで目次が閉じた状態になります。

階層表示

チェックをいれると、見出し2や見出し3などの見出しの階層を、目次でも文字の開始をずらすことで階層を表現できます。

番号振り

チェックをいれると、自動的に目次に連番を振ってくれます。

スムーズ・スクロール効果を有効化

チェックをいれると、目次をクリックしたときにその場所まで滑るようにスムーズに移動します。

横幅

目次の横幅を設定できます。
通常は[自動(デフォルト)]のままで大丈夫です。

回り込み

目次の横幅を短くした場合に、目次の下のコンテンツを目次の左右に回り込ませるかどうかを設定できます。
通常は[なし(デフォルト)]のままで大丈夫です。

文字のサイズ

目次の文字サイズを設定できます。
デフォルトは[95%]になっていますので、そのままで大丈夫です。

プレゼンテーション

目次のデザイン対応を選択できます。[カスタム]にすると、背景やボーダーなどを個別にカスタマイズ設定できます。

手動で目次を挿入する方法

[以下のコンテンツタイプを自動挿入]の項目でチェックをすべてはずした場合などは自動で目次が表示されませんので、目次を表示させたい記事ごとにショートコードで挿入することができます。

メリットとデメリット

目次がほしい記事だけに表示させたり、位置を毎回自由に変えられたり、記事ごとに目次に表示させたい見出しレベルを設定できたりと、手動挿入にすると細かいカスタマイズが記事ごとにできます。
しかし、その反面、毎回、ショートコードを書かないといけなかったり、過去の記事に反映させたりする場合には、過去記事数によっては相当な手間が必要になります。

また、毎回目次の仕様を変えてしまうと、ユーザーにとってわかりづらい仕様になってしまう可能性があります。
できる限り、ユーザーが記事を読む思考の妨げを取り除くことは、サイト運営においては重要ですので、目次は自動挿入がおすすめです。

目次の手動での挿入方法

目次を挿入したい箇所にというショートコードを挿入するだけです。

お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

資料準備中…

お電話でのお問い合わせはこちら

  • ※電話番号はおかけ間違いのないようご注意ください。
  • ※セールス目的のお電話はお断りしております。