【Cocoon】カスタマイズ | 目次編

今回はCocoonに標準でついている目次に関するカスタマイズです
特に難しいことはしていないので、各々で調整をすればそのまま使える筈です
2019/03/20追記：デザインを少し変えたのでCSSコードを変更しました

Cocoonの目次設定

設定自体はこんな感じにしています
目次の中央表示はあえてせず、モバイル表示の時だけCSSでセンター表示にしています

スタイリング

子テーマのstyle.cssへの追記です

本文中のコード

/***** cocoon 目次スタイル *****/
.toc {
    background-color: #f8f8f8;
    border: 6px double #a1aab3;
    margin: 0 35px 10px;
    padding: 3px 5px 0;
}
.toc a {
    color: #6c6c6c;
    text-decoration: none;
}
.toc a:hover {
    color: #4489ff;
    text-decoration: none;
}
.toc-title {
    font: 700 20px "M PLUS Rounded 1c";
    text-align: left;
    padding: 5px 15px 0;
}
.toc-title::before {
    color: #8b9aa7;
    font-family: Fontawesome;
    content: "\f0c9";
    margin-right: 10px;
}
.toc-content {
    font: 16px "M PLUS Rounded 1c";
}
.toc.tnt-number-detail ol {
    font-weight: 700;
}
span[id^="toc"] {
    padding-top: 1.5em;
}

こんな感じの装飾をしています、実際の見た目は記事中の目次を見てくださいね

ウィジェット部分のコード

ウィジェットのサイドバースクロール追従部分に[c]目次を入れています

/* 目次ウィジェット */
.toc-widget-box {
    max-height: 50vh;
    overflow-y: auto;
}
.nwa .toc {
    background-color: #fff;
    border: 0;
    padding: 0 3px;
    margin: 1.2em;
    width: 95%;
    border-left: 5px double #cccfd2;
}

こんな感じに装飾をしています、見た目はサイドバー部分を見てくださいね
追記：項目が多い時にスクロールバーが出るように変更しました
指定するセレクタは.toc-widget-boxです

モバイル表示用コード

モバイル表示(スマホなど)の時はセンター表示にしたかったので
メディアクエリ768以下＆480以下へ以下を追加

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

marginを変更することでセンター表示にしています

おわり

いかがだったでしょうか？指定の方法などは各々のサイトに合わせて調整は必要ですが
指定クラスが分かれば変更もしやすいと思います
目次の部分のカスタマイズをしたいんだよなーっていう方の参考になれば幸いです

[share]