目次のカスタマイズ

id:pp_mary さんよりリクエストがありましたので目次のカスタマイズ方法を簡単にご紹介します。

目次の表示例

以下のCSSをコメントを参考に変更して、デザインCSSの末尾に貼りつけて下さい。

/* Haruni 目次デザイン */

.entry-content .table-of-contents {
    border: 2px dashed #fff;
    box-shadow: 0 0 0 10px #f6f6f6;
    padding: 20px 10px 20px 40px;
    list-style-type: decimal;
    border-radius: 6px;
    font-size: 90%;
    background: #f6f6f6;/* 背景色 */
    width: 88%;
    margin: 3rem auto;
}
.entry-content .table-of-contents:before {
    content: "目次";/* 目次の表記 */
    font-size: 120%;/*  目次の文字の大きさ */
    margin-left: -1em;/* 目次を左にずらす */
}

.entry-content .table-of-contents li {
    list-style-type: decimal;/* 番号振り */
}
.entry-content .table-of-contents li a {
    color:#333;/* 目次リストリンク色 */
    text-decoration:none;
}
.entry-content .table-of-contents ul {
    margin-left:1em;/* 中見出し小見出しの左余白 */
}
.entry-content .table-of-contents ul li {
    list-style-type: none;/*  中見出し小見出しで番号を消す */
}
.entry-content .table-of-contents ul li:before {
    content:"▶";/* 中見出し小見出し用のリストマーク */
    padding-right: 5px
}
@media (max-width: 480px) {
    .entry-content .table-of-contents {
        width: 78%;
    }
}

目次のカスマイズ例は以下の記事で公開しています。
blog.minimal-green.com
併せてご参照下さい。