Cocoonの目次デザインを3パターン作ってみたよ

目次のデザインが可愛いブログをよく見かけるけど、テーマで決まっとん？

デフォルトのデザインはテーマごとにあるけど、CSSで簡単にカスタマイズできるよ！

当ブログはテーマ「Cocoon」を使っているので、デフォルトの目次は結構シンプルなデザインになっています！

今回は、目次をカスタマイズするCSSを3パターン作ってみたので紹介したいと思います。

少しでも知識があればさらにカスタマイズすることも可能ですが、CSSを全く触ったことがない方でも、色やアイコンのカスタマイズができるようにわかりやすく紹介していこうと思います！

⬇️今回紹介するデザインはこんな感じ。

◆ sample❶　⇒シンプルに装飾！

◆ sample❷　⇒目立つように装飾！

◆ sample❸　⇒形を葉っぱ風に！

DEMO

とりとん

早速コードを確認してみよう！

この記事の内容は・・

コピペ用コード
1. 文字色・背景色をカスタマイズ
2. アイコンをカスタマイズ
WordPressにCSSを記述する方法
まとめ

コピペ用コード

sample❶

.toc{
    font-size: 1em;
    padding: 1em 2em 2em;
    background-color: #FCECEA; /*←背景色*/
    box-shadow: 5px 5px 8px rgba(0,0,0,0.1);
    border: none;
}

.toc-title {
    font-size: 1.2em;
    font-weight: 500;
    color: #EE817B;  /*←タイトルの文字色*/
    margin: 1em;
}

.toc-title:before {
    font-family: FontAwesome;
    content : "\f002"; /*←アイコン*/
    font-size: 1.2em;
    border-radius: 50%;
    color: #FFF; /*←アイコンの色*/
    background-color: #FAAFAA; /*←アイコンの背景色*/
    padding: 0.5em;
    margin-right: 0.5em;
}

.toc-content ol {
    position: relative;
}

.toc-content ol li {
    padding: 1em 0 0 1em;
    border-bottom: dotted 1px #FFB2AE  ;
    list-style: none;
}

.toc a {
    color: #928484 ; /*←見出しの文字色*/
}

.toc-content ol li:before {
    font-family: FontAwesome;
    content: "\f105"; /*←見出しアイコン*/
    color: #FAAFAA; /*←見出しアイコンの色*/
    position: absolute;
    left : 1em;
}

.toc-content ol li:last-child {
    border-bottom: none;
}

sample❷

.toc{
    font-size: 1em;
    padding: 1em 2em 2em;
    background-color: #FFD67D; /*←背景色*/
    border-radius: 20px;
    border: double 10px;
    border-color: #F69B65 !important;
}

.toc-title {
    font-size: 1.2em;
    font-weight: 500;
    color: #fff; /*←タイトルの文字色*/
    margin: 1em;
    background-color: #a9ceec; /*←タイトルの背景色*/
    padding: 0.5em 2em 0.5em 0.5em;
    border-radius: 20px;
}

.toc-title:before {
    font-family: FontAwesome;
    content : "\f19d";  /*←アイコン*/
    font-size: 1.2em;
    border-radius: 50%;
    color: #fff;  /*←アイコンの色*/
    padding: 0.5em;
    margin-right: 0.5em;
}

.toc-content ol {
    position: relative;
}

.toc-content ol li {
    padding: 1em 0 0 1em;
    border-bottom: dashed 1px #fff  ;
    list-style: none;
}

.toc a {
    color: #707070 ; /*←見出しの文字色*/
}

.toc-content ol li:before {
    font-family: FontAwesome; 
    content: "\f101"; /*←見出しアイコン*/
    color: #F69B65; /*←見出しアイコンの色*/
    position: absolute;
    left : 1em;
}

.toc-content ol li:last-child {
    border-bottom: none;
}

sample❸

.toc{
    font-size: 1em;
    padding: 1em 2em 2em;
    background-color: #C5E99B; /*←背景色*/
    border-radius: 130px 0;
    box-shadow: 5px 5px 8px rgba(0,0,0,0.1);
}

.toc-title {
    font-size: 1.2em;
    font-weight: 500;
    font-family: 'arial black';
    color: #77AF9C ; /*←タイトルの色*/
    margin: 1em;
}

.toc-content ol {
    position: relative;
}

.toc-content ol li {
    padding: 1em 0 0 1.2em;
    border-bottom: double 1px #fff  ;
    list-style: none;
}

.toc a {
    color: #757575 ; /*←見出しの文字色*/
}

.toc-content ol li:before {
    font-family: FontAwesome; 
    content: "\f06c";  /*←見出しアイコン*/
    color: #8CD790 ; /*←見出しアイコンの色*/
    position: absolute;
    left : 1em;
}

.toc-content ol li:last-child {
    border-bottom: none;
}

上記のコードをコピーしたら、文字色、背景色、アイコンをカスタマイズしてみましょう！