プロブロガーのような目次の作り方【Rich Table of Contents】プラグインの設定方法|WordPress
![](https://omochi-style.com/wp-content/uploads/2023/09/62d4421a14809b7285f7a578c72426f8.jpg)
omochi
こんにちは。おもち(@omochibigaku)です。
こちらのページでは、ブログ記事の目次が簡単につくれる『Rich Table of Contents』の設定方法についてわかりやすく解説していきます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
おしゃれな目次が簡単につくれちゃうよ!
STEP1.プラグイン『Rich Table of Contents』を探そう
![](https://omochi-style.com/wp-content/uploads/2023/08/Slim-Maintenance-Mode7.jpg)
ブログをひらいて、画面左側のメニューにある『プラグイン』にカーソルをもっていき、表示された『新規追加』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/08/Edit-Author-Slug4.jpg)
プラグインを追加する画面がひらきました。
![](https://omochi-style.com/wp-content/uploads/2023/08/Edit-Author-Slug5.jpg)
検索窓に『Rich Table of Contents』と入力。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table1.jpg)
検索結果に『Rich Table of Contents』が表示されました。
STEP2.インストールして有効化しよう
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table2.jpg)
『今すぐインストール』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table3.jpg)
『有効化』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table4.jpg)
これで『Rich Table of Contents』が追加できました。
STEP3.目次の詳細設定をしよう
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table5.jpg)
画面左側にある『RTOC設定』をクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table6.jpg)
目次の設定画面がひらきました。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table7-2.jpg)
設定できる項目はつぎのとおり。
- 目次のタイトル
- 目次を表示させるページ
- 表示させる見出し設定
- 表示条件
- フォント設定
よくわからないという人は、このままでも大丈夫です!
表示条件で設定した数値より、記事の見出しが少ない場合、ブログ記事に目次は表示されません。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table8.jpg)
参考までに、私はこんな感じで設定しています。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
好きなように設定してもらって大丈夫だよ!
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table9.jpg)
ここでは、目次の見た目を設定できます。
お好きな組み合わせをえらんでください。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table10.jpg)
目次の色合いは、こちらで設定できます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/basic.png)
いろいろポチポチしてみよう!
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table11.jpg)
参考までに、自分で好きな色を組みあわせたい場合は『ダーク』を選択してから、
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table12.jpg)
こちらで色を指定してください。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table13.jpg)
こちらは必要なときに設定すればOK!
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table14.jpg)
さいごに『変更を保存』ボタンをクリック。
![](https://omochi-style.com/wp-content/uploads/2023/09/Rich-Table15.jpg)
目次が簡単につくれました!
あとはブログ記事をかくだけで、自動的に目次が挿入されます。
![おもち](https://omochi-style.com/wp-content/uploads/2023/08/haha.png)
設定はいつでも変更できるので、サイトデザインにあった目次にしちゃおう!
プロフィール