ここでアフィリエイターデビューしませんか?
このサイトで学べることは?

【カスタマイズ】Cocoonの目次をカスタマイズする

メニュー 2.サイトの作り方
スポンサーリンク
この記事は 約4 分で読めます。

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

今回は、

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

を紹介していきます。

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

Cocoonの目次の設定

目次の設定は、

  1. 管理画面
  2. Cocoon設定
  3. 目次タブ

から設定できます。

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

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

サイトの構成やコンテンツ量によりますが、
目次表示の深さを「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に張り付けてみてください。

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

まとめ

目次のカスタマイズはできましたか?

Cocoonの利用者は多いので、
いろいろなサイトを見て、
デザインを参考にしてみてください。

コメント