トレンドブログ

記事に目次を自動で表示するプラグイン「Table of Contents Plus」の導入と設定方法

どうも、征矢です。

 

この記事では、記事に目次を自動で表示するプラグイン「Table of Contents Plus」の導入と設定方法について解説していきます。

 

何かの参考書やビジネス書なんかを読むと、必ず「目次」のページがありますよね。

目次をさらっとだけ見る人、まじまじと見て気になる見出しだけチェックする人、完全にスルーする人、それぞれだと思いますが。

 

例えばそれが分厚い書籍だったとして、仮に目次が無かったらどうでしょうか。

どこに何が書かれているか、読み進めていかないと全くわからないわけです。

 

 

ではそれを、ブログの記事に当てはめてみましょう。

 

ずらずらと文章が書いてあるけど、結論はいつ出てくるのか、解決策はどこなのか、頭から読んでいかないと読者もどこに何が書いてあるかわかりません。

これではユーザビリティがかなり悪いんですね。

 

もちろん、目次があるからPV数が増えるとか、SEOが強化されるといった効果があるわけではないですが、「読者への親切さ」という意味では、記事の目次は付けておいたほうがいいでしょう。

 

 

で、そんな目次をわざわざ手動で作らなくても、「Table of Contents Plus」というプラグインで自動的に作成できてしまいますのでかなりオススメです。

 

 

「Table of Contents Plus」の導入と設定方法

 

Table of Contents Plusのインストール

 

まずはワードプレスの管理画面を開いてください。

 

 

左メニューの「プラグイン」から「新規追加」をクリックしてください。

 

 

画面右上の欄に「Table of Contents Plus」と入力し、下に表示されたTable of Contents Plusの「今すぐインストール」をクリックしてください。

 

 

インストールが完了したら、「有効化」をクリックしてください。

 

 

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

 

 

Table of Contents Plusの設定方法

 

インストールと有効化が完了したら、左メニューの「設定」「TOC+」というメニューが追加されていますので、クリックしてください。

 

 

設定画面が開きます。

 

位置:

目次を表示する位置です。

特にこだわりが無ければ、初期値のままでOKです。

 

表示条件:

目次を表示する条件(記事中の見出しの数)です。

何個でもかまいませんが、僕は最小の2で設定しています。

この場合、記事中に見出しが1つしかなければ目次は表示されないことになります。

 

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

「post」と「page」にチェックをつけてください。

 

見出しテキスト:

「目次の上にタイトルを表示」の欄には、わかりやすいように「目次」と入力しています。

「ユーザーによる目次の表示・非表示を切り替えを許可」では、「表示」「非表示」と入力しています。

 

これらは、下の図のように反映されます。

 

階層表示:

チェックを入れると、このように見出しの大きい順に階層表示されます。

 

番号振り:

チェックを入れると、見出し順に番号が振られます。

 

アンカーリンクにジャンプではなくスクロールする:

目次の見出しをクリックしたときに、その見出し位置にすぐにジャンプするか、スクロールして移動するかの違いです。

お好みでどうぞ。

 

外観:

特にこだわりがなければ初期値のままでOKです。

 

プレゼンテーション:

目次のカラーを選択できます。

なるべく読みやすい色を選択しましょう。

 

上級者向け:

特にこだわりがなければ初期値のままでOKです。

 

 

入力が完了したら一番下の「設定を更新」をクリックしてください。

これで設定は完了です。

 

 

記事に見出しを入れて目次を表示してみる

 

では実際に試してみましょう。

 

ここでは、このような記事を作ってみました。

 

「見出しテスト1」「見出しテスト2」「見出しテスト3」という文字には、「見出し3」の設定をつけ、

「見出しテスト1−1、1−2」「見出しテスト2−1、2−2」「見出しテスト3−1、3−2」という文字には、「見出し4」の設定をつけました。

 

この記事をプレビューすると、目次はこのように表示されます。

 

 

見出しを付けるときの注意点として、必ず見出し設定は「数字の大きい順に使用する」ようにしてください。

「見出し2」の下には「見出し3」以下の見出しを、「見出し3」の下には「見出し4」以下の見出しを使うようにしましょう。

 

 

以上、「Table of Contents Plus」の導入と設定方法でした。