エンジニア

WordPressで、Rich Table of Contentsプラグインを用いて目次を表示する方法

 
ブログサムネイル (2)

Rich Table of Contents（RTOC）の使い方を詳しくまとめます。

Contents
  1. インストール手順
  2. 基本設定（おすすめ設定）
  3. デザイン設定
  4. 詳細設定
  5. 記事ごとの設定（個別制御）
  6. おすすめ設定（完全版）
  7. スマホ表示の最適化
  8. トラブルシューティング
  9. 高度なカスタマイズ
  10. まとめ：最初にやるべき3ステップ

インストール手順

1. プラグインのインストール

WordPress管理画面
→ プラグイン
→ 新規追加
→ 検索窓に「Rich Table of Contents」と入力
→ 「今すぐインストール」をクリック
→ 「有効化」をクリック

2. 基本設定画面へ移動

WordPress管理画面
→ 設定
→ RTOC設定

基本設定（おすすめ設定）

目次タイトル

デフォルト：「目次」
おすすめ：
- 「目次」
- 「この記事の内容」
- 「Contents」
- 「もくじ」

目次を表示するページ

✅ 投稿（post）
✅ 固定ページ（page）
☐ カスタム投稿タイプ（必要に応じて）

目次を表示する条件

おすすめ：H2タグが2つ以上
理由：短い記事には目次不要

表示する見出し

✅ H2（見出し2）- 必須
✅ H3（見出し3）- 推奨
☐ H4（見出し4）- 記事が長い場合のみ
☐ H5、H6 - 通常は不要

デザイン設定

デザインプリセット

9種類から選べます：

  1. デフォルト – シンプルな箱型
  2. シンプル – 枠線のみ、軽い印象
  3. ボーダー – 左に太い線
  4. 吹き出し – 会話風デザイン
  5. はてな風 – はてなブログ風
  6. チェックボックス – チェック付き
  7. 数字 – 番号付きリスト
  8. 丸数字 – 丸い番号付き
  9. カスタム – 完全カスタマイズ

おすすめ：

  • 初心者：「デフォルト」または「シンプル」
  • JINテーマ：「ボーダー」または「シンプル」

カラー設定

カスタマイズ可能な要素：

  • タイトル文字色
  • タイトル背景色
  • 枠線の色
  • 目次リンクの色
  • 目次リンクのホバー色

おすすめカラー（JIN向け）：

タイトル背景色：#f5f5f5（薄いグレー）
タイトル文字色：#333333（濃いグレー）
枠線：#e0e0e0（薄いグレー）
リンク色：#3498db（青系）

目次の位置

- 左寄せ（推奨）
- 中央寄せ
- 右寄せ

フレーム（枠線）

✅ あり（推奨）- 目次が目立つ
☐ なし - すっきりシンプル

詳細設定

開閉ボタン

✅ 目次を開閉できるようにする

開閉ボタンの文言：

  • 開くボタン：「表示」「開く」「OPEN」
  • 閉じるボタン：「非表示」「閉じる」「CLOSE」

初期状態

✅ 開く（推奨）
☐ 閉じる

ユーザビリティを考えると「開く」がおすすめ。

目次の表示位置

- 最初のH2タグの前（推奨）
- 記事タイトルの下
- 任意の位置（ショートコード使用）

スムーススクロール

✅ 有効にする（推奨）

目次をクリックしたときに、ページがなめらかにスクロールします。

目次に戻るボタン

✅ 表示する（お好みで）

記事の途中に「目次に戻る」ボタンを表示。長い記事におすすめ。

番号の表示

✅ 番号を表示する（推奨）
例：1. 見出し1
    2. 見出し2

記事ごとの設定（個別制御）

特定の記事で目次を非表示にする

投稿編集画面で：

  1. クラシックエディタの場合
記事編集画面の下部
→ 「RTOC設定」メタボックス
→ 「この記事では目次を非表示」にチェック
  1. ブロックエディタ（Gutenberg）の場合
サイドバー（右側）
→ 「投稿」タブ
→ 「RTOC設定」セクション
→ 「目次を表示しない」にチェック

ショートコードで手動表示

