【徹底比較】ブロガーにおすすめのレンタルサーバー4選！選び方と一緒に解説！Wordpressブログ（サイト）を作るならこれで完璧！
hitode99
hitodeblog（ヒトデブログ）
【2026年10月版】Rich Table of Contents（RTOC）の設定方法と正しい使い方をわかりやすく解説
hitode99
記事内に商品プロモーションを含む場合があります
「JIN:Rを使ってるけど、目次ってどうやって出すの？」
「目次のプラグインを入れたけど、設定項目が多くてよくわからない…」
「他のブログみたいなおしゃれな目次にしたい！」
こんな悩みはありませんか？
結論から言うと、JIN:Rを使っているなら、目次はプラグイン「Rich Table of Contents（RTOC）」で出すのが正解です。RTOCはJIN:Rと同じ作者（Croover.inc）が作っている公式推奨のプラグインです。一度設定すれば、あとは記事を書くだけで自動で目次が入ります
この記事では、JIN:Rを使っているブログ初心者の方向けに、次の4つを画像つきで解説します
- Rich Table of Contentsのインストール方法
- 目次設定のやり方（ヒトデブログの実際の設定も公開）
- 記事内の目次・追尾目次の使い方
- 特定の記事だけ目次を出さない方法
※この記事は「JIN:R」を使っている人向けです。Cocoonなどテーマに目次機能がある人は、入れなくて大丈夫です
JIN:Rを使うなら、RTOCはほぼ必須のプラグインだよ！初心者は基本設定だけやればOKだから、サクッといこう！
ワードプレスのおすすめプラグインはこちらの記事をどうぞ▼
あわせて読みたい
【2026年版】WordPressのおすすめプラグイン｜初心者は最低限この5つ＋αだけ入れればOK！
この記事の目次
Rich Table of Contents（RTOC）とは？
Rich Table of Contents（通称RTOC）は、記事に目次を自動で入れてくれるプラグインです
作者はCroover.incで、WordPressテーマ「JIN:R」と同じ会社です。JIN:R公式の推奨プラグインなので、デザインもJIN:Rにぴったり合います
JIN:Rには目次機能がないのでRTOCで目次を出す
実はJIN:Rには、テーマ本体に目次を出す機能がありません。目次はRTOCで出す設計になっています
つまり、JIN:RでRTOCを入れていないと、記事に目次が出ません
目次があると、読者は記事全体の流れを最初に把握できて、読みたいところにすぐ飛べます。長い記事ほど目次の有無で読みやすさが大きく変わります
Cocoonなど他テーマの人は入れなくてOK
Cocoonなど、テーマ自体に目次機能があるテーマを使っている人は、目次が重なってしまうので、RTOCは入れなくて大丈夫です
RTOCは「JIN:R専用の目次」くらいに思っておけばOKだよ！
Rich Table of Contentsのインストール方法
ここからは、RTOCのインストール方法を解説します
「プラグインを追加」で「Rich Table of Contents」と検索する
WordPressの管理画面で「プラグイン」→「プラグインを追加」の順にクリックします
右上の検索欄に「Rich Table of Contents」と入力します
すると、検索結果に「Rich Table of Contents」と表示されます。作者が「Croover.inc」になっているか確認しましょう
インストールして有効化する
「今すぐインストール」をクリックします
インストールが終わると、ボタンが「有効化」に変わるので、そのままクリックします
これでインストール完了です。「プラグイン」→「インストール済みプラグイン」の一覧に「Rich Table of Contents」と表示され、有効になっていればOKです
有効化を忘れる人がけっこう多いから、ここで一覧をチェックしておこう！
Rich Table of Contentsの目次設定のやり方
インストールが終わったら、目次の設定をしていきます
項目はたくさんありますが、初心者の方は「基本設定」と「定番カラー」を決めるだけで十分です。残りは初期値のままでも問題なく使えます
ここでは、ヒトデブログで実際に使っている設定もあわせて紹介するので、迷ったら真似してください
「RTOC設定」の画面を開く
有効化すると、管理画面の左メニューに「RTOC設定」と表示されます。クリックすると設定画面が開きます
画面の上には「目次設定」「ショートコード」「ヘルプ」の3つのタブがあります。目次の見た目や表示条件は、すべて「目次設定」タブで決めます
目次設定タブの右側には「Live Preview」があります。設定を変えると、目次の見た目がその場でプレビューに反映されます
Live Previewを見ながらいじれるから、デザインに自信がなくても大丈夫だよ！
基本設定
まずは基本設定です。ここが一番大事です
| 項目 | 内容 | ヒトデブログの設定 |
|---|---|---|
| 目次のタイトル | 目次の一番上に出る文字 | この記事の目次 |
| 目次を表示させるページ | 投稿・固定ページ・カテゴリーから選ぶ | すべてON |
| 表示させる見出し | 目次に載せる見出しの深さ（H2/H3/H4） | H3まで |
| 表示条件 | 見出しがいくつ以上あれば目次を出すか | 4個から表示 |
| フォント | デフォルト／Helvetica／Noto Sans | デフォルト |
おすすめは「表示させる見出し」をH3までにすることです。H4まで出すと目次が長くなりすぎて、かえって探しにくくなります
「表示条件」は、見出しが少ない短い記事に目次が出ないようにする設定です。見出しが2〜3個しかないなら、目次がなくても困りませんよね
デザイン設定
次はデザイン設定です。目次の見た目を決めます
| 項目 | ヒトデブログの設定 |
|---|---|
| タイトル表示 | 中央寄せ |
| H2のリスト形式 | 「01｜」形式の番号 |
| H3のリスト形式 | 丸 |
| 枠のデザイン | 8種類から2番目（frame2） |
| 表示アニメーション | フェード |
| スムーススクロール | ON |
スムーススクロールは、目次の見出しをクリックしたとき、その位置までスーッと滑らかに移動する機能です。読者がどこに飛んだかわかりやすいので、ONにしておきましょう
枠のデザインは好みで大丈夫です。Live Previewを見ながら、自分のブログに合うものを選んでください
定番カラー
色は定番カラーから選ぶのが一番カンタンです
選べるのは「JIN:R color」「サニーブルー」「ダーク」「フェミニン」「アクアマリン」「スマート」「シトラス」の7種類です
ヒトデブログは「JIN:R color」にしています。迷ったらこれでOKです
色は定番カラーから選べば一瞬で決まるよ。細かい色はいじらなくて全然OK！
カラー設定（上級者向け）
定番カラーの色を細かく調整したい人向けの設定です。定番カラーで満足している人は触らなくて大丈夫です
ヒトデブログでは、タイトル・枠線・H2・H3・目次へ戻るボタンのカラーが #efbf75、テキストのカラーが #50514c、背景のカラーが #f7f2e8 になっています
応用設定
応用設定は、目次に戻るボタンや、目次を出さないページの指定などです。基本は初期値のままでOKです
| 項目 | ヒトデブログの設定 |
|---|---|
| 目次に戻るボタン | OFF |
| PCでも目次に戻るボタンを表示 | OFF |
| TOPページに目次を表示させない | OFF |
| 目次に戻るボタンの位置 | 左寄せ |
| ボタンのテキスト | 目次へ |
| 上下調整 | 10 |
| 除外する投稿ID | 空欄 |
| 除外する固定ページID | 空欄 |
| 目次のデフォルト表示 | 最初から表示させる |
| 開閉ボタンのテキスト | OPEN・CLOSE |
| 開閉ボタンを非表示 | OFF |
| プラグインのCSSを読み込まない | OFF |
「除外する投稿ID」「除外する固定ページID」は、特定の記事だけ目次を出さないときに使います。使い方は後ほど「特定の記事だけ目次を出さない方法」で解説します
「プラグインのCSSを読み込まない」をONにすると、目次のデザインが外れて、文字だけの目次になります。OFFのままにしておきましょう
最後に「変更を保存」を押す
設定が終わったら、画面の一番下にある「変更を保存」を必ずクリックしましょう。保存しないとページを離れたときに設定が消えてしまうので注意です
Rich Table of Contentsの基本的な使い方
設定が終わったら、あとは記事を書くだけです。ここではRTOCの使い方を4つ紹介します
記事の目次は自動で入る
RTOCは、記事の中で最初のH2見出しの直前に、目次を自動で入れてくれます。自分で目次を作る必要はありません
ヒトデブログでは、導入文と「あわせて読みたい」のあとに、目次が表示されています
「CLOSE」を押すと目次がたたまれます
なお、ブロックエディタで「目次」と検索しても、RTOCのブロックは出てきません。投稿編集画面に記事ごとの目次ON/OFF欄もありません
RTOCは「設定した条件に合う記事に自動で入れる」仕組みです。編集画面では目次が見えませんが、プレビューや公開後のページではちゃんと表示されます
「目次ブロックどこ…？」って探さなくて大丈夫！勝手に入ってくれるよ！
サイドバーに追尾目次を出す
PCで見たときに、サイドバーに目次を出して、スクロールに合わせて付いてこさせることもできます。これを「追尾目次」と呼びます
追尾目次は、今読んでいる見出しがハイライトされるので、読者が「記事のどのあたりを読んでいるか」がひと目でわかります
設定は「外観」→「ウィジェット」を開き、「サイドバー追尾【PC】」に「カスタムHTML」ブロックを追加して、目次のショートコードを入れるだけです
ヒトデブログでは、次のショートコードを入れています
[rtoc_mokuji title="この記事の目次" title_display="" heading="" list_h2_type="" list_h3_type="" display="" frame_design="" animation=""]
値が空のものは、管理画面の設定が使われます
追加したブロックの種類が「カスタムHTML」になっていればOKです
好きな位置に出したいときはショートコードを使う
自動で入る位置ではなく、好きな位置に目次を出したいときは、ショートコードを使います
記事の中で目次を出したい場所に、[rtoc_mokuji] と貼ります
ショートコードの書き方は「RTOC設定」の「ショートコード」タブで確認できます
値を何も入れなければ、管理画面で設定した内容がそのまま使われます。その記事だけ見た目を変えたいときは、次のような値を足します
| 値 | 内容 | 入れられるもの |
|---|---|---|
| title | 目次のタイトル | 好きな文字 |
| title_display | タイトルの位置 | left／center |
| heading | 表示させる見出し | h2／h3／h4 |
| display | 最初の表示 | open／close |
| frame_design | 枠のデザイン | frame1〜frame5 |
| animation | 表示アニメーション | fade／slide／none |
枠のデザインは、設定画面では8種類から選べますが、ショートコードで指定できるのはframe1〜frame5の5種類です
また、ショートコードタブの一覧にはリストの形式（list_h2_type・list_h3_type）も載っていますが、試したところ反映されなかったので、リストの形式は管理画面で設定しましょう
たとえば、タイトルを変えてH2だけの目次にしたいなら、[rtoc_mokuji title="この記事でわかること" heading="h2"] のように書きます
ショートコードを貼ると、目次はその位置に1つだけ表示され、自動の目次と二重になることはありません
ショートコードは「どうしてもこの位置に出したい！」ってときだけでOK。普段は自動で十分だよ！
特定の記事だけ目次を出さない方法
お問い合わせページや、短いお知らせ記事など、目次を出したくない記事もありますよね
そんなときは「RTOC設定」→「目次設定」→「応用設定」の「除外する投稿ID」「除外する固定ページID」に、その記事のIDを入れます
複数ある場合は、「3,28,551」のように半角カンマで区切って入力します。入力したら「変更を保存」を押しましょう
記事のIDは、記事の編集画面を開いたときのURL（post.php?post=○○）の「○○」の数字です
まとめ：Rich Table of Contentsで読みやすい目次を作ろう
今回は、JIN:R公式推奨の目次プラグイン「Rich Table of Contents（RTOC）」の設定方法と使い方を解説しました
ポイントは次の3つです
- JIN:Rにはテーマに目次機能がないので、RTOCで目次を出す
- 初心者は「基本設定（H3まで・見出し4個から表示）」と「定番カラー」だけ決めればOK
- 目次は最初のH2の前に自動で入る。出したくない記事は「除外する投稿ID」で止める
目次があるだけで、記事はぐっと読みやすくなります。一度設定すればあとは何もしなくていいので、JIN:Rを使っている人はぜひ今日のうちに入れておきましょう
設定は10分もあれば終わるよ！ほかに入れておくべきプラグインも、下の記事でまとめてるからチェックしてね！
他のワードプレスおすすめプラグインはこちらの記事をどうぞ▼
あわせて読みたい
【2026年版】WordPressのおすすめプラグイン｜初心者は最低限この5つ＋αだけ入れればOK！
