【Cocoonカスタマイズ】目次にプラグインは不要！Cocoonの目次をカスタマイズする方法紹介

この記事は 約4 分で読めます。

Cocoonは最初から目次が表示されているため、
特にプラグインなど利用することなく、
自動的に目次が表示されています。

今回は、

Cocoonの目次の設定方法
CSSカスタマイズ例

を紹介していきます。

初期状態のままでも十分美しいので、
カスタマイズしたい人だけ試してみて下さい。

Cocoonの目次の設定方法
1. 目次が表示されない
CSSカスタマイズ例
まとめ

Cocoonの目次の設定方法

目次の設定は、

管理画面
Cocoon設定
目次タブ

から設定できます。

当サイトでは、以下のように設定しています。

見出しの役割は記事の構成をユーザーに
分かりやすく見せることです。

サイトの構成やコンテンツ量によりますが、
目次表示の深さを「H3タグまでを見出し」と
しておくとすっきりして見やすい目次になります。

新規投稿で適当に見出しを付けて、
プレビューしてみましょう。

目次が表示されない

仮に目次が表示されない場合は、
Table of Contents Plusというプラグイン
を利用しているか確認しましょう。

プラグインを有効にしている場合は、
無効にして目次を確認してみて下さい。

参考：[解決済] 目次が表示されない

CSSカスタマイズ例

これは当サイトで表示されている目次です。

このデザインのCSSはこちら↓

/***** cocoon 目次スタイル *****/
.toc {
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
　　border-top: 5px double #cccfd2;
　　border-bottom: 5px double #cccfd2;
    margin: 0 35px 10px;
}

.toc a {
    color: #666;
}

.toc-title {
    background-color: #f3f4f5;
    font-size: 20px;
    font-family: "M PLUS Rounded 1c";
}

.toc-content {
    font-size: 16px;
    font-family: "M PLUS Rounded 1c";
}

.toc.tnt-number-detail ol {
    font-weight: 700;
}

span[id^="toc"] {
    padding-top: 1.5em;
}

/* 目次ウィジェット */
.nwa .toc {
    border: 0;
　　width:100%;
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
　　border-top: 5px double #cccfd2;
　　border-bottom: 5px double #cccfd2;
}

/***** cocoon 目次スタイル *****/
.toc {
    margin: 0 auto 15px;
}
span[id^="toc"] {
    padding-top: 1.7em;
}

例のごとくコピペ可なので、
子テーマのCSSに張り付けてみてください。

時間ができたら他のデザインも紹介します。
(要望とかあればお問い合わせください。)