【Cocoon】目次のカスタマイズと表示されないときの対処法4選

「目次のカスタマイズ方法は？」

「目次を非表示にしたい」

「目次が表示されない、どうして？」

この記事では、そんな方に向けて、Cocoonで目次の設定方法【プラグインなし】を解説します。

この記事を読めば、あなたも簡単に

• 目次をカスタマイズする方法
• 目次を非表示にする方法
• 目次が表示されないときの対処法

が理解できるようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でパパッと解決できました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

Cocoonで目次のカスタマイズ方法

Cocoonで目次をカスタマイズする方法は、下記の通りです。

Cocoonで目次をカスタマイズできる項目は、下記10つあります。

それぞれ詳しく解説します。

目次を表示させるか決める

「目次の表示」では

• 目次を表示させるか

を決められます。

目次を表示させたい場合は✔を入れましょう。

表示するページを選ぶ

「表示ページ」では、目次を表示するページを

• 投稿ページ
• 固定ページ
• カテゴリーページ
• タグページ

の4つの中から選べます。

表示したいページに✔を入れましょう。

タイトルを入力する

「目次タイトル」では、

• 目次にタイトルをつける

ことができます。

目次と分かるようなタイトルを付けましょう。

目次の表示切り替えボタンを設定する

「目次切り替え」では、

• 目次の表示切替を有効にする
• 切り替えボタンのキャプションをつける
• 最初から目次内容を表示する

かどうかカスタマイズできます。

目次の表示切替を有効にする

「目次の表示切替機能を有効にする」に✔を入れると、キャプションをクリックして目次を開いたり閉じたりできます。

切り替えボタンのキャプションをつける

目次を開くとき・閉じるときのキャプションを付けられます。

最初から目次内容を表示する

「最初から目次内容を表示する」では、

• 最初から目次を開いておくかどうか

を設定できます。

目次を開いておきたい場合は✔を入れましょう。

表示条件を設定する

「表示条件」では、

• どのくらい見出しがあれば目次を表示させるか

をカスタマイズできます。

目次を表示させる条件を、見出しの数が「1~10つ以上の場合」の中から選べます。

「2」を設定すると見出しが2つ以上あれば目次が表示され、

「10」を設定すれば見出しが10つ以上ないと表示されません。

表示する見出しの深さを決める

「目次表示の深さ」では、

• 表示する見出しの深さをH2~H6まで

の中から選べます。

Cocoonで見出しについて詳しく知りたい人は、下の記事を参考にしてください。

表示する見出しに数字を入れる

「目次ナンバーの表示」では、項目前に表示する数字の表示形式を

• 表示しない
• 数字
• 数字詳細
• ドット（黒丸）
• ドット（白丸）
• 黒四角

の6つの中から選べます。

目次を中央に配置する

「目次の中央表示」では、

• 目次を左側と中央のどちらか

で表示設定できます。

中央に表示させたい場合は✔を入れましょう。

目次の表示順を決める

「目次の表示順」では、最初の見出し手前に広告を配置しているとき

• 目次を広告の前と後のどちらに表示するか

を選べます。

広告の手前に目次を表示する場合は、✔を入れましょう。

見出しをカスタマイズされた状態で出力する

「見出し内タグ」では、

• 見出しをカスタマイズされた状態で出力するかどうか

設定できます。

見出しをカスタマイズされた状態で出力したい場合は、「H見出し内のタグを有効にする」に✔を入れましょう。

Cocoonで目次を非表示にする方法4例

Cocoonでは下記4通りで目次を非表示にできます。

それぞれ詳しく解説します。

全てのページで目次を非表示にする

Cocoonで全ページの目次を非表示にする方法は、下記の通りです。

ページ別で目次を非表示にする

Cocoonでページ別での目次を非表示にする方法は、下記の通りです。

見出しの数次第で目次を非表示にする

Cocoonで見出しの数次第で目次を非表示にする方法は、下記の通りです。

個別で目次を非表示にする

Cocoonで個別で目次を非表示にする方法は、下記の通りです。

Cocoonで目次が表示されない原因と対処法4選

Cocoonで目次が表示されない原因は、下記4つが考えられます。

それぞれの対処法を詳しく解説します。

「目次を表示する」にチェックが入っていない

1つ目：「目次を表示する」にチェックを入れると目次が表示されます。

目次を表示させたいページにチェックが入っていない

2つ目：目次を表示させたいページにチェックを入れると目次が表示されます。

目次の表示条件を満たしていない

3つ目：目次の表示条件を満たすと目次が表示されます。

Cocoonで見出しの設定方法が分からない場合は、下の記事を参考にしてください。

「目次を表示しない」にチェックが入っている

4つ目：「目次を表示しない」にチェックを入れると目次が表示されます。

当ブログ使用「SWELL」は目次が見やすくてオシャレ！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

SWELLでは、以下4パターンから目次のデザインを選べます。

_{＼クリックで拡大／}

私がCocoonで使っていた「イノセンス」では、目次が横幅いっぱいに表示されなかったので、

見出しの文字数が多くなると2～3行で表示されるので、読みづらくなってました。

Cocoonではスキンが100種類以上もあり、スキンを変更すればよかったのですが、

イノセンスのデザインが好きだったので、当時はスキンを変更せずに使ってました。笑

ただ、CocoonからSWELLへ乗り換えて、私が目次の表示で大事にしている

• 横幅いっぱいに目次が表示されること
• デザインがおしゃれ

の2つをSWELLが満たしてくれたので、とても気に入ってます。

まとめ：目次でページの中身を伝えよう

今回は、Cocoonで目次の設定方法【プラグインなし】を紹介しました。

目次を作ったら、記事中に「目次に戻る」ボタンを挿入することも可能です。

また以下の記事では、目次以外のカスタマイズ方法も紹介してますので、あわせてご覧ください。