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

wordpress
Sponsor Link
この記事は 約3分 で読めます。

今回はCocoonに標準でついている目次に関するカスタマイズです
特に難しいことはしていないので、各々で調整をすればそのまま使える筈です

Cocoonの目次設定

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

スタイリング

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

本文中のコード

ソースコードを開く
/***** cocoon 目次スタイル *****/
.toc {
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
    border-top: none!important;
    border-bottom: none!important;
    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;
}

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

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

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

/* 目次ウィジェット */
.nwa .toc {
    border: 0;
    padding: 0 5px;
    margin: 1.2em;
    width: 300px;
    border-left: 5px double #cccfd2;
    border-right: 5px double #cccfd2;
}

こんな感じに装飾をしています、見た目はサイドバー部分を見てくださいね

モバイル表示用コード

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

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

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

おわり

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

[share]

タイトルとURLをコピーしました