【WPプラグイン】目次を追加する「Table of Contents Plus」の使い方と設定方法を解説!

どうも、ひろもんです。

今や目次がない記事の方が少なく、記事に目次を設置するのが当たり前になっています。

目次があれば読者はお目当ての内容が、記事のどの辺りに書かれているのかわかりやすいので、読者の利便性を考えると設置した方が親切です。

ただWordPressには目次機能がありません。

そこで今回は私がいつも使っている目次を追加するプラグインの「Table of Contents Plus」の使い方と設定方法について紹介します。

「Table of Contents Plus」のインストール

「Table of Contents Plus」は無料のプラグインなので、WordPressの管理画面からカンタンにインストールできます。

WordPressのプラグインインストール方法
[プラグイン]をクリックします。

 

WordPressのプラグインインストール方法2
[新規追加]をクリックします。

 

「Table of Contents Plus」インストール方法
右上の検索ボックスに「Table of Contents Plus」と入力すると、該当するプラグインが表示されるので、Table of Contents Plusの右上にある[今すぐインストール]をクリックし、さらに[有効化]をクリックします。

これでインストールは完了です。

「Table of Contents Plus」の設定

インストールが終わったら次は設定を変更します。

「Table of Contents Plus」の設定方法1
WordPress管理画面の[設定]にカーソルを合わせるとサブメニューが表示されるので、[TOC+]をクリックします。

ワンポイントアドバイス

「TOC+」は「Table of Contents Plus」の略です。

 

「Table of Contents Plus」の設定方法2
プラグインの設定画面に移るので、ここで各種設定を行います。

位置:デフォルトのままでOK
表示条件:任意の数に変更(私の場合は「2」)
コンテンツタイプを自動挿入:任意でチェック(私の場合は「post」だけチェック)

ワンポイントアドバイス

私は表示条件を「2」にしていますが、見出しが2個なら目次はいらない人もいると思うので、好きな数に変更してください。

また固定ページに目次を表示させる人は少ないので、特別な理由がない限り「post」にだけチェックを入れておけばいいと思います。

 

「Table of Contents Plus」の設定方法3
「Contents」を「目次」に変更
「show」を「表示」に変更
「hide」を「非表示」に変更

「Table of Contents Plus」の設定方法4
上記のように設定を変更すると、記事に表示される目次はこのように変化します。

ワンポイントアドバイス

私は目次を日本語表示にしたいのでこのように設定していますが、英語表記がいい方はデフォルトのままでOKです。

 

「Table of Contents Plus」の設定方法5
階層表示:デフォルトのままでOK(チェック済み)
番号振り:デフォルトのままでOK(チェック済み)
スムーズ・スクロール効果を有効化:任意でチェック(私の場合はチェックする)

「Table of Contents Plus」の設定方法6
階層表示と番号振りにチェックを入れた場合と外した場合の表示の違いはこちらです。

基本的には両方にチェックを入れておくか、番号振りだけチェックを外すかのどちらかが見やすいです。

ワンポイントアドバイス

このサイトも「スムーズ・スクロール効果を有効化」にチェックを入れているので、目次をクリックするとスクロールします。チェックを入れるかどうかはお好みで判断してください。

 

「Table of Contents Plus」の設定方法7
横幅:デフォルトのままでOK(任意で変更)
回り込み:デフォルトのままでOK
文字サイズ:デフォルトのままでOK

「Table of Contents Plus」の設定方法8

ワンポイントアドバイス

横幅に関しては私の場合「100%」に変更して使っていますが、デフォルトのまま使用している人もいますし、お好きなように設定してください。

 

「Table of Contents Plus」の設定方法9
プレゼンテーションは目次のデザインの設定です。

プレゼンテーション:任意のデザインにチェック

ワンポイントアドバイス

「カスタム」にチェックを入れると、背景やリンクの色などカラーコードから選んで自由に変更できます。

 

「Table of Contents Plus」の設定方法10
以上で通常の設定は完了ですが、上級者向けの設定でやっておきたいことがあるので、上位者向けの[hide]をクリックして、上位者向けの設定画面を表示させます。

 

「Table of Contents Plus」の設定方法11
上級者向けの設定は「見出しレベル」の設定以外はそのままでOKです。

見出しレベルの設定では”どの見出しレベルまでを目次に表示させるのか”の設定を行います。

デフォルトでは「h1」から「h6」までの見出しすべてが目次に表示される設定になっていますが、「h2」もしくは「h3」までにチェックを入れて、それ以外はチェックを外した方が目次がスッキリします。

ワンポイントアドバイス

そもそも「h4」以降の見出しタグを使うことがほぼないですし、使ったとしても目次に表示されると逆に見づらいので、私の場合は「h3」までチェックを入れています。

「Table of Contents Plus」の設定は以上になります。
設定は何度も変更できるので、あなたにシックリ来るように調整してみてください。

当サイトと同じデザインにする方法

当サイトでも「Table of Contents Plus」を使っていますが、目次のデザインがオリジナルのものと違います。

当サイトのデザインは「DIVER」というWordPressテーマ特有のデザインなので、「Table of Contents Plus」の設定を変更するだけでは、当サイトと同じデザインにはできません。

「DIVER」の設定画面
この画像は「DIVER」の設定画面ですが、この設定にチェックを入れると当サイトと同じデザインにでき、目次のカラーも自由に変更できます。

最後に

「Table of Contents Plus」について解説してきましたが、いかがでしたか?

目次がなければ読者は目的のことが記事のどの辺りに書かれているのかわからないので、利便性に欠けますし不親切です。

記事は読者が見やすいように、わかりやすいように書くことが大事なので、目次を設置して読者の利便性を高めてあげましょう。

ひろもん
目次を設置しない理由がないので、ぜひ設置してみてください。

 

ぜひ応援クリックお願い致します

ブログランキング

気軽にTwitterしてくださいね!