ブログの記事の最初に目次を表示することで、記事を呼んでいる人に記事の内容を伝えたり、探している情報を早く見つけることができるようになり、ユーザビリティの向上に繋がります。

この記事では、「Table of Contents Plus」を使ってWordPressの記事に目次を表示する方法をご紹介します。

Table of Contents Plusをインストールする

WordPressで記事の目次を表示するには、「Table of Contents Plus」というプラグインを使う方法がおすすめです。

管理画面の「プラグイン」→「新規追加」から、「Table of Contents Plus」をインストールして有効化してください。

Table of Contents Plusのカスタマイズ

プラグインを有効化するだけで目次が表示されるようになりますが、細かな設定でカスタマイズする方法をご紹介します。

目次に表示する見出しの設定を変更する

Table of Contents Plusは、記事の本文に使われているh2タグやh3タグなどの見出しを使って目次を生成してくれます。

デフォルトでは、h1~h6までのすべてが対象になっているため、細かく見出しを付けている場合は目次がとても長くなってしまいます。

設定を変更することで、h2タグだけを目次に表示するように変更することで、よりすっきりした目次を表示することができます。

サイドバーに目次を表示する

Table of Contents Plusは、サイドバーに目次を表示することもできます。

サイドバーに目次を表示するには、WordPressの管理画面から「外観」→「ウィジェット」を開いてください。

「TOC+」というウィジェットがあるので、サイドバーに追加しましょう。

これで、下記のようにサイドバーに目次を表示することができます。

また、目次をサイドバーに固定表示することで、記事をスクロールしてもサイドバーを常に表示しておくことができ、訪問者がより使いやすいサイトにすることができます。

サイドバーのウィジェットを固定表示する方法については、下記の記事を参考にしてください。

デザインを編集する

目次のデザインを編集したい場合は、CSSを使って自由にデザインを変えることができます。

自分でCSSを記述する場合は、設定画面の一番下にある「上級者向け」の項目を表示して、「CSSファイルを除外」という項目にチェックを入れましょう。これで、勝手に目次にCSSが適用されないようになります。

参考までに、CSSを使ったデザイン例をご紹介します。

上記のような表示にするためのCSSのサンプルコードは下記の通りです。

その他のおすすめ設定

最後に、Table of Contents Plusのおすすめ設定をいくつかご紹介しておきます。

番号を非表示にする

Table of Contents Plusは、自動で目次に番号を割り振ってくれますが、設定で番号を表示しないようにすることもできます。サイドバーなどに表示する場合は、表示幅が狭く番号が表示されてしまうと改行される場所が増えてしまいます。

番号が表示されないようにするには、設定の「番号振り」のチェックを外せばOKです。

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

この設定をオンにすると、目次の項目をクリックした時にスクロールして選択箇所まで移動するようになります。

細かな違いですが、この方が使っていて気持ちよく、移動したことが分かりやすいので有効にしておくと良いでしょう。

関連記事