自動表示をオフにして、好きな場所に目次を表示：

[rtoc_mokuji title="目次" title_display="left" heading="h2" list_h2_type="number" list_h3_type="number"]

シンプル版：

[rtoc_mokuji]

表示したい場所に上記ショートコードを挿入するだけ。

おすすめ設定（完全版）

初心者向け設定

【基本設定】
目次タイトル：目次
表示するページ：投稿、固定ページ
表示条件：H2タグが2つ以上
表示する見出し：H2、H3

【デザイン】
デザインプリセット：デフォルト
カラー：デフォルトのまま
位置：左寄せ
フレーム：あり

【詳細設定】
開閉ボタン：有効
初期状態：開く
表示位置：最初のH2タグの前
スムーススクロール：有効
番号表示：有効
目次に戻るボタン：無効

ブログ中級者向け設定

【基本設定】
目次タイトル：この記事の内容
表示するページ：投稿
表示条件：H2タグが2つ以上
表示する見出し：H2、H3、H4

【デザイン】
デザインプリセット：ボーダー
タイトル背景色：#f8f8f8
タイトル文字色：#333333
枠線色：#e0e0e0
リンク色：サイトのメインカラー
位置：中央寄せ
フレーム：あり

【詳細設定】
開閉ボタン：有効
初期状態：開く
表示位置：最初のH2タグの前
スムーススクロール：有効
番号表示：有効
目次に戻るボタン：有効
戻るボタン表示条件：H2タグごと

スマホ表示の最適化

レスポンシブ設定

RTOCは自動でレスポンシブ対応していますが、さらにカスタマイズしたい場合：

追加CSS（外観→カスタマイズ→追加CSS）：

/* スマホで目次のフォントサイズを調整 */
@media (max-width: 768px) {
    #rtoc-mokuji-wrapper ol li a {
        font-size: 14px;
        line-height: 1.6;
    }
    
    /* 目次タイトルのサイズ調整 */
    #rtoc-mokuji-title {
        font-size: 16px;
    }
}

トラブルシューティング

目次が表示されない場合

1. 見出しタグを確認

- H2タグを使っているか？
- 見出しが設定した数以上あるか？（例：2つ以上）

2. 設定を確認

- 「目次を表示するページ」で投稿にチェックが入っているか？
- 個別記事で「目次を非表示」にチェックが入っていないか？

3. キャッシュをクリア

- ブラウザキャッシュをクリア
- キャッシュプラグイン（WP Fastest Cache等）をクリア

4. プラグインの競合

- 他の目次プラグインを無効化
- JINの標準目次機能をオフ

目次がずれる・崩れる場合

CSSで調整：

/* 目次の幅を調整 */
#rtoc-mokuji-wrapper {
    max-width: 100%;
    margin: 0 auto 30px;
}

/* 目次内のリストのずれを修正 */
#rtoc-mokuji-wrapper ol {
    padding-left: 1.5em;
}

特定の見出しを目次から除外したい

見出しに class="no-toc" を追加：

HTMLで：

<h2 class="no-toc">この見出しは目次に表示されない</h2>

高度なカスタマイズ

CSSで見た目を変更

目次の背景にグラデーション：

#rtoc-mokuji-wrapper {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

目次タイトルにアイコンを追加：

#rtoc-mokuji-title::before {
    content: "📖 ";
}

ホバー時のアニメーション：

#rtoc-mokuji-wrapper ol li a {
    transition: all 0.3s;
}

#rtoc-mokuji-wrapper ol li a:hover {
    transform: translateX(5px);
    color: #e74c3c;
}

まとめ：最初にやるべき3ステップ

Step 1: インストールと有効化

プラグイン → 新規追加 → Rich Table of Contents

Step 2: 基本設定

設定 → RTOC設定
- 表示条件：H2タグ2つ以上
- 表示する見出し：H2、H3
- デザイン：デフォルトまたはシンプル

Step 3: 記事を確認

既存記事をチェックして目次が表示されているか確認

これで基本的な目次機能が使えるようになります。デザインや細かい設定は後から調整できるので、まずはシンプルな設定で始めるのがおすすめです！

何か不明点があれば教えてください。

RELATED POST