Cocoonの目次を非表示にする方法とそもそも目次が表示されない時の対策とは

「このページだけ目次を消したいのに、やり方が分からない」「そもそもCocoonの目次が表示されない」そんなモヤモヤを抱えていませんか。

この記事では、Cocoonの目次を非表示にする主なパターンを整理しつつ、「出したいのに出ない」ときのチェックポイントまでまとめていきます。

結論を先に言うと、「どのページの目次を消したいか」をはっきりさせてから、Cocoonの目次設定とページごとの設定、それでも足りない部分だけCSSで調整すれば、ほとんどのケースで思い通りに目次を非表示にできます。

Cocoonで目次を非表示にしたいパターン整理【最初に全体像】

目次を非表示にしたいケースとおすすめ方法

まずは、Cocoonの目次を消したい典型的なパターンを一覧にしておきます。

ケース	おすすめの非表示方法
サイト全体でCocoonの目次を使わない	Cocoon設定「目次」タブで「目次を表示する」のチェックを外す
特定の投稿だけ目次を消したい	投稿編集画面の「ページ設定」や「Cocoon設定」で、そのページだけ目次を非表示にする
固定ページ（問い合わせ・LPなど）だけ非表示にしたい	該当固定ページの個別設定で目次をオフ、必要に応じてCSSで調整
トップページ（固定ページ）だけ目次を出したくない	トップ用固定ページの個別設定＋足りない場合はページID指定のCSSで非表示
目次プラグインだけ消したい・二重表示を防ぎたい	プラグイン側の自動挿入を止めるか、Cocoonの目次かどちらか一方に統一
ごく一部のページをCSSだけで非表示にしたい	`.page-id-○○ .toc { display:none; }` のようにCSSでピンポイントに隠す

「この行が自分のケースだな」と思うものをひとつ決めておくと、この先どこを重点的に読めばいいかが分かりやすくなります。

Cocoon設定でサイト全体の目次を非表示にする【一括でOFF】

管理画面から目次機能をOFFにする手順

Cocoonにはテーマ標準の目次機能があり、デフォルトでは投稿や固定ページの先頭あたりに自動で目次を出してくれます。

これをサイト全体で止めたいときは、次の順番で操作します。

これで、Cocoonが自動で挿入していた目次は、サイト全体からまとめて消えます。

逆に、Cocoonの目次を使いたいのに表示されない人は、ここにチェックが入っているかを必ず最初に確認しておきましょう。

サイト全体でOFFにするメリット・デメリット

サイト全体の目次を非表示にする前に、ざっくりメリットとデメリットも押さえておきます。

項目	メリット	デメリット
管理のしやすさ	全記事の目次を一括で止められるので、設定がシンプル	「このページだけ目次を残したい」といった細かい調整はできない
デザイン面	別の目次プラグインや自作の目次とデザインがかぶらない	テーマ標準の目次デザインを活かせなくなる
SEO・導線	目次プラグインをひとつに絞ることで、内部リンク設計を管理しやすい	目次からの内部リンクが減り、読者の回遊が弱くなる可能性がある

ブログ記事が多いサイトなら、基本はCocoonの目次をオンにしたまま、不要なページだけ個別に目次を消すやり方のほうが、バランスは取りやすいと感じています。

特定の投稿や固定ページだけ目次を非表示にする【一番よく使う】

投稿・固定ページの設定から目次を非表示にする

Cocoonでは、投稿や固定ページごとに「このページでは目次を出すかどうか」を切り替えられます。

使う場所は、おおまかに次の2つです。

• 編集画面右側の「ページ設定」内にある「目次を表示しない」チェック
• 編集画面下部の「Cocoon設定」ボックス内にある目次の項目

テーマのバージョンや子テーマのカスタマイズによって表示位置は少し違いますが、「この投稿では目次を表示しない」というチェックやプルダウンが用意されていることが多いです。

迷ったときは、投稿編集画面の右サイドバーと、本文のすぐ下にある「Cocoon設定」あたりを探してみてください。

ざっくりとしたイメージを表にしておきます。

