「目次を表示させたいんだけど、WordPressテーマに機能がないんだよな…。」
そんなあなたには目次プラグイン「Rich Table of Contents」がおすすめです。
設定画面が分かりやすく、ほんの数分でサイトになじむ目次が作れるんです!
そこで今回はWordPress目次プラグイン「Rich Table of Contents」の使い方を画像付きで紹介します。
「Rich Table of Contents」をインストールする
![](https://linkeeps.com/wp-content/uploads/2022/02/目次01.png)
まず「Rich Table of Contents」をインストールしましょう。
- WordPress管理画面の左メニューから「プラグイン」→「新規追加」をクリック
- 右上の検索欄に「Rich Table of Contents」をペースト
- 「今すぐインストール」をクリック
- 「有効化」をクリック
これでインストールは完了、公開している記事に目次が挿入されています!
とてもカンタンですよね。
「Rich Table of Contents」を設定する
「Rich Table of Contents」の設定方法を紹介します。
「有効化」するだけでも目次が表示されるのですが、サイトデザインに合わせて色などを変えたいですよね。
設定を変えるにはWordPress左メニュー「RTOC設定」をクリックしてください。
![](https://linkeeps.com/wp-content/uploads/2022/02/目次02.png)
変更したい部分をクリックすると、右側にプレビュー画面が表示されます。
最後に「変更を保存」を押すのを忘れないでくださいね!
基本設定
![](https://linkeeps.com/wp-content/uploads/2022/02/目次03.png)
目次のタイトル
初期設定では「Contents」になっています。
「もくじ」や「目次」など分かりやすくしましょう。
目次を表示させるページ
目次を表示させるページを設定します。
おすすめは「投稿」のみチェックです。
表示させる見出し設定
「見出し(H2・H3・H4)をどこまで表示させるか」という項目です。
おすすめは「H3まで表示」です。
H4も表示すると目次が長すぎて、スクロールしなければ本文を読めないんですよね。
表示条件
「記事内にいくつの見出しがあったら目次を表示するのか」という項目です。
「3」か「4」がおすすめです。
フォント設定
目次のフォントを選べます。
フォント変更はページ速度を遅くする原因なので、「デフォルト」がおすすめです。
デザイン設定
![](https://linkeeps.com/wp-content/uploads/2022/02/目次04.png)
タイトル表示設定
「目次」部分を左寄せにするか、中央寄せにするかを設定できます。
おすすめは「中央寄せ」ですが、お好みでどうぞ。
H2のリスト形式
H2見出しのデザインを選びます。
おすすめは番号がつくデザインですが、好きなものでOKです。
H3のリスト形式
H3見出しのデザインを選びます。
おすすめはH2と区別しやすいように「丸」か「なし」ですが、好きなものでOKです。
枠のデザイン
目次の枠デザインを変更します。
サイト全体の雰囲気と合うものを選びましょう。
表示アニメーション
目次を表示するアニメーションを設定できます。
おすすめは「アニメーションなし」。
ユーザーからすれば、目次表示のためにアニメーションを待ちたくないと思うので。
スムーススクロール設定
目次をクリックした時に「ヌルッと移動するか」「スッと移動するか」という設定です。
「ON」にするとヌルっと流れるような動きになります。
私は「ON」派ですが、お好みに合わせて選んでみてください。
プリセットカラー設定
![](https://linkeeps.com/wp-content/uploads/2022/02/目次05.png)
6種類のカラーが用意されています。
「とにかく早く目次を表示させたい」という人は、とりあえずここからサイトに合うものを選べばOKです。
カラー設定(上級者向け)
![](https://linkeeps.com/wp-content/uploads/2022/02/目次06.png)
サイトのカラーコードを決めている方は「カラー設定(上級者向け)」で個別に設定できます。
「タイトルカラー」や「枠線カラー」を変えるだけでも、サイトに自然になじむでしょう。
例えば私の場合は、サイトメインカラーの#6490cdに合わせています。
応用設定
![](https://linkeeps.com/wp-content/uploads/2022/02/目次07.png)
目次に戻るボタン
「目次に戻るボタン」を「ON」にすると、モバイルデバイスで閲覧しているときに表示されます。
WordPressテーマによってはすでに「上部へ戻る」ボタンが設定されていることも。
モバイルから見て必要かどうか判断しましょう。
目次に戻るボタンの位置
「目次に戻るボタン」を左右どちらかに表示させるか選べます。
モバイルは右手で操作されることが多いので、「右」のほうが使いやすいかなと思います。
目次へ戻るボタンのテキスト
「目次へ戻るボタン」の文字を変更できます。
「もくじへ」など分かりやすいものにしましょう。
上下調整
「目次へ戻るボタン」の位置を調整できます。
CTAや他のボタンとかぶっているときは変更しましょう。
除外する投稿ID
目次を表示しない投稿記事を個別に設定できます。
記事のIDは記事編集画面のURLから確認します。
post=〇〇の数字がIDです。
URL例:https://linkeeps.com/wp-admin/post.php?post=1495&action=edit
→IDは1495
除外する固定ページID
目次を表示しない固定ページを個別に設定できます。
記事のIDは記事編集画面のURLから確認します。
post=〇〇の数字がIDです。
URL例:https://linkeeps.com/wp-admin/post.php?post=1495&action=edit
→IDは1495
目次のデフォルト表示設定
目次を「最初から表示させておくか」「閉じておくか」を設定します。
おすすめは「最初から表示させる」です。
開閉ボタンの開くテキスト
目次を開くボタンの文字を変更できます。
「開く」など分かりやすいものにしましょう。
開閉ボタンの閉じるテキスト
目次を閉じるボタンの文字を変更できます。
「閉じる」など分かりやすいものにしましょう。
プラグインのCSSを読み込まない
チェックなしでOKです。
チェックを入れるとレイアウトが崩れる可能性があります。
7日間目次使用率を計測する
目次使用率を計測できるようですが、具体的な使い方が分からず…。
とりあえず「ON」にはしていますが「OFF」でもいいかもしれません。
「Rich Table of Contents」の表示を確認する
「Rich Table of Contents」設定画面で「変更を保存」をクリックしたら、実際の表示を見てみましょう。
PC・スマホどちらも問題ないか確認してくださいね。
私の場合はこのように表示されます。
PC表示
![](https://linkeeps.com/wp-content/uploads/2022/02/mokuji.jpg)
スマホ表示
![](https://linkeeps.com/wp-content/uploads/2022/02/mokuji-2.jpg)
まとめ
今回はWordPress目次プラグイン「Rich Table of Contents」の使い方を紹介しました。
インストールするだけで目次を自動生成してくれる
サイトデザインに合わせて細かい設定もできる
PC・スマホでのユーザービリティ(読みやすさ)を上げてくれる
カンタンに目次を作れる「Rich Table of Contents」、ぜひ導入してみてください。