JINの製作者のひつじさんが、Rich Table of Contentsを開発しました。
簡単な設定だけで、とてもかわいい目次ができます。
- 無料のプラグイン
- かわいい
- 目次に戻るボタンが標準装備されている
JINを開発した方たちが作った目次プラグインだから、もちろんJINへの対応もばっちりです。
目次に戻るボタンがほしくてほしくて、CSSをいじっていた人もたくさんいたはず。
簡単に素敵な目次を手に入れるなら、Rich Of Table Contentsを導入しましょう!
「Rich Table of Contents」目次プラグインの設定方法
「Rich Table of Contents」目次プラグインの設定方法を説明します。
「Rich Table of Contents」目次プラグインをインストールしよう
-
STEP01プラグインを検索プラグインの新規追加から、『RTOC』と検索。
-
STEP02今すぐインストールをクリック
これで「Rich Table of Contents」はインストール完了しました。
「Rich Table of Contents」目次プラグインの詳細設定
「Rich Table of Contents」目次プラグインをインストールして、有効化すると、ダッシュボード内に、RTOC設定という項目が出てきます。
「Rich Table of Contents」目次プラグインは、なんといっても使いやすい!
感覚的にクリックで、デザインを決めることができます。
そして、決めたデザインが、リアルタイムで表示されるので、確認しながら目次を作成することができます。

基本設定

さよみみ部屋ブログでは、目次タイトルは『タップできる目次』としています。
目次とわかるタイトルがいいですね。
目次を表示させるページは、投稿・固定ページのどちらも必要なのか、投稿だけなのか選ぶことができます。
表示させる見出し設定は、H3までが、ごちゃごちゃしないので、おすすめです。
デザイン設定
デザイン設定では、次のことを設定できます。
タイトル表示設定 | 目次タイトルの位置 |
H2のリスト形式 | H2のリストスタイル |
H3リスト形式 | H3のリストスタイル |
枠のデザイン | 目次の枠のデザイン |
表示アニメーション | 目次を表示するときのアニメーション |
スムーススクロール設定 | 目次のリンクをクリックしたときのスムーススクロール |
プリセットカラー設定
デフォルトで追加されているRTOCのカラーです。

こちらで気に入るものがあれば、ワンクリックで、目次のカラー設定が完了します。
カラー設定(上級者向け)
プリセットカラーで好きなものがないと、こちらでひとつひとつ色を選ぶことができます。

応用設定
目次へ戻るボタンやプラグインCSSの除外など、高度なカスタマイズを必要とされる方はこちらで設定をします。

「Rich Table of Contents」目次の表示を確認する
設定が終われば、設定画面を下までスクロールして、左下の『変更を保存』をクリックしてください。

これで、Rich Table of Contentsが表示されます。
JINユーザーにはもちろんおすすめ
JINの開発者が作っているため、JINとの相性は抜群です。
JINを使っている状態で、Rich Table of Contentsを有効にすると、定番カラーに『JIN color』という項目が出てきます。
JIN colorを選ぶと、JINで設定されているカラーと同じ色を自動で設定してくれます。
もちろん、JIN以外のテーマでも、問題なく利用できます
JIN以外のテーマでももちろん利用可能
さっそく実装いたしましたー。
AFINGER5でも問題なく動作しております。
完成度マックスです!! pic.twitter.com/Gs03MBYrsq
— ぽてぽてポテコの”のらくら日記” (@poteko5s) March 1, 2020
ほとんどのWord Pressテーマで使用可能です。
うまく使用できない場合は、まず次のことを確認してみてください。
- 今まで使用していた目次プラグインを停止
- RTOCの有効化
- キャッシュを削除