Cocoonで目次の作り方とカスタマイズ｜おしゃれなデザイン設定もできる！

「ページ始めに目次を表示させたい…」

「目次の表示位置を設定できる？」

「おしゃれなデザインの目次に設定するには？」

この記事ではそんな方に向けて、Cocoonで目次の作り方とカスタマイズ方法を解説します。

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

• おしゃれな目次を作成できる

ようになります。

私もあなたと同じことに悩んでたのですが、本記事の方法でサクッと解決でき、疑問や悩みを解決する見出しにジャンプしてもらうことでユーザーの利便性を向上させることができました。

どこよりも分かりやすく書いている自信がありますので、あなたもパパッと解決してみてください！

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

本記事はWordPressテーマ「SWELL」で作成しているので、デザインが抜群にオシャレです！

Cocoon目次の作り方

Cocoonでは、記事内に見出しを入れることで自動的に目次を作成できます。

目次を作るためのCSS記述やプラグインを導入する必要はありません。

記事内に見出しを挿入する方法は、以下の4パターンあります。

これで目次を作成できますので、プレビューで確認してみましょう。

目次が表示されない場合、その対処法を下の記事で詳しく紹介しています。

ちなみにページにはH2見出しが挿入されますが、見出しのレベルをH3以下にすることで目次の表示が変わってきます。

見出しのレベルは、見出しブロックを選択して表示されるツールバーのH2をクリックすると変更できます。

見出しレベル「H1」は記事タイトル用なので使用しないでください。

作成した目次はどのレベルの見出しまで表示させるか、どの位置に目次を表示させるかなどカスタマイズ可能です。

この後は目次のカスタマイズ方法について詳しく解説していきます。

Cocoon目次のカスタマイズ設定10つ

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

目次でカスタマイズできる項目は以下の10つです。

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

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

「目次の表示」で目次を表示させるかどうか設定することができます。

目次はその記事に何が書かれているのか伝えるためにとても必要です。

また、目次に書かれている見出しはリンク化されており、興味のある見出しまでクリックでジャンプできますよ。

表示するページの種類を選ぶ

Cocoonでは目次を表示するページを「投稿ページ」「固定ページ」「カテゴリーページ」「タグページ」の4つそれぞれで設定できます。

目次の表示は投稿ページには必須で、それ以外は任意でOKです。

目次のタイトルを入力する

Cocoonで目次の上にラベル表示させるタイトルを設定できます。

デフォルトでは「目次」がタイトルに入力されていますが、自分の好きなテキストに変更できますよ。

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

「目次切り替え」では以下の3項目でカスタマイズできます。

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

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

目次の表示切替を有効にした場合と無効にした場合の違いは以下のとおりです。

お好みでOKです。

切り替えボタンのキャプションを変更する

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

デフォルトのままでOKです。

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

目次内容を最初から開いておくか設定できます。

目次内容は最初から開いておくことをおすすめします。

もし閉じていれば、目次があることに気づかれずスクロールされてしまうからです。

目次がないと思われてしまうとその記事にどんな内容が書かれているのか即座に理解できず、利便性の悪い記事だと認識されてしまうでしょう。

ですので、目次内容は最初から開いておきましょう。

表示条件を設定する

Cocoonでは見出しがいくつあれば目次を表示させるか設定できます。

ここで、見出し数と表示条件をある任意の数字にしたときに目次が表示されるか、いくつか例を挙げます。

見出し数	目次の表示条件	目次の表示/非表示
２	１	表示されない
5	8	表示されない
4	2	表示される

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

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

「目次表示の深さ」では、表示する見出しのレベルをH2~H6までの中から設定できます。

表示する見出しが深すぎたら目次が見づらくなるので、「H3」までがおすすめです。

目次ナンバーの表示形式を設定する

「目次ナンバーの表示」では、項目前に表示する数字の表示形式を以下の6パターンから設定できます。

目次の表示位置を選ぶ

Cocoonでは目次の表示位置を「左側」「中央」の2パターンから設定できます。

基本的に表示位置は中央がおすすめです。

目次の表示順を決める

「目次の表示順」では、最初の見出し手前に広告を配置しているとき、目次の表示位置を広告の前か後のどちらか選べます。

Googleアドセンスなどの広告収益メインで稼ぎたい場合は目次を広告の後に表示することをおすすめですよ。

見出しを装飾された状態で出力する

「見出し内タグ」では、見出しを装飾された状態で出力させるかどうか設定できます。

装飾により目次が見づらくなるのは避けたいですが、強調したい部分だけに装飾があるとその見出しを読んでもらえる確率が上がりそうですね。

Cocoonおしゃれなデザインの目次に設定する方法

Cocoonではスキンを変更することで目次のデザインを変えることができます。

スキンとは…サイト全体のデザインを変更できる機能のこと

Cocoon公式サイトにスキンページ閲覧ランキングという記事をもとに、スキン閲覧ランキングTOP10の目次のデザインを紹介します。(Cocoon公式サイトを参考に、執筆時点でのランキングです。)

おしゃれなデザインの目次が揃っているので、自分の好みに合ったものが見つかるでしょう。

当ブログ愛用「SWELL」の目次はデザインがおしゃれ+目次ボタンを画面右下に固定設置できる！

WordPressテーマ「SWELL」では以下の4種類から目次の表示デザインを選べます。

Cocoonでは目次のデザインを変更したい場合、サイト全体のデザインもあわせて変更しなければなりません。

SWELLではサイト全体のデザインをそのままに目次のデザインだけ変更できます。

また、どの目次も横幅いっぱいに表示されるので、文章が2~3行に改行されずに1行で収まる可能性が高まるでしょう。

さらに私も気に入っている大きな特徴として、目次ボタンを画面右下に固定設置できます。

目次ボタンをクリックすると目次の一覧が表示されます。

SWELLの魅力に気づき、当ブログでは2024年4月から「Cocoon」から「SWELL」へ乗り換えました。

Cocoon開発者のわいひらさんもCocoonからの乗り換え先としてSWELLをおすすめしていますよ。

Cocoonから他のテーマに乗り換える場合はSWELLな最も適しています。

引用：Cocoonから乗り換えるのにおすすめなテーマはこれ。注意点・変更方法など – Cocoon公式サイト

オシャレな目次作成と目次をデバイス画面に固定表示させたい方は、SWELLをチェックしてみてください。

Cocoon目次まとめ

今回は、Cocoonで目次の作り方とカスタマイズ方法を紹介しました。

目次を作ったら、以下のような「目次に戻る」リンクをページ内に挿入することも可能です。

_{＼クリックで目次へジャンプ！／}

目次に戻る

「目次に戻るリンクを作成したい！」という方は、以下の記事もご覧ください。

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