「Table of Contents Plus」はブログ記事やページに目次を自動作成&表示できるWordPressプラグインです。
目次を表示することで読者が必要な情報を簡単に見つけられ、SEO対策の強化にもつながります。
ということで今回は、
- Table of Contents Plusとは
- Table of Contents Plusの使い方・設定
- Table of Contents Plusのカスタマイズ
について解説します！
Table of Contents Plusとは
Table of Contents Plusは目次を自動生成してくれるWordPressのプラグインです。（無料）
ブログ記事内に設置した見出しを元に目次が生成されます。
Table of Contents Plusには次のようなメリットがあります。
- 読者が必要な情報を簡単に見つけられる
- 記事の構成や内容がわかりやすい
- 内部リンクで目次から読みたい箇所へ移動できる
- 手動で目次を作成する手間が省ける
記事の読みやすさなど、読者やあなた自身の利便性も高まる様々なメリットがあります。
検索エンジンが記事を読み取りやすくなったり、SEO対策の効果も期待できるのでぜひ活用しましょう。
Table of Contents Plusの設定方法【自動生成】
Table of Contents Plusをインストールする前に以下ご確認ください。
テーマによっては目次機能が標準で搭載されています（Cocoon・JIN・THE THORなど）。これらのテーマをご利用の場合はTable of Contents Plusは不要です。まずはあなたのテーマを確認してみてください。
では、設定を始めましょう！
Table of Contents Plusプラグインのインストール・有効化
次のとおりに設定しましょう。
- WordPress管理画面 左メニュー →「プラグイン」→「新規追加」→「Table of Contents Plus」を検索
- 「今すぐインストール」をクリック
- 「有効化」をクリック
これでインストールは完了です！
Table of Contents Plusの基本設定
Table of Contents Plusでの目次の作り方を見ていきましょう。
- WordPress管理画面 左メニュー → 「設定」→「TOC+」→ 「基本設定」タブで行います
続いて、各項目の設定を設定していきます。
位置
目次を表示する位置を選びます。
基本は最初の見出し前（デフォルト）のままでOKです。
表示条件
目次を自動生成するかどうかの判断として、見出しの数を決めます。
デフォルトは4ですが、おすすめは「2つ以上」です。
以下のコンテンツタイプを自動挿入
目次を表示するコンテンツのタイプを選びます。
デフォルトは次の2つにチェックが入っています。
- post：投稿ページに挿入したい → チェックを入れる
- page：固定ページに挿入したい → 必要に応じて
固定ページは目次が不要な場合も多いので、必要に応じてチェックを外してください。
見出しテキスト
目次内に表示されるテキストなどについて設定します。
- 目次の上にタイトルを表示したい場合：目次の上にタイトルを表示をチェック
- 目次に表示されるタイトル名を変更 ：必要に応じて入力
- 目次内に、目次の表示・非表示（目次の開閉）の切り替えを設置 ：ユーザーによる目次の表示・非表示を切り替えを許可 にチェック
- デフォルトは目次を非表示にしたい（目次を閉じたまま）：最初は目次を非表示 にチェック
階層表示
目次内で、見出しの階層を見せるかどうかを設定します。
階層表示にすると、H2、H3など行頭がずれて表示されるため、見出しの構成が分かりやすくなります。
階層表示が不要な場合（行頭を合わせて表示したい）は、この階層表示のチェックを外しましょう。
番号振り
目次内で各見出しの連番を外すかどうかを設定します。
番号振りのチェックを外すと、目次内の連番は外れます。
スムーズ・スクロール効果を有効化
目次をクリックした場合の移動の方法を設定します。
- デフォルト：ぱっと読みたい箇所に移動
- ページをスクロールで移動したい場合：チェックを入れる
外観
基本的にデフォルトでいいかと思います。
プレゼンテーションは、目次の背景色・デザインのことです。
サイトやブログに合わせて選択してみてください。
上級者向け設定
上級者向け（show）をクリックすると、細かな設定ができます。
上級者向けの設定は基本的にデフォルトでよいですが、「見出しレベル」は変更してもよいでしょう。
見出しレベル
見出しレベルでは、目次内にh1からh6まで表示するかを設定できます。
例えば、目次ではh4以降は非表示にしたい場合、h4,h5,h6のチェックを外しましょう。
最後に設定が完了したら、必ず「設定を更新」ボタンをクリックしましょう。
Table of Contents Plusでショートコードで挿入する【手動】
基本設定では、目次の位置は4つから選べます。
- 最初の見出しの前（デフォルト）
- 最初の見出しの後
- 上
- 下
ショートコードを利用すれば、これらとは別の任意の位置に目次を表示できます。
記事の編集画面で、目次を表示させたい位置に [toc] を挿入すればOKです。
Table of Contents Plusのカスタマイズ
主なカスタマイズ方法をご紹介します。必要に応じて利用してみてください。
目次の位置を中央に配置する
デフォルトの左寄りから中央寄りに配置するには、ご自身でCSSを編集します。
- WordPress管理画面 左メニュー →「外観」→「カスタマイズ」→「追加CSS」 を開く
- 下記のコードをコピペで設置する
#toc_container {
margin: auto;
}
目次をサイドバーに表示する
Table of Contents Plusで作成した目次をサイドバーに設置することもできます。
特に長い記事などサイドバーに目次があると便利です。
次のように設定しましょう。
- WordPress 管理画面 左メニュー →「外観」→「ウィジェット」を開く
- 利用できるウィジェット内「TOC+」をウィジェットエリアにドラッグ&ドロップする
ウィジェットエリアの設置場所はサイドバースクロール追従がおすすめです。
ページを下にスクロールしても目次が追いかけてくるので便利ですよ。
Table of Contents Plusで目次が表示されない・設定できないときは
Table of Contents Plusを設定したのにうまく目次が表示されない場合、次の項目を確認してみてください。
記事の中の見出し数は足りているか
記事の中に、基本設定内「表示条件」で設定した見出しの数が設定されていますか？
数に満たない場合は、目次は表示の対象外になっています。
コンテンツタイプを正しく選んでいるか
基本設定内の「以下のコンテンツタイプを自動挿入」項目で
- post（投稿ページ）
- page（固定ページ）
がチェックされていますか？
チェックが入っていなければ、目次表示の対象外となっています。
記事内の見出しが階層的に設定されている？
記事内で、h2 h3 h4などが乱雑に設定されていると、目次がうまく生成されません。
見出しはh2→h3→h4と順序どおりに正しく設定していきましょう。
手動でショートコードを入力していませんか？
設定は手動が優位です。
つまりショートコードを利用して任意の位置に目次を表示している場合は、この表示設定が優先されます。
基本設定内の「位置」で設定した場所に目次は自動表示されません。
Table of Contents Plusの使い方のまとめ
今回はTable of Contents Plusの使い方や設定方法、カスタマイズ方法を紹介しました。
- Table of Contents Plusは目次を自動生成できるプラグイン
- 表示・非表示、見出し位置、表示条件、デザインなど選択できる
- 任意で目次の表示位置も設定できる
記事の見やすさやユーザビリティ向上につながるので目次の自動生成プラグインはぜひ利用しましょう。
