目次の文字を表示

まずは目次だから目次としっかり分かるようにしないとね、ということで「目次」の文字を表示するようにした。

以下をデザイン設定-デザインcssにコピペすればＯＫ。↓

.table-of-contents:before{
    content: "目次";
    font-size: 120%;
    font-weight: bold;
}

これをやることでだいぶ目次だという事が分かりやすくなったよ。
参考にしたのはこちらのブログ。↓
www.yukihy.com
ありがとうございます。

リストに番号表示を追加

番号が無いとなんか目次らしくない、数字ある方が目次らしいっしょ！
ということで目次に数字を追加。
以下をデザイン設定-デザインcssにコピペすればＯＫ。↓

.table-of-contents li,
.table-of-contents ul{
    list-style-type: decimal;
}

参考にしたのはこちらのブログ。↓
blog.kitoko552.com
ありがとうございます。

目次に背景色を追加

こちらも先ほどの番号表示を追加した際のサイトを参考にやった。ありがとうございます。
こちらも、以下をデザイン設定-デザインcssにコピペすればＯＫ。↓

.table-of-contents{
    padding: 20px 10px 20px 40px;
    border-radius: 5px;
    background: #f0f0f0;/*背景色はここから変更*/
}

変更前と変更後

変更前はこんなだったそっけない目次が↓

変更後はこんな感じに↓

少しおしゃれになったね目次Yeah！！！