Cocoonの目次すごい便利ですよね。プラグイン無しでボタン一つで設置することができます。
ですがちょっとシンプルな気がしますね。
そんなCocoonの目次を有料のテーマのようにちょっとリッチにカスタマイズしてみようと思います。
勿論、パソコンとレスポンシブ（スマホ）両方に対応しています。
見た目としては、当ブログ「なぎちゃんねる」と同じ見た目になります。色などを変えてご自身で好きなようにカスタマイズしてもいいかもしれませんね。
cssのファイルにコピペするだけで大丈夫です。
CSSコード
以下のコードをそのままコピペしてください。
場所は「外観」⇒「テーマエディター」⇒「style.css」です。
/*目次のカスタマイズ
----------------------------------------*/
.toc {
padding: 0;
border: 3px solid #20d6a2;/*周りのボーダーの色を変更*/
border-radius: 3px;
width: 600px;
}
@media screen and (max-width: 480px){
.toc {
width: auto;
}
}
.toc-title {
font-weight: bold;
background: #20d6a2;/*目次の文字の背景の色を変更*/
padding: 0;
padding: .5rem 0;
box-sizing: border-box;
color: #fff;
}
.toc-content {
padding: 1em 6% 1em 10%;
font-weight: 700;
font-size: 18px;
color: #333;/*文字の色を変更*/
background: #e5ffde;/*全体の背景色を変更*/
}
@media screen and (max-width: 480px){
.toc-content {
padding: 1em 6% 1em 6%;
}
}
.toc-content ol {
counter-reset: li;
list-style: none;
}
.toc-content>ol>li {
position: relative;
margin: .8em;
}
.toc-list>li:before {
position: absolute;
left: -50px;
counter-increment: li;
content: counter(li);
background: #333;
color: #fff;/*文字の色を変更*/
border-radius: 50%;
display: inline-block;
width: 32px;
line-height: 32px;
font-size: 16px;
text-align: center;
}
.toc ol li ol {
list-style: decimal;
font-size: 1rem;
color: #555;
}
.toc ol li ol a {
color: #555;
}
いかがでしょうか？
カラーコードを変更すれば自分の好きなように色を変更することが出来ます。
色を決めるならこのサイト
カラーコードを見ることが出来ます。