【Cocoon】目次に仕切りをつけて見やすくカスタマイズ

こんにちは、やまりょう（Twitter）です。

ここではCocoonの目次をカスタマイズする方法を紹介します。

デフォルトのデザインが見出し同士が詰まって見づらかったので、少し見やすくアレンジしてみました。

cssレイアウトの基礎となる「displayプロパティ」も使っているので、初心者はカスタマイズの勉強がてら使ってみてください。

Cocoonの目次を見やすくカスタマイズ

今回のカスタマイズで実装できる目次がこちら。

見出し同士の間隔をちょっと広くして、点線の仕切りを入れることで見やすくしています。

記事の概要を伝えるのが目次の役割なので、目次を付けるからにはちょっとでも分かりやすくしておきたいですね。

今回のカスタマイズのポイントは3つ。

簡単なので１つずつ見ていきましょう。（解説が面倒な人はこちらよりcssをコピペしてください）

１、目次タイトルの装飾をカスタマイズ

まずは、目次タイトルの装飾をちょっとカスタマイズ。

（ちみに目次の表示設定は「Cocoon設定」→「目次」で行えます。）

目次タイトルは単純に文字の色と太さを変更しただけ。

.toc-title {
    font-weight: bold;
    color: #499eda;
}

「font-weightプロパティ」を使って文字の太さを変え、「colorプロパティ」で色を指定しています。

デフォルトは全く装飾されていないので、これだけでも結構パッとするはず。

目次の枠線を調整

ついでに目次の枠線も見ておきましょう。

目次の枠線には「Cocoon設定」→「全体」で設定したサイトキーカラーが適用されるので、目次タイトルもそれに合わせると馴染みます。

ちなみにうちは、サイトの印象に合わせて目次の枠線を角丸にしてます。

.toc {
    border-radius: 4px;
}

２、見出し同士の間隔を調整

続いて見出し同士の間隔を調整していきます。

ここが最重要ポイントですね。

今回は見出しの各要素同士（aタグ）の上下の間隔を「marginプロパティ」を使って調整します。

しかし「aタグ」はインライン要素なので、このままでは上下の余白を指定することができません。

.toc a {
    display: block;
    margin: 10px 0px;
}

ブロック要素になったら、あとは「marginプロパティ」を使って上下の間隔を調整するだけですね。

今回は10pxにしてますが、値はお好みで変更してみてください。

要素の表示形式はcssでレイアウトしていくうえでとても重要な知識なので、あやふやな人は一度確認しておくと良いですよ。

３、見出し間に仕切り（点線）を付ける

見出し同士の間隔を調整するだけでもかなり見やすくなるんですが、さらに仕切り（点線）を付けることでよりハッキリさせてみました。

.toc-content ol li {
    border-top: 1px dotted #ddd;
}

「border-topプロパティ」を使って、リストで表示されている各要素の上に点線を入れてます。

ちなみに、一番下にも点線を入れたい場合は下記のcssを使ってください。

.toc-content ol li:last-child{
    border-bottom: 1px dotted #ddd;
}

個人的にはない方が好きなんで使ってないんですが、各自お好みでどうぞ。

【まとめ】displayプロパティを使う意味を理解しよう

最後にコピペ用にcssをまとめておきます。

/*目次
===================================*/
.toc-title {
    font-weight: bold;
    color: #499eda;
}
.toc {
    border-radius: 4px;
    margin-top: 80px;
}
.toc a {
    display: block;
    margin: 10px 0px;
}
.toc-content ol li {
    border-top: 1px dotted #ddd;
}

今回のポイントは要素の表示形式でした。

displayプロパティは頻繁に使うので、「要素の表示形式の初期値」を各要素（htmlタグ）ごとにしっかり把握しておくことが重要ですね。

レイアウトの肝となる部分なので覚えておきましょう。

分からない点や上手くいかない点がございましたら、Twitterなんかで構いませんのでお気軽にお問い合わせください！