コピペでOK!CSSでカスタマイズCocoonの目次デザインを3パターン作ってみたよ

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

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

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

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

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

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

sample❶ ⇒シンプルに装飾!

sample❷ ⇒目立つように装飾!

sample❸ ⇒形を葉っぱ風に!

DEMO
とりとん
とりとん

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

コピペ用コード

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

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

文字色・背景色をカスタマイズ

color: #【カラーコード】 ;・・文字色

background-color: #【カラーコード】 ;・・背景色

上の2つの【カラーコード】に好きな色のカラーコードを記述すればOK!

ちなみに、私は見栄えのいい色の組み合わせを探すことができるこちらのサイトをよく使っています。

アイコンをカスタマイズ

content: “\【アイコンコード】”;・・アイコン

こちらからアイコンを選んで、アイコンの右横にある4桁の英数字を【アイコンコード】に記述すればOK!

WordPressにCSSを記述する方法

全体に適用した場合は、「ダッシュボード」→「外観」→「テーマエディタ」のスタイルシートに記述。

各ページで適用したい場合は、投稿編集ページの一番下にある「カスタムCSS」に記述すればOKです!

CSSやclassについての簡単な説明から便利なデベロッパーツールの使い方など・・

WordPressのカスタマイズ方法として、既存のHTMLにCSSを追加・修正する手順を

初心者向けに書いたのでよかったら参考にしてみて下さい⬇️

まとめ

Cocoonは無料テーマなのに様々な便利な機能が備わったおすすめのテーマです。

今回紹介したCSSを適用させることで、もっと好みのデザインにすることができるのでやってみてください!

当ブログは、WordPressのカスタマイズ方法を紹介していますが、直接のご依頼も受け付けています♪

こういうデザインにしたい!

試してみたけどできなかった・・

などの簡単な修正でしたらワンコインから受け付けていますのでTwitterのDMからお気軽にご連絡ください^^

簡単なのでぜひやってみてください〜

最後まで読んでいただきありがとうございました!

タイトルとURLをコピーしました