目次の自動作成プラグイン『Table of Contents Plus』

 

オタマジャクシ
  • 目次をどうやって作っているの?
  • 「Table of Contents Plus」の設定の方法が知りたい

 

こんな疑問や悩みを解決していきます。

 

ブログでは、目次があることでユーザーにとっての利便性が上がります。

便利なのはわかっていても、目次の作り方がわからないという方もいるのではないでしょうか?

 

そこで今回は『Table of Contents Plus』を使用した目次の作り方を説明していきます。

本記事を参考にすることで、簡単に目次を付けられ、あなたのブログの見やすさが上がるでしょう。

 

スポンサーリンク

目次を設定する意味

 

ブログで役に立つ情報、ユーザーの悩みを解決を記事にしていれば目次を付けた方がいいでしょう。

というのも、ユーザーが記事に何が書いてあるかざっと確認できたり、必要な場所だけを読める手助けになるからです。

つまりユーザビリティの向上につながってきます。

 

逆に、日記などでは必要がないのかもしれません。

 

『Table of Contents Plus』での目次のつけ方

 

『Table of Contents Plus』の説明を以下の流れで進めていきます。

頭を使わないで進められるので簡単に設定が終わります。

  1. インストールと有効化
  2. 基本設定
  3. 上級者向けの設定

それでは説明をしていきます。

インストールと有効化

 

まずは、プラグイン『Table of Contents Plus』をインストールします。

WordPressの編集画面から

『プラグイン』→『新規追加』をクリック

インストール

 

プラグインを追加の画面になるので、『Table of Contents Plus』と検索します。

 

検索後『今すぐインストール』をクリックしてインストールを行います。

 

table-of-contents-plusのインストール方法

 

インストールの終了後、プラグインを追加の『有効化』をクリックして、完了です。

 

 

基本設定

 

それでは目次を表示させる設定をしていきます。

 

インストールが問題なく完了していれば、設定の中に『Table of Contents Plus』が追加されています。

WordPressのメニューから『設定』→『TOC+』をクリック

 

table-of-contents-plusの設定方法

 

設定画面になるので順に説明をしてきます。

画像と同じようにチェックをいれることで、目次が表示されるようになります。

 

table-of-contents-plusの設定方法

table-of-contents-plusの設定方法

 

➀位置

目次を設定する位置を決めます。

 

②表示条件

記事の中で見出しが、ここに設定した数を超えない場合は見出しが表示されないよう制御する機能です。

 

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

目次を自動で挿入するコンテンツを制御する機能です。

「post:投稿記事」「page:固定ページ」のことをさします。

 

④見出しテキスト

目次に表示される名前を変更できます。例にもあるように自分の気に入ったものにしましょう。

 

➄表示切替許可

ユーザーが目次を閉じたり、開いたりの設定ができます。

『最初はもくじの非表示』を選択する、目次が閉じた状態で表示されます。

 

階層表示

見出し(h2とh3…)によって段差をつけて表示します。

 

番号振り

見出しごとに番号をふって目次に表示させます

 

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

目次をクリックしたときに、瞬間移動のようにするか、スクロールで移動するかを決定できます。

 

⑨プレゼンテーション

目次のデザインを簡単に決めることができます。カスタムで気に入った色を使うのもいいでしょう。

 

ポイント

よくわからないという方は画像のようにしましょう。

使っていて、こだわりが出てきたら、きっと自然とカスタマイズしていますよね

 

上級者向けの設定

 

上級者向けの設定が隠されています。

上級者向けとあるくらいで、基本は変更する必要がありません。

 

変更した方がいいところをあげるなら『見出しレベル』を変えるくらいです。

どこまでの見出しを目次に表示させるのかを制御することが可能になります。

 

table-of-contents-plusの上級者向け設定

これで設定は以上です!

 

カエル
お疲れ様でした~

 

目次を手動で設定したい時

 

自動的に目次が表示されるように設定をしてきましたが、自分の思ったところに目次を表示させることができます

 

方法は以下の通りです。

投稿画面で下記のショートコードを入力するだけで、目次を好きな場所に表示することが可能です。


 

このショートコードを使用すると先ほど指定した「位置」の場所には目次は表示されなくなります。

 

使用例

目次をつけることにデメリットがあるとすればそれはすべてのページに目次が付いてしまうことです。

ブログをやっていると、このページには目次がいらないということもあります。そういった時には『③以下のコンテンツタイプを自動挿入』のチェックをすべて外し、すべてのページに先ほどのショートコードを貼り付けることで目次があるページとないページを分けることができます。

 

しかし、この方法にもデメリットがあり自動で目次が表示されなくなるので手作業での目次設定が都度必要になります。

カエル
自分の好みの問題かな~

 

 

補足

 

table-of-contents-plus-Diver独自デザイン

 

↑このようにDiverでは『Table of Contents Plus』の独自デザインが実装されています。

わざわざ難しいコードを書かなくても、目次をおしゃれにしてくれる機能がもともと入っています。

 

WordPressテーマDiverが気になる方はこちらをどうぞ

>>『Diver (ダイバー)』誰もを魅了する有料テーマ!《レビュー》

 

まとめ

 

目次を設定することでユーザが、あなたのサイトの全体像を把握でき記事の内容が理解しやすくなる効果がきたいできます。

『Table of Contents Plus』を使った目次設定は比較的簡単に終わるので設定をすることがオススメです。

 

今回の記事は以上になります。ご覧いただきありがとうございました。

 

スポンサーリンク

Twitterでフォローしよう

おすすめの記事