WORDPRESS

【2023年】Table of Contents Plus(TOC+)のおすすめ設定方法。目次プラグイン【ワードプレスブログ完全初心者ガイド/第4章/No.14】

Table of Contents Plus(TOC+)のおすすめ設定方法。目次プラグイン【ワードプレスブログ完全初心者ガイド/第4章/No.14】
 

専業ブロガー6年目のあずき猫です

 

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

Table of Contents Plus(TOC+)

について、導入手順から「おすすめな設定方法」までブログ初心者さん向けに1から解説していきます

 



 

Table of Contents Plus(TOC+)のおすすめ設定方法。目次プラグイン top-01

 

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

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

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

Table of Contents Plus(TOC+)のおすすめ設定方法。目次プラグイン top-02-a

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

 

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

Table of Contents Plus(TOC+)のおすすめ設定方法。目次プラグイン top-02-b

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

 

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

  1. 「Table of Contents Plus」の導入手順(インストールと有効化)
  2. 「Table of Contents Plus」のおすすめな設定方法
さっそく見ていこー!
 

【2023年】Table of Contents Plus(TOC+)のおすすめ設定方法。目次プラグイン【ワードプレスブログ完全初心者ガイド/第4章/No.14】

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

WordPress ヘッダー c-01

注意

プラグインの導入・設定に際しては、万が一のエラーに備えて各種データを事前にバックアップされたうえで、すべてご自身の責任にて行ってください(ご利用中のWordPress環境などによっては不具合が生じてしまう可能性があります)

【2023年】BackWPupのおすすめ設定方法。自動バックアッププラグイン【ワードプレスブログ完全初心者ガイド/第4章/No.2】

続きを見る

 

はじめに…

プラグイン「Table of Contents Plus」の導入手順

について

 

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

WordPressプラグインのインストール手順 1-01

↑「プラグイン」という項目にカーソルを合わせ、開いたメニュー内にある「新規追加」をクリックしましょう

 

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

WordPressプラグイン インストール 1-02

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

Table of Contents Plus(TOC+)の設定方法 1-1-01

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

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

「今すぐインストール」ボタンが「有効化」という表示に切り替わったら、つづいて「有効化」ボタンもクリックしましょう

 

WordPressプラグイン インストール 1-03

↑「プラグインを有効化しました。」と表示されたら、プラグインの「インストール&有効化」は完了です

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

ステップ2:WordPressプラグイン「Table of Contents Plus」のおすすめな設定方法

WordPress ヘッダー c-02

つづいて2つ目のステップは…

プラグイン「Table of Contents Plus」のおすすめな設定方法

について

 

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

 

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

Table of Contents Plus(TOC+)の設定方法 1-2-01

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

 

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

Table of Contents Plus(TOC+)の設定方法 1-2-02

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

 

「基本設定」タブ:前編

 

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

Table of Contents Plus(TOC+)の設定方法 1-2-03

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

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

 

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

 
表示条件
 

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

 

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

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

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

 

通常は…

  • post
  • page

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

 
 
見出しテキスト
 

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

 

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

 

ちなみに!

 

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

クローズ(閉じた)スタイル

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

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

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

 

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

 
 
番号振り
 

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

 

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

  • 「手動」で番号を入れている見出し(例:ステップ1 / ステップ2…)
  • 「自動」の番号振り

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

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

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

 

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

 

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

 

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

Table of Contents Plus(TOC+)の設定方法 1-2-04

 
横幅
 

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

 

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

 
回り込み
 

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

 

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

 
文字サイズ
 

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

 

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

 
プレゼンテーション
 

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

 

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

  • プレゼンテーション:カスタム
  • 背景:#f7f7f7
  • ボーダー:#ebebeb
  • タイトル:#515151
  • リンク:#0044cc
  • リンク(マウスオーバー):空欄のまま
  • リンク(閲覧済み):空欄のまま

ということで!

 

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

Table of Contents Plus(TOC+)の設定方法 1-2-05

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

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

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

 

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

Table of Contents Plus(TOC+)の設定方法 1-2-06

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

 

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

 

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

  • heading 2 - h2
  • heading 3 - h3
  • heading 4 - h4

の3つを選択しています

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

ということで…

 

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

 

人気記事

 

あずきのワードプレスブログ「完全初心者」ガイド!

「全8章」の総合TOPページです

あずきのワードプレスブログ「完全初心者」ガイド

 

あずき猫 - Azuki Cat

猫です / 独立6年目の専業ブロガー / アパレル歴10年 / Twitterでは、ブログに限らず「色々うまくいかへん…」「どないしよ…」というときのための、本質的な思考を発信しています。ミァー!!!

\ 当ブログで愛用してます /

ACTION AFFINGER6 バナー 01-300px

 

インフォトップ ワードプレステーマ売上

ACTION AFFINGER6

すごいもくじLITE

の限定特典キャンペーンも実施中!!!

 

公式:ACTION AFFINGER6

関連:WordPressテーマ選びのチェック項目5つ+超重要な「核心」1つ【失敗しない本当におすすめなテーマの選び方】

※2021年発表Infotop Affidemy

当サイトでは、このサイト経由で商品やサービスを購入・契約していただくことで当サイトに紹介料が入る【アフィリエイトリンク】を使用しております

これは私(あずき猫)にとってのサイト運営というものが「1つの事業」であり、必要経費はもちろんのこと、それ以上に「膨大な時間やエネルギー」を費やしているためですが、ただ惜しむらくは当該システムを使用していることによる読者様にとってのメリットは特段ないという点です

せめてもの思いとして、こうして得られた紹介料を糧に「読者様のお役に立てる記事作り」「価値のあるコンテンツ制作」に一層努めていく所存ですので、何卒ご理解のほどお願い申し上げます

当サイトでは可能な限り正確な情報を掲載するよう努めておりますが、必ずしもその正確性を保証するものではありません

読者様におかれましては、当サイトをあくまでも主観的な情報の1つとして捉えていただき、「客観的、俯瞰的な視点」をもって活用していただければ幸いです

少しでも参考になりましたら、
\ シェアしていただけると励みになります!! /

-WORDPRESS