はてなブログの目次をカスタマイズする

はてなブログって見出しを表示する記法がありますが、デフォルトだとめちゃくちゃダサいです。

このブログのテーマは「Evergreen」です。ここで表示される見出しの見た目をCSSを使ってカスタマイズしたいと思います。

見た目

見出しを表示すると以下のようになります。以下、画像なので実際のページはこちらです。

CSSコード例

以下をブログの設定から「デザイン」＞「カスタマイズ」＞「デザインCSS」にの項目に追記します。

 /* 見出し START */
ul.table-of-contents {
    padding: 36px 50px 14px 40px;
    display:inline-block;
    border-top: solid 5px #47a89c;
    background: #F9F9F9;
    box-shadow: 0 1.5px 2.4px rgba(0,0,0,.15);
    margin-bottom: 2.4em;
}

ul.table-of-contents::before {
    display: block;
    margin-bottom: 24px;
    content: "目次";
    color: #47a89c;
    font-size: 23px;
    font-weight: bold;
}

ul.table-of-contents > li {
    margin-bottom: 12px;
}

ul li {
    list-style-type: none!important;
}
  
ul li:before {
    content: "・";
    margin-right: 6px;
    color: #47a89c;
}

li {
    line-height: initial;
}
/* 見出し END */

ちょっとコードが汚いかな…？とりあえず色と線のと影を自分のオリジナルに修正すればいい感じの見た目になると思います。