Cocoon 記事の目次(TOC)のデザインをカスタマイズする方法とデザインサンプル5つ

Cocoonの目次デザインをカスタマイズする方法

基本的な設定

デフォルトの目次デザイン

背景色を変更する

.toc{
 background-color: #dcd0c0;
}

文字色を変更する

.toc-title,
.toc a{
 color:#fff;
}

枠線を変更する

.toc{
 border: 0;
}

目次タイトルの背景色・文字色変更

.toc-title{
 background-color: #eee;
 color: #727272;
}

目次コンテンツの背景色・文字色変更

.toc-content{
 background-color: #eee;
}
.toc-content a{
 color:#727272;
}

目次のデザインサンプル

１．シンプル

.toc {
 background-color: #f7f7f7;
 border: 0;
}

２．枠線付き

.toc{
 background-color: #fff;
 border: 1px solid #333;
}

３．枠線が二重線

.toc{
 background-color: #fff;
 border: 3px double #c1c1c1;
}

４．グラデーション

.toc{
 background-image: linear-gradient(180deg,#eae0bf 10%,#f2f1ed 100%);
 border: 0;
}

５．ボックス風

.toc{
 background-color: #f9f9f9;
 border: 0;
}
.toc-title{
 background-color: #ddd;
 margin: -1em -1.4em 0.5em;
 padding: 0.6em;
}

さいごに