本記事では、Rich Table of Contents(RTOC)の設定方法・使い方を解説します。
Rich Table of Contents(RTOC)とは、自動で目次を生成してくれるプラグインで、誰でも簡単におしゃれな目次を設置できます。
ブログ記事に目次は必須。なぜなら、読者が記事内容を把握したり、読みたい箇所へ簡単に飛べたりでき利便性が高まるからです。
ちなみに、「Table of Contents Plus」という目次プラグインもありますが、「RTOC」のほうが設定が簡単で使いやすいですよ。
※まだブログを開設していない方は、【2023年】WordPressブログの始め方を初心者にもわかりやすく解説をどうぞ。
Rich Table of Contents(RTOC)とは?
![Rich Table of Contents](https://www.yasutaroublog.com/wp-content/uploads/2020/11/スクリーンショット-2022-01-08-17.22.33-1.png)
Rich Table of Contents(RTOC)とは、記事の見出しから自動で目次を生成してくれるWordPressのプラグインです。
目次があることで、読者がひと目で記事内容を把握できたり、読みたい箇所へ簡単に飛べたりできるメリットがある。
また、RTOCならブログやデザインに詳しくない方でも簡単にカスタマイズでき、おしゃれな目次を作成できます。
そして、RTOCはWordPressテーマ「JIN」を開発したひつじさんが、作成した無料の国産プラグインでもあります。
そのため、「JIN」と同様にシンプルかつオシャレなデザインが特徴で、ブログ初心者でも使いやすいですよ。
![【2022年】WordPressテーマ『JIN』の評判・口コミまとめ](https://www.yasutaroublog.com/wp-content/uploads/2021/03/JIN-320x180.png)
Rich Table of Contents(RTOC)の導入方法
![Rich Table of Contents(RTOC)の導入方法](https://www.yasutaroublog.com/wp-content/uploads/2022/11/undraw_Close_tab_re_4cj6-1-e1668735554229.png)
続いて、Rich Table of Contents(RTOC)の導入方法を解説します。
WordPressの管理画面から、「プラグイン→新規追加」をクリックしてください。
![プラグインの新規追加](https://www.yasutaroublog.com/wp-content/uploads/2021/08/スクリーンショット-2022-02-01-17.19.49.png)
画面右上の検索窓に「RTOC」と入力して、「今すぐインストール→有効化」をクリックします。
![Rich Table of Contents(RTOC)の導入・インストール](https://www.yasutaroublog.com/wp-content/uploads/2021/08/スクリーンショット-2021-08-24-14.40.57.jpg)
「動画のほうが分かりやすい」という方は、下記の動画を参考にしてみてください。
以上で、インストールと有効化の完了です。
Rich Table of Contents(RTOC)の設定方法・使い方
![Rich Table of Contents(RTOC)の設定方法・使い方](https://www.yasutaroublog.com/wp-content/uploads/2020/10/undraw_Investor_update_re_qnuu-e1668735641714.png)
つぎに、Rich Table of Contents(RTOC)の設定方法・使い方を解説します。
WordPressの管理画面から、「RTOC設定」をクリックしてください。
![Rich Table of Contents(RTOC)の設定方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2020-10-24-22.48.10-1024x432.png)
「目次設定」というタブから、下記5項目をそれぞれ設定していきます。
- 基本設定
- デザイン設定
- プリセットカラー設定
- カラー設定(上級者向け)
- 応用設定
①:基本設定
まず、基本設定を変更します。
目次のタイトル、表示させる見出し設定、フォント設定などを自由にカスタマイズしましょう。
![Rich Table of Contents(RTOC)の設定方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2021-08-24-15.14.19.jpg)
目次のタイトルは、初期設定だと「Contents」になっているので、わかりやすいよう「目次やメニュー」などに変更しましょう。
表示させる見出し設定は、見出し(H2・3・4)をどこまで表示させるか選べます。見出し3(H3)まで表示させるのがおすすめです。
フォントは、デフォルト/Helvetica/Noto Sansの3種類から選べます。
②:デザイン設定
つぎに、デザイン設定を変更します。
タイトルの表示設定、H2・H3のリスト形式、枠のデザインなどを好みに合わせてカスタマイズしましょう。
![Rich Table of Contents(RTOC)の設定方法・使い方](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-11-22.26.46.png)
![Rich Table of Contents(RTOC)の設定方法・使い方](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-01-11-22.27.11.png)
スムーススクロール設定を「ON」にすると、目次から見出し移動がスクロールしたように移動します。
右側のプレビューを確認しながら、設定変更できるのでやりやすいですよ。
③:プリセットカラー設定
つぎに、プリセットカラー設定を変更します。
「JIN Color」を除いて、6種類のプリセットが用意されています。
![Rich Table of Contents(RTOC)の設定方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2021-08-24-15.15.22.jpg)
「JIN Color」はWordPressテーマ「JIN」を使用している方向けで、JINの設定カラーが反映されます。
④:カラー設定(上級者向け)
ここでは、プリセットカラー設定で選択したものを、より細かくカスタマイズできます。
![Rich Table of Contents(RTOC)の設定方法](https://www.yasutaroublog.com/wp-content/uploads/2021/08/スクリーンショット-2021-08-24-15.11.48.jpg)
細かく色を設定できるので、自分好みにアレンジしてみてください。
⑤:応用設定
さいごに、応用設定を変更します。
目次に戻るボタン、ボタンの位置、テキストなどを設定しましょう。
![Rich Table of Contents(RTOC)の設定方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2021-08-24-15.15.48.jpg)
「目次に戻る」ボタンは、スマホだけ表示されます。
除外する投稿ID・除外する固定ページIDは、目次を表示させたくない記事がある場合、記事IDを入力しましょう。(記事のIDは投稿一覧から確認できます。)
設定が完了したら、忘れずに「変更を保存」をクリックしましょう。
【上級者向け】ショートコードで目次を任意の場所に設置する
目次のショートコードを貼ることで、記事内の好きなところへ目次を設置することができます。
ショートコードで目次を任意の場所に設置するのは、上級者向けで、記事のデザインにこだわりたい方は試してみてください。
「RTOC設定→ショートコード」をクリックします。
![【上級者向け】ショートコードで目次を任意の場所に設置する](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-07-14-21.18.26.jpg)
そして、ショートコードをコピーして、記事編集画面でショートコードブロックへ貼り付ければ完了です。
![【上級者向け】ショートコードで目次を任意の場所に設置する](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-07-14-21.26.00.jpg)
もし、何か困ったことがあったら、「ヘルプ」というタブをクリックすればQ&Aが載っているので参考にしてください。
![【上級者向け】ショートコードで目次を任意の場所に設置する](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-07-14-21.39.08.jpg)
Rich Table of Contents(RTOC)で追従目次の設置方法
![Rich Table of Contents(RTOC)で追従目次の設置方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/undraw_online_stats_0g94-e1668735709815.png)
さいごに、RTOCを使ってサイドバーに追従目次を設定する方法を解説します。
まず、「RTOC設定→ショートコード」をクリックして、「目次のショートコード」をコピーします。
![【上級者向け】ショートコードで目次を任意の場所に設置する](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-07-14-21.26.00.jpg)
そしたら、「外観→ウィジェット」をクリックして、「カスタムHTML」を「サイドバー追尾(PC)」にドラッグします。
![Rich Table of Contents(RTOC)で追従目次の設置方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-11-18-10.11.09.jpg)
先ほどコピーした目次のショートコードを内容に貼り付けて、「保存→完了」をクリックすればOKです。
![Rich Table of Contents(RTOC)で追従目次の設置方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-11-18-10.24.04.png)
これで、記事内のサイドバーに追従目次を設定することができましたよ。
![Rich Table of Contents(RTOC)で追従目次の設置方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/スクリーンショット-2022-11-18-10.28.28.jpg)
まとめ:Rich Table of Contents(RTOC)で目次を設置しよう!
![Rich Table of Contents(RTOC)で追従目次の設置方法](https://www.yasutaroublog.com/wp-content/uploads/2020/10/undraw_Photo_session_re_c0cp-e1668735873594.png)
今回は、目次プラグイン「Rich Table of Contents」の設定方法・使い方を解説しました。
Rich Table of Contents(RTOC)は、WordPressブログに目次を設定したい方におすすめのプラグインです。
ブログ初心者でも簡単におしゃれな目次ができる「Rich Table of Contents」を使って、読者ファーストなブログを作りましょう。
その他、おすすめのプラグインは、【2023年】WordPressブログにおすすめのプラグイン10選で詳しく紹介しています。
その他、ブログ運営に役立つ記事を載せておきますね。
![セルフバック(自己アフィリエイト)の仕組みとやり方を徹底解説](https://www.yasutaroublog.com/wp-content/uploads/2021/06/selfback-e1644152156951-320x180.jpg)
![ブログで使えるおすすめのフリー素材・画像サイト11選【商用利用OK】](https://www.yasutaroublog.com/wp-content/uploads/2021/06/vecteezy_seo-search-engine-optimization-with-graph-and-chart-analysis_-e1647333742296-320x180.jpg)
![【2023年】WordPressおすすめ無料&有料テーマ7選|初心者向け](https://www.yasutaroublog.com/wp-content/uploads/2022/09/1166_generated-e1662021978261-320x180.jpg)
![ブログ運営に必須のおすすめツール11選【収益化を加速させる】](https://www.yasutaroublog.com/wp-content/uploads/2022/09/vecteezy_online-survey-concept-with-people-and-checklist-surveys_-e1662886207625-320x180.jpg)