自動で目次を表示させるワードプレスプラグイン「Table of Contents Plus」の導入から使い方と設定までを解説! | taisei's lifestyle produce
理想とするライフスタイルを実現しよう!

自動で目次を表示させるワードプレスプラグイン「Table of Contents Plus」の導入から使い方と設定までを解説!

どうもtaiseiです。

今回は「自動で目次を表示させてくれるワードプレスプラグイン『Table of Contents Plus』の詳細」について説明していこうと思います。

 

このワードプレスプラグインは、記事中に自動で目次を表示させることができるプラグインとなっております。

当サイトでも使用しているプラグインなのですが、一番始めの見出しの上に「目次」と表示されている枠があるかと思います。このサイトでは、それぞれの見出しのタイトルを表示させるように設定しています。

 

このように、記事中に目次を表示させることで、サイトに訪問してくれたユーザーに対して、記事の中身を把握させることができます。そしてユーザーは、記事の中身を把握した上で文章を読むことができますので、ユーザービリティが向上し、滞在時間を長くすることができます

 

そのため今回、「Table of Contents Plus」というプラグインの導入から使い方、そして設定の仕方までを動画でまとめましたので、まずはこちらの動画をご覧頂き、実際に作業してみてください。

 

自動で目次を表示させるプラグイン「Table of Contents Plus」の使い方 動画

 

 

 

「Table of Contents Plus」の設定方法について

 

「Table of Contents Plus」プラグインのインストールが完了して、有効化させることができましたら、「Table of Contents Plus」の設定をクリックしてください。

すると以下のような画面に移っていくかと思います。↓↓

 

ここでは、目次を表示する際に、様々な設定を行うことができます。まずは上から順に、どのような設定ができるのかをみていきましょう。

 

まず、「①位置」という項目ですが、これは目次を表示する位置を設定することができる項目です。そして、以下の4つの項目を選択することができます。

最初の見出しの前(デフォルト)」・・・一番最初の見出しの真上に目次を表示させることができる

最初の見出しの後」・・・一番最初の見出しの真下に目次を表示させることができる

」・・・記事の一番上(タイトル直下)に目次を表示させることができる

」・・・記事の一番下に目次を表示させることができる

 

基本的には、どの項目を選んで頂いても構いませんが、ユーザビリティを高めることを重視するのであれば、「最初の見出しの前(デフォルト)」を選択した方がいいかと思います。

 

②表示条件」という項目ですが、これはいくつ以上見出しがある時に目次を表示させるのか?を設定することができる項目です。

デフォルトでは「4」となっておりますが、必ず目次を表示させたいというのであれば、一番数が小さい「2」を選択して、2つ以上見出しがある時に、目次を表示させるような設定にしておくことをお勧めします。

 

③以下のコンテンツタイプを自動挿入」という項目ですが、これは目次を表示させたい記事の種類を設定することができる項目です。

動画では「post」にチェックを入れていますが、これは一般的に投稿する記事に目次を表示させるような設定になります。ですので、他の項目にはチェックを入れる必要はないかと思います。

 

④見出しテキスト」という項目ですが、これは目次のタイトルを表示させるかさせないかを設定することができる項目です。

チェックを入れますと、目次のタイトルを任意で入力することができ、僕の場合はわかりやすく「目次」と入力して、タイトルを表示させるように設定しています。

 

⑥ユーザーによる目次の表示・非表示の切り替えを許可」という項目ですが、これはユーザー自身が、目次を表示するか?非表示にするか?、を選択できるように設定する項目になります。

チェックを入れますと、ユーザー自身で表示・非表示の切り替えを行うことができるようになります。また、チェックを入れた際には、表示されている時のテキスト名、非表示されている時のテキスト名をそれぞれ任意で入力して設定することができます。

 

ちなみにですが、「最初は目次を非表示」というチェック項目がありますが、こちらにはチェックを入れないことをお勧めします。最初から非表示にしてしまうと、ユーザービリティが下がってしまうからですね。

 

⑨階層表示」という項目ですが、これは見出しの大きさで階層的に目次を表示させるかの設定ができる項目です。

見出しの大きさというのは、「見出し1(h1)」、「見出し2(h2)」、「見出し3(h3)」といったことですね。目次を階層的に表示させることで、ユーザーに対して記事の構成を把握させやすくできますので、チェックを入れることをお勧めします。

 

⑩番号振り」という項目ですが、これは記事中にある見出しの順番に番号を振る設定ができる項目です。

こちらにチェックを入れますと、例えば「見出し2」の後に「見出し3」が続いた場合、

1.「見出し2」

1−1「見出し3」

1−2「見出し3」

・・・・・・

と表示されるようになり、記事構成がわかりやすくなりますので、チェックを入れることをお勧めします。

 

そして、さらにスクロールしていくと、以下のような設定項目が表示されるかと思います。↓↓

 

11.スムーズ・スクロール効果を有効化」という項目ですが、これは目次に表示してある見出しをクリックした時に、ジャンプして移動するか?スクロールで移動するか?、を設定することができる項目です。

チェックを入れますと、スクロールで表示したい見出しに移動することができるようになります。個人的にはスクロールで移動した方が印象がいいように見えます。

 

次に外観の設定をみていきましょう。

 

12.横幅」という項目がありますが、これは表示させる目次の横幅を設定することができる項目です。

横幅を変更させる際には、px単位で固定幅を設定させることもできますし、記事の横幅と比較して相対的に横幅を設定させることもできます。こちらは任意で設定して頂ければと思います。

 

13.回り込み」という項目ですが、これは表示させる目次の位置を設定することができる項目です。

変更させる際には、右か左のどちらかを選択して設定していきます。こちらも任意で設定して頂ければと思います。

 

14.文字サイズ」という項目ですが、これは文字通り、文字の大きさを調整して設定することができる項目です。

文字サイズを変更する際には、数字を入力するところと、単位を選択するところがあります。単位は「%」、「pt」、「em」の3つがあり、それぞれ選択して、調整することができます。

 

15.プレゼンテーション」という項目ですが、これは表示する目次のデザインを変更して設定することができる項目です。

変更する際には、既存のデザインを選択するか、オリジナルでカスタマイズしてデザインを設定することができます。

 

ちなみに、一番下の方に上級者向けという項目がありますが、「表示」をクリックしますと、設定項目に移ることができます。ここで設定できることは、かなり細かい部分になりますので、特に設定が必要というわけではありません。気になる方は設定してみてください。

 

「Table of Contents Plus」の設定方法 まとめ

 

ワードプレスプラグイン「Table of Contents Plus」は、目次を自動的に記事中に表示させてくれるプラグインですので、とても便利でありますし、ユーザビリティが向上して、サイトの質も向上していきます。

 

設定の仕方については、そこまで難しくはないかと思いますので、是非導入してみてください。

 

また、当サイトでは無料で配布しているアフィリエイト教材がダウンロードできますので、是非手にとってみてください