方法	特徴	向いているケース
ページ設定の「目次を表示しない」を使う	サイドバーからすぐオン・オフできて操作がシンプル	一部の記事だけサクッと目次を消したいとき
「Cocoon設定」ボックスの目次設定を使う	目次だけでなく広告やアイキャッチなど、他の項目も一緒に調整できる	その記事だけレイアウトを細かく整えたいとき

一度場所さえ覚えてしまえば、「あ、このページは目次いらないな」と思ったときに、数秒で非表示にできるようになります。

ショートコードで表示するページだけ目次を出す方法

もう少し細かくコントロールしたい場合は、ショートコードを使う方法もあります。

Cocoonには、目次専用のショートコード

が用意されていて、本文中の好きな位置に目次を表示できます。

例えば、こんな使い方ができます。

• ページ設定で「目次を表示しない」にして自動挿入を止める
• そのうえで、本文中の「ここに目次があると読みやすい」という位置に
  目次

  1. Cocoonで目次を非表示にしたいパターン整理【最初に全体像】
  2. Cocoon設定でサイト全体の目次を非表示にする【一括でOFF】
  3. 特定の投稿や固定ページだけ目次を非表示にする【一番よく使う】
  4. トップページだけCocoonの目次を非表示にする【固定ページ型サイト向け】
  5. プラグインやウィジェットの目次を非表示・整理する【二重表示を防ぐ】
  6. CSSでCocoonの目次を細かく非表示にするテクニック
  7. 「目次が表示されない」ときのチェックリスト【非表示との違い】
  8. 目次を非表示にする前に知っておきたいSEOと読者体験
  9. よくある質問【Cocoonの目次を非表示にするときのQ&A】
  10. まとめ【Cocoonの目次を非表示にするコツはパターン分け】
  を挿入する

こうすると、「自動で冒頭に出る目次」は消しつつ、「ここだけは目次を出したい」というポイントにだけ目次を置けます。

特定の長文記事だけ、少し凝った目次を作りたいときにも便利なテクニックです。

トップページだけCocoonの目次を非表示にする【固定ページ型サイト向け】

固定ページとしてのトップだけ目次をオフにする

トップページに使っている固定ページにも、先ほどの「ページ単位の目次設定」はそのまま使えます。

やることはシンプルで、次の通りです。

• フロントページに設定している固定ページの編集画面を開く
• 「ページ設定」や「Cocoon設定」ボックスから、目次を表示しない設定にする
• 更新して反映を確認する

これだけで、他の投稿記事には目次を残しつつ、トップページだけ目次を非表示にできます。

設定しても目次が消えないときはCSSで上書きする

環境によっては、設定を変えても目次が残ってしまうケースがあります。その場合は、ページIDを指定してCSSで目次を強制的に隠す方法も候補になります。

大まかな流れは次の通りです。

• トップページに使っている固定ページのIDを確認する（編集画面のURLなどから分かります）
• 「外観」→「カスタマイズ」→「追加CSS」や子テーマのstyle.cssを開く
• .page-id-○○ .toc { display:none; } のようなCSSを追記する

この方法なら、指定したページの目次だけピンポイントで非表示にできるので、他のページへの影響を最低限に抑えられます。

プラグインやウィジェットの目次を非表示・整理する【二重表示を防ぐ】

テーマ機能とプラグイン目次がかぶっている場合

Cocoonはテーマ側で目次を用意している一方で、「Table of Contents Plus」や「Easy Table of Contents」などの目次プラグインも人気があります。

両方を有効にしていると、本文の上にCocoonの目次、そのすぐ下にプラグインの目次、といった具合に二重表示されてしまうことがあります。

この場合は、次のどちらかに決めてしまうのがおすすめです。

• Cocoonの目次だけ使い、目次プラグインの自動挿入をオフにする
• 目次プラグインだけ使い、Cocoon設定の「目次を表示する」のチェックを外す

どちらを選ぶかは好みですが、「どっちも少しずつ使う」というメリットはあまりないので、基本的にはどちらかに統一したほうがスッキリします。

