WordPressにプラグインで目次をつける -Table of Contents Plus

今回はWordPressで、下のような目次をつける方法を解説します。
UIXアカデミーの目次は「Table of Contents Plus」と呼ばれるプラグインで表示しています。

私がこのプラグインを使っているのは、これが定番だからです。
目次を表示させたい方、全てにおすすめできるプラグインです。

【この記事を読むといい人】
WordPressで目次を表示する方法が知りたい人
目次のプラグインでおすすめが知りたい人
Table of Contents Plusの使い方が知りたい人

Table of Contents Plusをダウンロードします

WordPressのダッシュボードで「プラグイン」→「新規追加」を選択します。

画面右上の「キーワード」欄に「Table of Contents Plus」と入力します。
恐らく「Table of・・」と入れると、碇のアイコンのメニューが表示されるので、「今すぐインストール」をクリックします。

Table of Contents Plus

しばらくすると「今すぐインストール」が「有効化」に変わるので、それをクリックします。

Table of Contents Plus

これでダウンロード(インストール)は完了です。

もう目次が表示されるようになっています。
ブログの投稿ページを見てみて下さい。

表示されていない場合は、ページを一度更新して下さい。

Table of Contents Plusを設定する

このままで十分使えるのですが、私は少し設定を触っているので、その方法を書いておきます。

Table of Contents Plusの設定画面を表示します。

「設定」→「TOC+」を選択します。
TOC+はTable of Contents Plusの略なんですが、ちょっと分かりにくいですよね。

私は初めてこのプラグインを使った時、気付くのにだいぶ時間がかかりました。

Table of Contents Plus

下図の赤枠の部分が、私が初期設定から変更している所です。
その部分だけ説明しておきますね。

Table of Contents Plus

表示条件

初期設定だと4つ以上、見出しがある時に表示するようになっています。
私は見だしが3つという場合があるので、設定を「3」にしています。

見出しテキスト

テキストを表示とテキストを非表示の部分を、それぞれ「目次を表示」と「目次を非表示」に変更しています。

ここは初期状態では「Show」「Hide」と英語表記なんですが、少し分かりにくいので日本語にしています。

プレゼンテーション

「黒」を選択しています。
このブログは背景が黒なので、色を合わせるためです。

基本的に、どのプレゼンテーションでも構いません。
最後に「設定を保存」をクリックします。

目次を表示してユーザビリティの向上させよう

Table of Contents Plus

全て設定すると、上のように目次が表示されます。

目次は無くても内容は分かるんですが、やはりあった方が読者に親切ですね。
また目次を意識して書くことで、ブログ全体の構成が分かりやすいものになります。

スマホでの注意

Table of Contents Plusは、スマホでも同じように表示されます。

見出しの長さや数を注意しないと、目次がかなり長くなってしまいます。
もちろん、非表示にできるんですが、初期状態では表示されたままです。

場合によってはユーザーが離脱してしまう原因にもなりかねません。

見出しが多くなる場合は、投稿を2回に分けるなどの工夫が必要です。

最後までご覧頂き、ありがとうございました。