Cocoonで特定の記事だけ目次をH2まで表示する方法

WordPress Cocoonで特定の記事だけ目次をH2まで表示する方法を解説した図。ショートコード「[toc depth=2]」と、H3を除外した目次のイメージ how to
スポンサーリンク

本記事は、2026年11月8日時点の公式情報と実機検証をもとにしています。

WordPressテーマ「Cocoon」で、特定の記事だけ目次に表示する見出しをH2までに制限したい場合があります。

Cocoonでは、通常「Cocoon設定」でサイト全体の目次表示の深さを指定します。しかし、ショートコードを使えば、ほかの記事の設定を変えずに、特定の記事だけH2までの目次を表示できます。

この記事では、実際に設定して動作を確認した方法を紹介します。追加のプラグインやCSSの編集は必要ありません。

特定の記事だけ目次の表示階層を変更できる

Cocoonでは、記事内のH2やH3などの見出しから目次が自動生成されます。

例えば、通常の記事では目次にH3まで表示し、手順の多い記事ではH2までに絞りたい場合があります。

目次の表示階層は、管理画面の「Cocoon設定」→「目次」→「目次表示の深さ」から変更できますが、この設定を変更すると、サイト内のほかの記事にも影響します。

そこで利用するのが、Cocoon標準の目次ショートコードです。

このショートコードは、目次をH2まで表示するためのものです。

今回は、通常の目次を記事単位で非表示にしたうえで、このショートコードを使います。

特定の記事だけH2までの目次を表示する手順

STEP 1｜記事の自動目次を非表示にする

  1. WordPressの管理画面から対象記事の編集画面を開きます。
  2. 右側の「投稿」設定を開きます。
  3. 「ページ設定」にある「目次を表示しない」にチェックを入れます。

この操作で、対象記事の自動目次を非表示にできます。

サイト全体の目次設定は変更されないため、ほかの記事には影響しません。

STEP 2｜ショートコードを挿入する

次に、記事内で目次を表示したい位置にショートコードを追加します。

  1. 記事の編集画面で、目次を表示したい場所を選びます。
  2. 「＋」から「ショートコード」ブロックを追加します。
  3. 次のショートコードを入力します。
[toc depth=2]

今回の実機検証では、記事の導入部分の後、最初のH2見出しの直前に配置しました。

WordPressのコードエディターを利用する場合は、次のように記述できます。

<!-- wp:shortcode -->
[toc depth=2]
<!-- /wp:shortcode -->

STEP 3｜プレビューで表示を確認する

記事を保存・更新する前に、プレビューで目次を確認します。

確認するポイントは次の3つです。

  • 目次が1つだけ表示されている。
  • H2の見出しだけが表示され、H3以下は表示されていない。
  • 目次の項目をクリックすると、対応する見出しへ移動できる。

今回の実機検証では、目次を通常H3まで表示しているサイトで、対象記事だけH2までの表示に変更できました。

H3の見出し自体を削除する必要はありません。本文の見出し構造はそのまま維持できます。

スポンサーリンク






目次の深さを指定するときの注意点

サイト全体の設定より深い階層は表示できない

Cocoon公式では、ショートコードのdepthオプションを使って表示階層を指定できると説明されています。

ただし、ショートコードで指定できる深さは、サイト全体の「目次表示の深さ」の設定が上限です。

例えば、サイト全体でH3まで表示する設定の場合は、個別記事をH2までに制限できます。しかし、ショートコードだけでH4まで増やすことはできません。

目次が2つ表示された場合

通常の自動目次とショートコードの目次が重複している可能性があります。

対象記事の「目次を表示しない」にチェックが入っているか確認してください。

目次が表示されない場合

ショートコードの記述や、Cocoonの目次設定を確認してください。

また、Cocoon標準の目次ではなく、別の目次プラグインを利用している場合は、ショートコードの動作が異なる可能性があります。

目次の表示位置を変更したい場合

今回紹介した方法では、目次の表示階層だけでなく、配置する場所も選べます。

目次の配置方法については、別記事で詳しく紹介しています。

WordPress Cocoonで目次を好きな場所に配置する方法

よくある質問

ほかの記事の目次もH2までに変わりますか

いいえ。今回の方法では対象記事だけを変更します。サイト全体の目次表示の深さは変更しません。

H3の見出しは本文から消えますか

消えません。目次に表示されなくなるだけで、本文中のH3見出しはそのまま残ります。

CSSや追加プラグインは必要ですか

必要ありません。Cocoon標準のショートコード機能で対応できます。

まとめ

Cocoonでは、対象記事の「目次を表示しない」にチェックを入れ、表示したい位置に

を追加すると、その記事だけ目次をH2までに制限できます。

今回の実機検証でも、ほかの記事の設定を変えずに変更できることを確認しました。

目次が長くなりやすい解説記事や手順の多い記事では、読者が目的の項目を探しやすくなるよう、表示階層を調整してみてください。

参考資料

スポンサーリンク
タイトルとURLをコピーしました