サイドバー（ウィジェット）の目次だけ非表示にしたいとき

Cocoonでは、ウィジェットの一覧に「目次」ウィジェットが用意されており、サイドバーやフッターにも目次を表示できます。

サイドバーの目次だけ非表示にしたいときの基本的な対処は次の2つです。

• 「外観」→「ウィジェット」から、目次ウィジェット自体をサイドバーから外す
• ウィジェットの表示条件（テーマやプラグインで設定可能な場合）を使い、特定ページでは出さないようにする

「本文の上の目次は残したいけれど、サイドバーの追従目次だけは邪魔に感じる」という場合は、まずここを見直してみてください。

CSSでCocoonの目次を細かく非表示にするテクニック

ページID・投稿タイプ別に目次を非表示にする

CSSでは、ページIDや投稿タイプを使って、「この種類のページでは目次を隠す」といった指定ができます。

代表的な指定のイメージを表にしておきます。

セレクタ例	対象	効果
.page-id-10 .toc	IDが10の固定ページの目次	そのページだけ目次を非表示にする
.single .toc	投稿ページ全体の目次	投稿タイプの記事の目次をまとめて非表示にする
.page .toc	固定ページ全体の目次	固定ページの目次だけを非表示にする
.page-id-10 .toc, .page-id-12 .toc	特定の複数ページの目次	指定したページの目次だけをまとめて非表示にする

どの場合でも、CSS側には display:none; を指定します。

HTML上には目次のブロックが残ったままになるので、「レイアウト上だけどうしても隠したい」というときに使いやすい方法です。

スマホだけ・PCだけ目次を非表示にする

メディアクエリを使えば、「スマホ表示のときだけ目次を消す」「PCのときだけ目次を隠す」といった切り替えも可能です。

考え方は次のようなイメージです。

• ある幅以下（スマホサイズ）の画面では、.toc に display:none; を指定する
• 逆に、一定以上の幅（PCサイズ）の画面だけで .toc を非表示にする

スマホユーザーは画面が狭いので、記事の冒頭に長い目次が並ぶと、本文までスクロールするのが少し大変です。

一方でPCでは目次があったほうが便利なことも多いので、「PCでは目次を残し、スマホではCocoonの目次を非表示にする」という割り切りも十分アリだと思います。

「目次が表示されない」ときのチェックリスト【非表示との違い】

Cocoon設定の「目次を表示する」にチェックがあるか

一番最初に見るのは、やはりここです。

• Cocoon設定 → 「目次」タブを開く
• 「目次を表示する」にチェックが入っているか確認する

チェックが外れていれば、Cocoonの目次機能自体がオフになっているので、どの記事にも目次は出ません。

チェックが入っているのに目次が出ない場合は、次からの項目を確認してみてください。

見出しの数と「表示条件」が合っているか

Cocoonの目次設定には、「見出しが〇個以上ある記事だけ目次を表示する」という条件を決める項目があります。

例えば、表示条件を「4つ以上見出しがあるとき」にしているのに、記事内の見出し（h2〜h3）が2つしかない場合は、条件を満たしていないので目次は出ません。

短めの記事でもかならず目次を出したいなら、この数字を小さくしておきましょう。

本文に見出しタグ（h2〜h6）が入っているか

Cocoonの目次は、本文にあるh2〜h6の見出しタグを拾って自動生成されます。

よくあるのが、次のようなパターンです。

• 太字や大きな文字で見出しっぽくしているが、ブロックは通常の段落のまま
• h4やh5だけを使っていて、h2やh3の見出しが1つもない

この場合、目次に載せる情報が足りず、思った通りに目次が出ないことがあります。

ブロックエディタなら「見出し」ブロックを使い、レベル（H2・H3など）も意図に合っているかをあらためて確認してみてください。

プラグインやキャッシュの影響を疑う

ここまで確認してもCocoonの目次が表示されない場合は、テーマ外の要因も考えられます。

例えば、次のようなものです。

