この記事で解決できる悩み
- Rich Table of Contentsとは？
- Rich Table of Contentsの導入方法
- Rich Table of Contentsの設定方法
- Rich Table of Contentsのエラー対処方法
ブログ運営3年目のけいが解説していきますね。
上記の悩みを解決できる記事を書きました。
僕も初めてRich Table of Contentsを利用してみようと考えていたときは、「どんな特徴があって、どのように設定したらいいんだろう…」と悩んでいたので、みなさんの気持ちはよく分かります。
でも、今回この記事でご紹介するのにあたり、実際に調べて使用してみたところ、このプラグインの特徴や使い方すべてを理解することができました。
この記事で紹介をする「Rich Table of Contentsの設定・カスタマイズ方法」を参考にすれば、今日からでも読者思いなブログとして運営することができますよ。
記事前半では「Rich Table of Contentsの特徴」、後半では「Rich Table of Contentsの設定方法（全般）」を紹介するのでブログ運営に興味がある人はぜひチェックしてみてください。
【本編に入る前に】
🎁当サイトでは無料相談を受け付けています🎁
これからブログ運営を始めるのにあたって細かい部分で分かりにくいところもあると思います。
そこで、期間限定特典としてお一人様40分前後の個別無料相談をご用意しました。ぜひご活用ください。
ただし、当サイト経由でWordPressを開設された人のみを対象とさせていただきます。その点についてはご了承ください。
それでは本編でRich Table of Contentsの設定・カスタマイズ方法について解説していきます。
Rich Table of Contentsとは？
まずはRich Table of Contentsとは何か？その特徴から理解していきましょう。
Rich Table of Contents（リッチ・テーブル・オブ・コンテンツ）とはブログ内に自動で目次を表示してくれるプラグインです。
このプラグインを必要とする理由としては、使用テーマによっては標準で目次機能がないものがあるからです。※AFFINGER6もその1つ。
そして、その足りない部分をRich Table of Contentsで補うというイメージをしてもらえば分りやすいかと思います。
なお、デザイン性・機能性に優れているのはもちろんのこと、直観的に操作ができるのもこのプラグインの特徴になりますよ。
Rich Table of Contentsのインストール方法
それでは早速、Rich Table of Contentsのインストール（導入）方法から説明していきます。
WordPressのダッシュボード画面から「①プラグイン」をクリックします。
「②プラグインを追加」をクリックします。
「③プラグインの検索」から“Rich Table of Contents”と入力し→「④今すぐインストール」をクリックしてください。
「⑤有効化」をクリックしたら完了です。
▼インストール後には管理画面が表示されます▼
Rich Table of Contentsの設定・カスタマイズ方法（けいブログ風）
続いてRich Table of Contentsを使った設定方法と、けいブログ風のカスタマイズを紹介していきます。
それぞれ5つの設定項目があるのですが、機能とその内容を説明したのちに、当ブログの設定・カスタマイズ方法を説明します。
以下がRich Table of Contentsの設定項目になります。
Rich Table of Contentsの設定方法
- 1. 基本設定
- 2. デザイン設定
- 3. プリセットカラー設定
- 4. カラー設定
- 5. 応用設定
それでは1つずつ見ていきましょう。
1. 基本設定
Rich Table of Contentsの「基本設定」では、目次をどこに配置し、どのように表示するかを調整できます。
| 重要度 | 項目名 | 説明 |
| 高い | 目次のタイトル | 目次上部のタイトル名を変更できる |
| 高い | 目次を表示させるページ | 目次を表示するページを選択できる |
| 高い | 表示させる見出し設定 | 目次に表示したい階層を選択できる |
| 高い | 表示条件 | 目次に表示する見出しの個数を指定できる |
| 低い | フォント設定 | 目次のフォントを変更できる |
「1. 基本設定」で実際に試してみた内容と、当ブログで設定しているカスタマイズは以下の通りです。
けいブログ風・カスタマイズ
- 表示条件：見出しが個から表示 2
※表示以外はデフォルト設定にしています。
2. デザイン設定
「デザイン設定」では、目次の見た目（レイアウト・形）を調整できます。
| 重要度 | 設定項目 | 説明 |
| 低い | タイトル表示設定 | 左寄せか中央寄せかを設定できる |
| 低い | H2のリスト形式 | 丸や番号などを選択できる |
| 低い | H3のリスト形式 | 丸や番号などを選択できる |
| 低い | 枠のデザイン | 枠の線を選択できる |
| 低い | 表示アニメーション | フェード・スライド・なしから選択できる |
| 高い | スムーススクロール設定 | なめらかに動くスクロールを設定できる |
「2. デザイン設定」で実際に試した機能と、当ブログで設定しているカスタマイズは以下の通りです。
けいブログ風・カスタマイズ
- タイトル表示設定：中央寄せ
- 枠のデザイン：左から4番目を選択
※表示以外はデフォルト設定にしています。
3. プリセットカラー設定
「プリセットカラー設定」では、あらかじめ用意された配色セットから、ワンクリックで色を変更できます。
| 重要度 | 設定項目 | 説明 |
| 低い | 定番カラー | デザイン済みのカラーセットを選択できる |
「3. プリセットカラー設定」は、実際に機能を試した結果、“デフォルト設定のまま”にしました。
※定番カラーはサニーブルーを選択しています。
4. カラー設定
「カラー設定」では、目次の細かな色（タイトル・テキスト・枠線 など）を個別に調整できます。
| 重要度 | 設定項目 | 説明 |
| 高い | カラー設定 | 細かくカラー設定を変更できる |
「4. カラー設定」で色みを実際に試した結果、当ブログでは以下のカスタマイズにしています。
けいブログ風・カスタマイズ
※表示以外はデフォルト設定にしています。
なお、現在サイトのカラーコードが決まっていない場合は下記の「原色大辞典」を参考にしてみてください。色みやイメージを入力するとカラーを検出できますよ。
5. 応用設定
「応用設定」では、目次の表示方法やアニメーションを細かく調整できます。
| 重要度 | 設定項目 | 説明 |
| 高い | 目次に戻るボタン | 目次に戻るボタンを設置できる |
| 高い | PCでも目次に戻るボタンを表示 | PCでも目次に戻るボタンを表示できる |
| 高い | TOPページに目次を表示させない | トップページの目次表示の設定ができる |
| 低い | 目次に戻るボタンの位置 | 左寄せか右寄せかを設定できる |
| 低い | 目次へ戻るボタンのテキスト | 目次へ戻るボタンの文言を変更できる |
| 低い | 上下調整 | 目次へ戻るボタンの位置調整ができる |
| 低い | 除外する投稿ID | 目次を表示させない記事を設定できる |
| 低い | 除外する固定ページID | 目次を表示させない固定ページを設定できる |
| 高い | 目次のデフォルト表示設定 | 最初から目次を閉じるか開くかを選べる |
| 低い | 開閉ボタンの開くテキスト | 開くボタンの文言を設定できる |
| 低い | 開閉ボタンの閉じるテキスト | 閉じるボタンの文言を設定できる |
| 高い | 開閉ボタンを非表示にする | 開閉ボタンの有無を選択できる |
| 低い | プラグインのCSSを読み込まない | CSSを自分で設定したい場合に使用できる |
「5. 基本設定」は、実際に機能を試したうえで、当ブログでは以下のカスタマイズにしました。
けいブログ風・カスタマイズ
- PCでも目次に戻るボタンを表示：✅
- 上下調整添付：41
上限の調整は、目次ボタンと戻るボタンの位置をそろえるために41にしています。
※表示以外はデフォルト設定にしています。
カスタマイズが終わったら「変更を保存」をクリックして完了です。
▼けいブログ風の目次の完成です▼
Rich Table of Contentsで目次が表示されない場合の対処方法
最後に、Rich Table of Contentsで目次が表示されない場合の対処方法も押さえておきましょう。
Rich Table of Contentsでは「1. 基本設定（🔴枠の表示条件）」を高く設定してしまうと目次が表示されない仕様になっています。
もし仮に、表示条件が「5個以上」で設定している場合に、見出しが4章しかない記事では目次が表示されません。
そのため、ブログに合った「表示条件」になっているかは、初期設定の段階で必ず確認しておきましょう。
なお、どの記事でも目次を表示させたい場合は、表示条件を1もしくは2に設定しておくことをおすすめします。
まとめ（Rich Table of Contentsでおしゃれで見やすい目次を設置しよう！）
本記事では、Rich Table of Contentsの設定方法について解説してきました。
最後に、このプラグインを使った「当ブログの設定・カスタマイズ方法」の要点をまとめて終わりたいと思います。
Rich Table of Contentsのカスタマイズ方法
| 1. 基本設定 |
|
| 2. デザイン設定 |
|
| 3. プリセットカラー設定 |
|
| 4. カラー設定 |
| 5. 応用設定 |
|
ご紹介した「Rich Table of Contentsの設定・カスタマイズ方法」を参考にすれば、今日からでも読者思いなブログとして運営することができます。
ぜひ本記事を参考にしながら、この機会にRich Table of Contentsの設定を進めてみてくださいね。
【最後に】
🎁当サイトでは無料相談を受け付けています🎁
これからブログ運営を始めるのにあたって細かい部分で分かりにくいところもあると思います。
そこで、期間限定特典としてお一人様40分前後の個別無料相談をご用意しました。ぜひご活用ください。
ただし、当サイト経由でWordPressを開設された人のみを対象とさせていただきます。その点についてはご了承ください。
