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

Cocoonの記事の目次（TOC）のデザインをカスタマイズする方法と、デザインサンプルを紹介します。
背景色、文字色、枠線の変更などをすることができます。

編集するのはスタイルシート（CSS）のみです。

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

背景色、文字色、枠線などのカスタマイズ方法です。
よく分からない人、面倒な人は下のデザインサンプルから気に入ったものをコピペして使ってください。

基本的な設定

目次を自動で表示するか、どの見出し階層まで表示するか（深さ）、表示テキストの変更などの基本的なことは、Cocoon設定内の[目次]タブ内で設定することができます。

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

Cocoonデフォルトの目次は薄いグレーの枠線のみのさっぱりしたデザインです。

背景色を変更する

.toc{
 background-color: #dcd0c0;
}

背景色を変更するには、「toc」というセレクタの「background-color」に色を指定します。

文字色を変更する

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

「toc-title」は目次タイトル、「toc a」は目次コンテンツ内の文字列（リンク）です。

枠線を変更する

.toc{
 border: 0;
}

枠線を変更するには「toc」の「border」を変更します。
ここでは「0」を指定して、枠線を非表示（なし）にしています。

線の太さや色、種類を変更することもできます。

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

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

目次タイトルの部分を変更するには「toc-title」というセレクタ（クラス）を使います。

「background-color」で背景色を、「color」で文字色を指定します。

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

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

目次コンテンツ（見出し）部分は「toc-content」というセレクタで扱われています。

ただし、文字色に関してはCocoonの親テーマで「toc a」に「color:#333」の指定がされているので、ここでは「toc-content a」を使って上書きしています。

目次のデザインサンプル

いくつかデザインサンプルを作りました。
どれも色を変えるだけでアレンジしやすいと思います。

１．シンプル

.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;
}

目次タイトルの背景色を全体よりもすこし濃い色にして、ボックスのようなデザインにしています。

さいごに

目次はデフォルトのデザインのままのブログも多いと思いますが、簡単に変更できるので、ブログのイメージカラーと合わせると全体のデザインに馴染んで良いと思います。