ヒビラボでは、Cocoonをカスタマイズする方法やCSSコード（コピペ可）をまとめています。
Cocoonの目次設定方法とCSSカスタマイズについてまとめました。
目次とは
ブログの目次は、記事の見出しをリスト化したもので、読者が記事全体の構成を一目で把握できるようにするためのものです。
目次があることで、長い記事や詳細な情報を含む記事でも、読者がストレスなく読み進めることができます。ブログの記事が多岐にわたる場合や、深い情報を提供する場合には、目次があると非常に便利です。
記事の全体像を把握
目次は、記事全体の構成を一目で理解できるようにします。
目次を見れば、読者は記事全体の流れや主要なトピックを一目で理解できます。特に長い記事や複雑な内容では、目次があることで記事全体の概要をつかむのが容易になります。
読みたいセクションにアクセス
目次の各項目は、通常、対応する記事内のセクションへのリンクとして機能します。これにより、読者は興味のある部分にすばやくジャンプし、必要な情報を効率的に見つけることができます。
記事の読みやすさを向上させる
長い記事や詳細な内容の記事では、目次があることで読者は情報を簡単に探せるようになり、全体的な読みやすさが向上します。記事内のナビゲーションがスムーズになり、読者の満足度が高まります。
SEO効果を高める
目次は検索エンジンに記事の構造を明確に示し、SEO（検索エンジン最適化）の観点で有利になります。目次に含まれるキーワードが検索結果に反映され、記事の可視性を高めることができます。
当ブログの目次カスタマイズ
当ブログの目次カスタマイズは以下のとおりです。
- 目次全体→背景色を変える
- 目次のタイトル→背景色を変えてアイコンを追加する
- 目次の見出し→H2だけ太字にする
Cocoonの目次カスタマイズ方法
Cocoonの目次カスタマイズ方法は以下のようなものがあります。
【設定】目次は見出しを設定すれば自動でつくられる
目次は、見出しの文章がそのまま使用されます。
目次を作りたい場合は、見出しを使用する必要があります。
段落を追加するときに見出しを選択すれば、見出しを作成できます。
見出しの選択がない場合は「すべてを表示」をクリックしよう！
すでにある段落を見出しに変更することもできます。
すでに文章を書いた段落を見出しに変換する場合は、見出しにしたい段落を選択したらでてくるメニューの左端のボタンをクリックします。出てきたリストに見出しに変換するボタンがあります。
見出しにした後も、見出しの種類を変更できます。
【設定】目次の表示を消す
目次の表示を消す方法は以下のとおりです。
【Cocoon設定】→【Cocoon設定】→【目次】を選択します。
【目次の表示】→【目次を表示する】のチェックを外せば、目次を非表示にできます。
記事ごとに目次を非表示にすることもできる
記事ごとに目次を非表示にすることもできます。
記事作成中に右上にある【設定】から【投稿】→【ページ設定】→【目次を表示しない】にチェックを入れます。
【設定】目次のナンバーをドットに変更する
目次はデフォルトではナンバーが表示されています。
ナンバーではなくドットや資格で非表示にしたい場合は、【Cocoon設定】→【Cocoon設定】→【目次】を選択します。
【目次ナンバーの表示】で変更が可能です。
【設定】目次をサイドバーに表示する
目次をサイドバーに表示するには、目次ウィジェットを設置します。
【外観】→【ウィジェット】で目次ウィジェットを「サイドバー」もしくは「サイドバースクロール追従」に設置します。
- サイドバー→サイドバー上部に配置される
- サイドバースクロール追従→サイドバーの下部に配置される、スクロールしてもずっと横についてくる
【CSS】目次の背景色を変更する
目次の背景色を変更するCSSは以下のとおりです。
/* 目次の背景色を変更する */
.toc {
background-color: #f6f7f7; /* 目次の背景色を変更する */
border-color: #a8bcc8; /* 周囲のボーダーの色を変える */
}【CSS】目次のタイトル部分のみ背景を変更する
目次のタイトル部分のみ背景を変更するCSSは以下のとおりです。
/* 目次の背景色を変更する */
.toc-title{
background-color: #8195a2; /* 背景色を変更する */
font-size: 1.2em; /* 文字の大きさを変える */
padding: 0.3em; /* 文字の周囲の余白を変える */
font-weight: bold; /* 文字を太字にする */
color: #ffffff; /* 文字の色を変える */
}【CSS】目次のタイトル部分にアイコンを追加する
目次のタイトル部分にアイコンを追加するCSSは以下のとおりです。
/* 目次のタイトル部分にアイコンを追加する */
.toc-title:before {
font-family: 'Font Awesome 5 Free'; /* Font Awesome 5を使用するために指定 */
content : "\f03a"; /* Font Awesome 5のアイコン番号 */
font-size:20px; /* アイコンの大きさ */
margin-right:10px; /* アイコン右の余白 */
color:#a8bcc8; /* アイコンの色 */
background-color:#ffffff; /* アイコンの背景の色 */
border-radius: 50%; /* アイコンの背景を丸くする */
padding:8px; /* アイコン背景の余白 */
}Font Awesome の使い方は「【Cocoon】Font Awesomeアイコンの使い方｜表示されない理由とカスタマイズ」の記事で紹介しています。
【CSS】目次の文字の色を変える
目次の文字の色を変えるCSSは以下のとおりです。
/* 目次の文字の色を変える */
.toc a{
color:#5C676D; /* 文字の色 */
}【CSS】目次のH2見出しのみ太字にする
目次のH2見出しのみ太字にするCSSは以下のとおりです。
/* 目次のH2見出しのみ太字にする */
.toc-content ol li{
color: #8195a2; /* 文字の色 */
margin:0.5em; /* 文字の余白 */
}
.toc-list > li{
font-weight: bold; /* h2のみ太字にする */
}
.toc-list > li li{
font-weight: normal; /* h2以外を標準の太さにする */
}【CSS】サイドバーの目次のみデザインを変更する
サイドバーに目次ウィジェットを設置したとき、目次タイトルの背景が上部にくっついているのが気になったので周囲に余白を追加します。
サイドバーの目次のみデザインを変更するCSSは以下のとおりです。
/* サイドバーの目次のみデザインを変更する */
#sidebar .toc{
padding: 10px; /* 周囲の余白を変える */
}まとめ
目次は、読者が必要な情報に素早くアクセスできるようにするだけでなく、記事の構造を視覚的に示すことで、全体の理解を助けます。
ブログ記事の目次をカスタマイズすると、読者の利便性が向上し、視覚的に魅力的なナビゲーションが提供できるのでおすすめです。
