Table of Contents Plus（TOC+）のおすすめな設定方法＆使い方を画像たっぷりで徹底解説【WordPressの目次作成プラグイン】

専業ブロガー７年目のあかね猫です

WordPressにおける代表的なプラグインの１つ…

の導入手順からおすすめな設定方法＆使い方まで、実際の画像たっぷりでとにかくわかりやすく徹底解説していきます

Table of Contents Plusは、WordPressで投稿した記事ごとの「目次」を自動生成するためのプラグインです

もちろん無料のプラグインだよ！

具体的には、ページごとの「見出し」をもとに…

↑ こういった目次ボックスが、記事ごとで自動挿入されます

なお、上の画像は目次ボックスを「開いた状態」のイメージですが…

↑ このように、「コンパクトに折りたたむ」ことも可能です

ということで、今回は２つのステップで丁寧に解説していきます🐥

さっそく見ていこー！

Table of Contents Plus（TOC+）のおすすめな設定方法＆使い方を画像たっぷりで徹底解説【WordPressの目次作成プラグイン】

ステップ１：WordPressプラグイン「Table of Contents Plus」の導入手順【インストールと有効化】

はじめに…

について

WordPress管理画面の左側一覧から…

↑【プラグイン】という項目にカーソルを合わせ、その右側に表示される【新規追加】をクリックしましょう

つづいて、画面の右上にある…

↑ こちらの検索フォームに　Table of Contents Plus　と入力し、その下の検索結果から…

↑ このアイコンが目印のプラグイン「Table of Contents Plus」を探して、右上の「今すぐインストール」ボタンをクリックします

上の画像例はすでに「有効化」済みの状態だから、「今すぐインストール」ボタンは表示されてないよ！

【今すぐインストール】ボタンが【有効化】という表示に切り替わったら、つづいて…

というボタンもクリックしましょう

↑ このように「プラグインを有効化しました」というメッセージが表示されたら、プラグインの「インストール＆有効化」はもう完了です

お次は肝心の使い方について見ていこう！

ステップ２：WordPressプラグイン「Table of Contents Plus」のおすすめな設定方法＆使い方【目次の作成手順とカスタマイズ方法】

つづいて２つ目のステップは、プラグイン「Table of Contents Plus（TOC+）」の…

について

まず設定内容に絶対的な正解はもちろんないですが、ここでは「当ブログでも実際に使用している設定例」をもとにご紹介していきますね

WordPress管理画面の左側一覧から…

↑　設定　＞　TOC+　をクリックしましょう

「Table of Contents Plus」の設定画面が開いたら、まず一番上に並んでいるタブについては…

↑「基本設定」というタブだけ設定しておけば、基本的にはOKです（順に見ていきますね）

「基本設定」タブ：前編

「基本設定」タブの前半部分における「おすすめな設定例」は、次の通り ↓

各項目の解説については、下記をどうぞ！

位置

目次を自動生成する「位置」を指定します

こちらはこだわりがなければ、「最初の見出しの前」のままでOKです

表示条件

指定した「見出し」の数に達していない記事の場合、目次は自動生成されなくなります

基本的には「2～3」が無難で、当ブログは「2」に設定しています

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

目次を自動生成する対象ページを指定します（「post」は投稿、「page」は固定ページ）

通常は…

の２つのみ、「チェックあり」にしておけばOKです

見出しテキスト

目次の上部に表示される、「ボックスタイトル」などを指定します

こちらは「Contents」や「目次」などの名称が一般的で、参考までに当ブログの設定は「Contents」です

ちなみに！

「最初は目次を非表示」という項目にチェックを入れると、読者がページを訪れた際のデフォルト状態が…

になります（当ブログでは、「チェックあり」にしています）

つまり、目次を見たいユーザーには「自分で開いてもらう」形になるよ！

階層表示

「H1・H2・H3…」という見出しの ”階層” が、一目でわかる目次デザインになります

この「階層表示」は有効にしておいた方が、読者にとって記事構成を一目でパッと理解しやすいと思うので、おすすめは「チェックあり」です

番号振り

目次内の各見出しに、自動で「番号」が振られます

こちらは一見便利そうな機能ですが…

の２つがごちゃごちゃになり、かえって管理しづらくなる可能性があるため、「チェックなし」がおすすめです

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

目次内の各リンクがクリックされた際の、「挙動パターン」を指定します

こちらはお好みですが、こだわりがなければユーザー視点を考慮して、「チェックなし」の方がシンプルで快適な挙動だと思います

「基本設定」タブ：後編　※外観エリア

つづいてその下の、【外観】と表示されているエリアの「おすすめな設定例」です ↓

横幅

目次ボックスデザインの、横幅を指定します

通常は、「自動」のままでOKです

回り込み

目次内で、「幅一杯」になったテキストの表示形式を指定します

こちらも基本は、「なし」のままでOKです

文字サイズ

目次内の「フォントサイズ」を指定します

こちらは「ブログ全体のフォントサイズ」などとのバランスにもよりますが、参考までに当ブログの設定は「95（%）」です

プレゼンテーション

目次ボックスのデザインを選択・指定します

こちらはお好みですが、参考までに当ブログの設定は下記の通りです

ということで！

ここまでご紹介した設定例で、実際のページ上では…

↑ このようなデザインになりました🐥

基本的な設定はこれでOKだけど、あと覚えておきたい項目を１点だけ紹介するよ！

「基本設定」タブ：おまけ編　※上級者向けエリア

同じ設定画面の下部にある、【上級者向け】という場所を開いたなかの…

↑「見出しレベル」という項目を見てみましょう

この「見出しレベル」で、目次に表示される見出しの階層を「どの段階まで表示させるか？」指定することができます

参考までに、当ブログでは上画像のように…

の３つを選択しています

ちなみに「heading 1」っていうのは、記事タイトルのこと！

ということで…

一通り設定できたら、画面の左下にある「設定を更新」ボタンを忘れずにクリックして、今回の設定は完了です🐥