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

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

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

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

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

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

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

目次

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

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

STEP

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

表示されたページでカスタマイズする

目次をカスタマイズする場所

カスタマイズする項目が変更できない場合は、スキン制御されているのが原因です。

スキン制御されている場合の表示のされ方

Cocoonでスキン制御の対処法は、下の記事を参考にしてください。

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これで目次をカスタマイズできます

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

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

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

「目次の表示」がある場所

「目次の表示」では

  • 目次を表示させるか

を決められます。

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

かめコンパス

目次は記事の内容をおおまかに伝えるために必要!

表示するページを選ぶ

「表示ページ」がある場所

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

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

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

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

かめコンパス

全ページに表示させよう

タイトルを入力する

「目次タイトル」がある場所

「目次タイトル」では、

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

ことができます。

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

かめコンパス

シンプルに目次でOK!

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

「目次切り替え」がある場所

「目次切り替え」では、

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

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

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

目次の表示切替を有効にしている場合と無効にしている場合の比較

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

かめコンパス

お好みでどうぞ

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

キャプションの表示

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

かめコンパス

「開く」「閉じる」のままでOK

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

目次内容を最初から表示している場合と非表示にしている場合の比較

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

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

を設定できます。

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

かめコンパス

閉じれいれば見逃されるので開いておこう

表示条件を設定する

「表示条件」がある場所

「表示条件」では、

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

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

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

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

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

かめコンパス

目次を表示する条件が緩い「1~2」がおすすめ

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

「目次表示の深さ」がある場所

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

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

の中から選べます。

かめコンパス

表示する見出しが深すぎたら目次が見づらくなるので、「H3~H4」までにしよう

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

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

「目次ナンバーの表示」がある場所

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

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

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

項目前に表示する数字の表示形式6つ
かめコンパス

個人的には数字がお気に入り

目次を中央に配置する

「目次の中央表示」がある場所

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

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

で表示設定できます。

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

かめコンパス

私は中央に配置してるよ

目次の表示順を決める

「目次の表示順」がある場所

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

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

を選べます。

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

かめコンパス

お好みでどうぞ

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

「見出し内タグ」がある場所

「見出し内タグ」では、

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

設定できます。

H見出し内タグが無効になっている場合と有効になっている場合の比較

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

かめコンパス

有効にする場合は強調する部分を多くし過ぎないようにしようね

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

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

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

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

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

STEP

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

「目次の表示」で「目次を表示する」の✔を外す

「目次を表示する」の✔を外している様子

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これですべてのページで目次が非表示になります

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

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

STEP

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

「表示ページ」で以下4つの中から非表示にしたいページの✔を外す

  • 投稿ページ
  • 固定ページ
  • カテゴリーページ
  • タグページ
「表示ページ」で目次を非表示にしたいページのチェックを外している様子

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これで✔を外したページで目次が非表示になります

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

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

STEP

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

「表示条件」で目次を表示させない見出し数の条件を決める

条件:「1~10」つ以上見出しがあるとき

「表示条件」で目次を表示させない見出し数の条件を決めている様子

例えば…条件を5つ以上見出しがあるときの場合
記事A:見出し数3つ⇒目次は表示されない
記事B:見出し数7つ⇒目次は表示される

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これで指定した条件内で目次が表示されます

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

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

STEP

記事編集画面で、設定をクリックする

「設定」がある場所
STEP

投稿にある「目次を表示しない」に✔を入れる

「目次を表示しない」がある場所
STEP

更新をクリックする

「更新」がある場所

これで個別に目次を非表示にできます

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

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

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

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

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

STEP

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

「目次の表示」で「目次を表示する」に✔を入れる

「目次を表示する」に✔を入れている様子

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これで目次が表示されます

かめコンパス

目次が全ページで表示されない場合に、1番可能性が高い原因です

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

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

STEP

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

「表示ページ」で以下4つの中から表示したいページに✔を入れる

  • 投稿ページ
  • 固定ページ
  • カテゴリーページ
  • タグページ
「表示ページ」で目次を表示したいページにチェックを入れている様子

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これで目次が表示されます

かめコンパス

固定ページでは表示されるが投稿ページでは表示されない場合に、1番可能性が高い原因です

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

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

STEP
まず、見出しの数を確認します

記事編集画面で、ドキュメント概観アウトラインの順にクリックする

「ドキュメント概観」、「アウトラインがある場所

上の画像では、見出し数が11つだと確認できます

STEP
次に、目次の表示条件を確認します

WordPress管理画面で、Cocoon設定目次の順にクリックする

「Cocoon設定」、「目次」がある場所
STEP

表示条件内にある「□つ以上見出しがあるとき」を記事の見出し数より少なく設定する

「表示条件」で見出しの数より少なく設定している様子

STEP1で見出し数が11つと確認できたので、□を1~10に設定する

かめコンパス

例えば見出し数が4つで設定を6にした場合、目次は表示されないよ

 スキン制御により設定を変更できない場合はこちら

STEP

変更をまとめて保存をクリックする

「変更をまとめて保存」がある場所

これで目次が表示されます

かめコンパス

任意のページだけ目次が表示されない場合に疑うべき原因です

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

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

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

STEP

記事編集画面で、設定をクリックする

「設定」がある場所
STEP

投稿にある「目次を表示しない」の✔を外す

「目次を表示しない」の✔を外している様子
STEP

更新をクリックする

「更新」がある場所

これで目次が表示されます

かめコンパス

本来、「目次を表示しない」にチェックされていないが、念のため確認しよう

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

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonで目次をカスタマイズする方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次