• 別の目次プラグインがCocoonの目次と干渉している
• キャッシュ系プラグインで古いHTMLが残っており、目次の変更が反映されていない
• 独自テンプレートのカスタマイズで、目次を出すためのフック部分が外れている

一度、目次プラグインやキャッシュプラグインを止めてみて、Cocoonだけの状態でどうなるかを確認すると、原因の切り分けがしやすくなります。

目次を非表示にする前に知っておきたいSEOと読者体験

どんなページなら目次を非表示にしてもOKか

目次があると便利なのは事実ですが、すべてのページに必ず必要というわけでもありません。

目次を消しても問題になりにくい代表的なページタイプを整理しておきます。

ページタイプ	目次を非表示にしやすい理由
LP・セールスページ	読み進める順番をコントロールしたいので、目次から飛ばれてほしくない
問い合わせ・プロフィールなどの固定ページ	内容がシンプルで、目次を出すほどの情報量がない
画像ギャラリー系のページ	文章よりも写真や図が中心で、目次のメリットが小さい
ごく短いお知らせ記事	見出しが1〜2個しかなく、目次がかえって邪魔になる

逆に、ハウツー記事やレビュー記事など、見出しが多くてスクロールも長くなりがちな記事では、目次があるだけでかなり読みやすくなります。

「全部消す」より「必要なページだけ消す」がおすすめ

SEOと読者体験の両方を考えると、私としては次のような方針が扱いやすいと感じています。

• 基本方針：検索流入があり、情報量も多い記事では目次を残す
• 例外として：LP・問い合わせページ・短い固定ページなどでCocoonの目次を非表示にする

こうしておくと、「このページは目次があった方が親切だよね」という記事ではしっかり目次を活かしつつ、「ここは目次がむしろ邪魔」というページだけをピンポイントで隠せます。

よくある質問【Cocoonの目次を非表示にするときのQ&A】

Q1.Cocoonの目次を完全に非表示にしても大丈夫ですか？

A1. 動作上の問題はありませんが、全部消してしまうと長めの記事では不便になることも多いです。

目次は、記事全体の構成をひと目で見せたり、読みたいところへすぐ飛べたりする便利な機能なので、特にボリュームのある記事では残しておくのがおすすめです。

どうしてもCocoonの目次が好みに合わない場合は、Cocoon側の目次はオフにして、目次プラグインに切り替える方法も検討してみてください。

Q2.特定のカテゴリーだけCocoonの目次を非表示にできますか？

A2. 管理画面の標準設定だけではカテゴリー単位のON/OFFは用意されていませんが、テーマファイルを編集したり、条件分岐とCSSを組み合わせたりすれば実現できます。

ただし、コードの修正が必要になるため、テーマカスタマイズに慣れていない場合は、まずは記事ごとの設定やページIDを使ったCSSで対応したほうが安全です。

Q3.Cocoonの目次が突然表示されなくなりました。非表示の設定はしていません

A3. その場合は、次の順番で原因を切り分けてみてください。

• Cocoon設定 → 目次タブの「目次を表示する」にチェックが入っているか
• 表示条件と、記事内の見出し数が合っているか（条件より見出しが少なくないか）
• 本文にh2〜h3の見出しブロックがきちんと設定されているか
• 目次プラグインやキャッシュプラグインを止めて、Cocoonだけの状態で試してみる

多くの場合、このあたりを一つずつ確認していくと、どこかで原因が見つかるはずです。

まとめ【Cocoonの目次を非表示にするコツはパターン分け】

この記事のポイントを整理しておきます

今日からできる最初の一歩としては、まず自分のサイトの代表的な記事をいくつか開いてみてください。

そして、次のような視点でざっくりチェックしてみましょう。

• どの記事に目次が表示されているか
• 「このページは目次があったほうが読みやすい」「ここは目次がなくても問題ない」と感じるページはどこか

そのメモをもとに、この記事で紹介した手順を使って、「目次を残すページ」と「Cocoonの目次を非表示にするページ」を少しずつ整理していくと、サイト全体の見やすさがぐっと上がっていきます。