【Cocoon】目次機能の使い方を詳細解説!表示されない原因もチェック

【Cocoon】目次機能の使い方を詳細解説!表示されない原因もチェックCocoonの使い方

今回は『Cocoonの目次機能の使い方』を解説していきます。

Cocoonならプラグイン不要で目次を設置できますが、表示位置などの細かい設定も簡単に行うことができます。

最後には『目次が表示されない原因』もまとめていますので、ぜひ参考にしてみてください。

 

動画でも解説しています。

スポンサーリンク

Cocoonの目次機能の使い方

Cocoonの目次機能は『Cocoon設定 ⇒ 目次』で設定できます。

Cocoon設定の目次機能

いくつか設定項目がありますので、以下で詳しく解説していきます。

目次の表示

目次の表示

Cocoonで目次を表示させるには、こちらの『目次を表示する』にチェックを入れます。

目次が表示されないときは、まずこちらにチェックが入っているか確認しましょう。

表示ページ

表示ページ

ここでは目次を表示させるページを選択します。

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

投稿ページはブログの記事ページになりますので、必ずチェックを入れておきましょう。

他の3つは必要であればチェックを入れてください。

 

なお、記事の投稿画面の『ページ設定』メニューには、『目次を表示しない』のチェック欄があります。

『ページ設定』メニューの『目次を表示しない』

特定の記事だけ目次を表示させたくないときに便利なので、合わせて覚えておきましょう。

目次タイトル

目次タイトル

こちらで設定したタイトルが目次上に表示されます。

目次タイトルの例

『目次』や『content』など、お好みで設定してください。

目次切り替え

目次切り替え

『目次の表示切り替え機能を有効にする』にチェックを入れると、読者が目次の『開く/閉じる』を選択できるようになります。

目次の『開く・閉じる』を選択

このとき『最初から目次内容を表示する』にもチェックを入れておけば、最初から目次が開いた状態になります。

 

また、『目次の表示切り替え機能を有効にする』チェックを外すと、読者は目次の『開く/閉じる』を選択できず、常に開いた状態になります。

目次が常に開いた状態

表示条件

表示条件

Cocoonの目次には、H2やH3などの見出しが表示されています。

『表示条件』では、何個以上見出しがある記事に目次を表示させるかを設定します。

目次が表示されないときは、そもそも見出しタグを使って見出しを設定しているか?

また、表示条件の個数以上の見出しを設定しているか確認しましょう。

 

ちなみに見出しタグの使い方はこちらの記事で解説していますので、合わせて参考にしてみてください。

【ブログ記事】上位表示して集客できる!見出し構成の作り方
ブログ記事を書くときは、先に見出し構成を作るのがオススメです。見出しを作ってから本文を書いたほうが、迷わず書きやすくなるからです。そこで今回は『ブログ記事の見出し構成の作り方』を解説していきます。

目次表示の深さ

目次表示の深さ

『目次表示の深さ』では、H2~H6まで、どの見出しまで目次に表示させるか設定します。

個人的なオススメは『H3』か『H4』ですが、長い記事が多い方は『H2』まででも良いと思います。

なお、この目次表示の深さは、記事ごとに変更することはできません。

自分のブログ全体で適切な設定を考えてみてください。

目次ナンバーの表示

目次ナンバーの表示

『目次ナンバーの表示』では、リストの表示形式を選択できます。

  • 表示しない
  • 数字(デフォルト)
  • 数字詳細(ex:1.1.1)
  • ドット(黒丸)
  • ドット(白丸)
  • 黒四角

 

【例:数字(デフォルト)の場合】
目次ナンバーが数字(デフォルト)の場合

それぞれ試してみて、お好みの設定を選んでみてください。

目次の中央表示

目次の中央表示

『目次の中央表示』にチェックを入れると、目次が真ん中に表示されます。

チェックを外すと目次が左寄せになります。

どちらかと言えば中央寄せにしているブログが多く見栄えも良いので、個人的にはチェックを入れておいたほうが良いと思います。

目次の表示順

目次の表示順

『目次の表示順』は、Cocoon設定の『広告』機能(アドセンスなど)を利用している場合に必要な設定箇所です。

チェックを入れると、目次が先で、広告が後に表示されます。

チェックを外すと、広告が先で、目次が後に表示されます。

読者にどちらを先に見てもらいたいかを考えて設定しましょう。

見出し内タグ

見出し内タグ

『見出し内タグ』は目次ではなく、見出しの機能です。

こちらにチェックを入れると、見出しの文字を装飾した場合などに反映されます。

例えば『見出し内タグ』を入れて、見出しの文字の背景色を黄色にすると、このようになります。

『見出し内タグ』にチェックを入れた場合の例

見出しの文字を装飾したい方は、試してみてください。

スポンサーリンク

目次の設定が反映されない原因は?

ここまで解説してきた目次の設定が反映されない方は、プラグインの『Table of Contents Plus』を利用している可能性があります。

Table of Contents Plus

Table of Contents Plusは目次用のプラグインのため、有効化していると、Cocoonの目次機能より優先されます。

ですから、Cocoonを利用するならTable of Contents Plusは不要です。

特に、Cocoonにテーマ変更した方は、以前利用したプラグインがそのまま残っている可能性がありますので、気を付けましょう。

【最後に】目次が表示されない原因

今回は『Cocoonの目次機能の使い方』について解説してきました。

最後に目次が表示されない原因をまとめておきます。

  • 目次の表示:チェックを入れる
  • 表示ページ:『投稿ページ』にチェックを入れる
  • 表示条件:設定数以上の見出しを記事に入れる
  • 目次表示の深さ:記事の見出しタグの深さに合わせる
  • WordPress、テーマ、プラグイン、PHPのバージョンは最新か?
  • 他プラグインとの相性が悪い:一つずつ停止してみる

目次が表示されないときは、上から順番に設定を確認してみてくださいね。

タイトルとURLをコピーしました