専業ブロガー４年目のあずきです🐥
WordPressにおける代表的なプラグインの１つ…
Table of Contents Plus（TOC＋）
について、導入手順と設定方法をブログ初心者さん向けに１から解説していきます
Table of Contents Plusは、WordPressで投稿した記事ごとの「目次」を自動生成するためのプラグインです
具体的には、ページごとの「見出し」をもとに…
↑ こういった目次ボックスが、記事ごとで自動挿入されます
そんな「Table of Contents Plus」について、２つのステップで丁寧に解説していきます🐥
- 「Table of Contents Plus」の導入手順（インストールと有効化）
- 「Table of Contents Plus」のおすすめな設定方法
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
すごいもくじLITE
の限定特典キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【１番の本質】ACTION AFFINGER6って実際どう？良い点＆気になる点を専業ブロガーが本気レビュー【WordPressの愛用テーマ】
-
【１番の本質】ACTION AFFINGER6って実際どう？良い点＆気になる点を専業ブロガーが本気レビュー【WordPressの愛用テーマ】
続きを見る
Contents
【2021年】Table of Contents Plus（TOC＋）の設定方法を初心者向けに解説【WordPressプラグイン／記事ごとの目次を自動生成】
ステップ１：WordPressプラグイン「Table of Contents Plus」の導入手順【インストールと有効化】
はじめに
プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください（ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります）
-
【2021年】BackWPupのおすすめな設定方法を初心者向けに解説【WordPressプラグイン／ブログデータを自動でバックアップ】
続きを見る
はじめに…
プラグイン「Table of Contents Plus」の導入手順
について
WordPress管理画面の左側にある一覧メニューから…
↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう
つづいて、画面の右上にある…
↑ こちらの検索フォームに Table of Contents Plus と入力し、その下の検索結果から…
↑ このアイコンが目印のプラグイン「Table of Contents Plus」を探し、右上の「今すぐインストール」ボタンをクリックします
「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう
↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール＆有効化」は完了です
ステップ２：WordPressプラグイン「Table of Contents Plus」のおすすめな設定方法
つづいて２つ目のステップは…
プラグイン「Table of Contents Plus」の設定方法
について
まず設定内容に絶対的な正解はもちろんないですが、ここでは当ブログでも実際に使用している設定例をベースにご紹介していきますね
WordPress管理画面の左側一覧から…
↑ 設定 ＞ TOC＋ をクリックしましょう
「Table of Contents Plus」の設定画面が開いたら、まず一番上に並んでいるタブについては…
↑「基本設定」というタブだけ設定しておけば、基本的にはOKです
「基本設定」タブ：前編
「基本設定」タブの前半部分におけるおすすめな設定例は、次の通り ↓
位置
目次を自動生成する「位置」を指定します
表示条件
指定した「見出し」の数に達していない記事の場合、目次は自動生成されなくなります
以下のコンテンツタイプを自動挿入
目次を自動生成する対象ページを指定します（「post」は投稿、「page」は固定ページ）
関連
「投稿と固定ページってどう違うの…？」という場合は、こちらをどうぞ ↓
-
【2021年】WordPress「投稿・固定ページ」の違いとは？使い分けの実践的なポイントを初心者向けに解説【具体例あり／ブログの記事作り】
続きを見る
見出しテキスト
目次の上部に表示される「ボックスタイトル」などを指定します
ちなみに…
「最初は目次を非表示」という項目にチェックを入れると、読者がページを訪れたときのデフォルト状態が「畳まれたスタイル」になります
階層表示
「H1・H2・H3…」という見出しの ”階層” が、一目でわかる目次デザインになります
関連
「見出しの階層ってなに…？」という場合は、こちらから ↓
-
【2021年】WordPressの見出しとは？作り方と「H1・H2・H3…」の使い分けを初心者向けに解説【ブログ記事の「階層」を作る】
続きを見る
番号振り
目次内の各見出しに、「番号」が自動で振られます
スムーズ・スクロール効果を有効化
目次内の各リンクがクリックされた際の「挙動パターン」を指定します
「基本設定」タブ：後編 ※外観エリア
つづいてその下の、【外観】と表示されているエリアの設定例です ↓
横幅
目次のボックスデザインの横幅を指定します
回り込み
目次内で幅一杯になったテキストの表示形式を指定します
文字サイズ
目次内のフォントサイズを指定します
プレゼンテーション
目次ボックスのデザインを選択・指定します
ここまでの設定内容で、実際のページ上では…
↑ このようなデザインになりました🐥
「基本設定」タブ：おまけ編 ※上級者向けエリア
同じ設定画面の下部にある、【上級者向け】という場所を開いたなかの…
↑「見出しレベル」という項目を見てみましょう
この「見出しレベル」で、目次に表示される見出しの ”階層” をどの段階まで表示させるか指定することができます
参考までに、当ブログでは上画像のように…
- H2見出し
- H3見出し
- H4見出し
の３つを選択しています
ということで…
一通り設定できたら、画面の左下にある「設定を更新」ボタンを忘れずにクリックして今回の設定は完了です🐥
人気記事
今回の記事はこちらの章に属しています
次の章はこちらからどうぞ
全８章のTOPページです
＼ 当ブログで愛用しています ／
検証と改善を重ねた唯一無二のテーマ
✔ 洗練されたビジュアルと、ターゲットに合わせた「変幻自在」な柔軟性！
✔ 時間のかかる面倒なカスタマイズも「クリック１つ」でさくさく実現！
✔ 「稼ぐ」に特化した、本気で戦うための最適化＆アフィリエイト機能！
すごいもくじLITE
の限定特典キャンペーンも実施中！！！
公式：「稼ぐ」に特化したワードプレステーマ『ACTION AFFINGER6』
関連：【１番の本質】ACTION AFFINGER6って実際どう？良い点＆気になる点を専業ブロガーが本気レビュー【WordPressの愛用テーマ】
-
【１番の本質】ACTION AFFINGER6って実際どう？良い点＆気になる点を専業ブロガーが本気レビュー【WordPressの愛用テーマ】
続きを見る
About me
- 専業ブロガー・フリーランス -
あずき
独立4年目 / 元アパレル → 歴10年
20代は中華鍋のように目まぐるしい日々でした。 30代は創作懐石のように、静かに自分の形をつくっていきます。 普段はTwitter（@azuki_rinrin）にいるので覗いてもらえると嬉しいです^^