WordPressで目次をつけるTable of Contents Plusの設定方法

Table of Contents PlusというWordPressプラグインは、記事に自動的に目次を表示させることができるプラグインです。

目次を表示させることにより、その記事にどのようなことが書かれているのか分かるように、記事がとても見やすくなります。

 

これにより、滞在時間が増えたり、直帰率も少なくすることが可能になります。さらに、目次も内部リンクなので、記事内の内部リンクが強化されSEO的にも良い影響がでるのです。

Table of Contents Plus を使えば、このようなメリットがある目次を毎回自動で作ってくれるので、とても便利ですね。それでは、Table of Contents Plus の設定方法について解説していきたいと思います。

設定方法

まずは、以下の記事にしたがって Table of Contents Plus をインストール、有効化していきましょう。
WordPressプラグインを簡単にインストールする方法

 

有効化することができたら、WordPress管理画面サイドメニューの「設定」から「TOC+」をクリックします。

Table of Contents Plus1

 

すると、Table of Contents Plus の設定画面に移ります。ここで、どのような目次を作るか設定していきます。

Table of Contents Plus2

設定項目がたくさんありますが、ひとつずつ説明していきたいと思います。

 

Table of Contents Plus3

Position:

目次を記事中のどこに表示させるか設定することができます。

  • Before first heading(default):一番最初の見出しの前
  • After first heading:一番最初の見出しの後ろ
  • Top:記事の一番上
  • Bottom:記事の一番下

この4種類から選ぶことができますが、「Before first heading(default)」を選択しておきましょう。

一番最初の見出しに目次が表示されているのが、最も見栄えがよくなります。

 

Show when:

記事中に、見出しがいくつ以上あるときに目次を表示させるか設定することができます。

おそらく記事を書くときは最低2つは見出しをつけるはずです。なので、「2」に設定しておくことをおすすめします。

 

Auto insert for the following content types:

どの種類の記事に目次をつけるか設定することができます。

デフォルトでは、「page」だけにチェックされていますが、「post」だけチェックしておくように変更しましょう。

post とは、通常の投稿記事のことです。一方、page とは固定ページのことです。サイトマップやお問い合わせフォームに目次は必要ないので外しておきます。

 

Table of Contents Plus4

Heading text:

「Show title on top of the table of contents」にチェックを入れておきましょう。目次の部分にタイトルを入れることができます。

読者が「目次」だと認識しやすいように、「目次」や「この記事の目次」などを入力しておくようにしましょう。

 

「Allow the user to toggle the visibility of the table of contents」にチェックを入れておきます。これにより、読者が目次を開いたり、閉じたりすることができるようになります。

「Show text」には、目次を開きたいときにクリックする文字を設定することができます。分かりやすいように「開く」と入力しておけば大丈夫でしょう。

「Hide text」では、目次を閉じたいときにクリックする文字を設定することができます。「閉じる」など分かりやすい文字を入力しておきましょう。

 

その下の「Hide the table of contents initially」のチェックは外しておきましょう。ここにチェックを入れてしまうと、最初は目次が閉じられた状態になってしまいます。目次は開いた状態にさせておきたいので、チェックを外しておきます。

 

Show hierarchy:

チェックを入れておきましょう。これにチェックを入れておくことで、目次の見出しを階層的に表示させることができます。

つまり、例えば「見出し3」の中に「見出し4」があることが分かりやすくなります。

 

Number list items:

チェックしておきましょう。チェックを入れることにより、目次に番号を自動でふることができます。

番号があった方が、目次としては見やすいので、チェックをしておきます。

 

Enable smooth scroll effect:

チェックを入れておきましょう。この項目にチェックを入れておくことにより、目次をクリックしたときに、なめらかにその見出しまで移動してくれます。

チェックを入れないと、クリックしたときにその見出しまで瞬時に飛んでします。違いがよく分からない場合は、この記事の目次をクリックしてみてください。なめらかに移動するはずです。

 

続いて、Appearance(見た目)の項目の設定をしていきましょう。

Table of Contents Plus6

Width:

目次の幅を設定することができます。「Auto(default)」のままでいいでしょう。

 

Wrapping:

目次を左寄せにするか、右寄せにするか選択することができます。これも「None(default)」のままにしておきましょう。

 

Font size:

目次の文字の大きさを設定することができます。デフォルトでは、本文の文字に対して95%の大きさの文字となっています。

とりあえず、デフォルトのままにしておき、大きさを変えたくなったら後で変更しましょう。ちなみに僕は95%のままにしています。

 

Presentation:

目次のデザインを設定することができます。ブログ全体のデザインに合わせて、お好きなものを選択しましょう。

ただし、「Black」は見栄えが悪いのでやめておいたほうがいいと思います。

 

Advanced:

続いて、Advancedの「show」をクリックしましょう。

Table of Contents Plus7

ここは、上級者向けの設定になるので、基本的にデフォルトのままで問題ありません。ただ、1箇所変更していただきたい部分があるので、解説したいと思います。

Table of Contents Plus8

この「Heading levels」という項目です。

ここでは、「h1~h6」のどの見出しを目次に表示させるか設定することができます。

 

基本的に、記事中の見出しは数字の小さいものから順に使っていきます。しかし、テーマにもよって違うのですが、賢威6.2の場合は h1とh2は記事タイトルになるように設定されています。

よって、本文中の見出しはh3から使っていくことになるので、上の画像のようにh3~h6にチェックを入れておきます。

 

ただし、この部分はテーマによっては、本文中でh2の見出しから使っていくものもあるので注意しなければなりません。

例えば、無料のテーマとしておすすめしている「STINGER」の場合は、h1が記事タイトルに設定されているので、h2から見出しを使っていきます。

 

ただ、僕も最初はSINGERを使っていて、途中から賢威に変えたのですが、使う見出しタグの番号が違うため、投稿した記事の見出しタグを全て変えなければならなくなりますよね。

なので、STINGERでも見出し3から使っていました。記事中にh2の見出しがないので、SEO的によくないのですが、後から全て変えるのが面倒なので、見出し3から使っていたんですね。

 

自分のテーマがどの見出しタグから使うべきか分からない方は、h2までチェックしたり、h3までチェックしたりして、目次に見出しが正しく表示されているか試してみましょう。

最後に、一番左下の「Update Options」をクリックしましょう。

Table of Contents Plus9

 

このように目次が表示されていることが分かりますね。Table of Contents Plus10

 

まとめ

Table of Contents Plusの設定方法について紹介しました。ユーザビリティを考慮すると、目次はぜひ設置しておきたいです。特にボリュームが多い記事の場合は、目次がないととても不便になってしまいます。

最初に設定しておけば、記事を投稿するたびに目次が自動的についてくれますので、ぜひ設定しておきましょう。

  • お名前(名字だけでOK!)
  • メールアドレス

コメントを残す

サブコンテンツ

このページの先頭へ