【はてなブログ】これだけやっておいたら満足なCSS（目次、Monokai風シンタックスハイライト）

はてなブログのブログテーマを試しにテーマストアのものに変更し、また公式テーマに戻したところ、以前設定して長年使っていたデザインCSSが消えていたということがあったので、自分にとっての必須設定をメモしておく。ほとんど公式のままだけどこれだけで満足。

「この記事の目次」用CSS
シンタックスハイライトをMonokai風にする
自分用まとめ

「この記事の目次」用CSS

下記参考記事そのまま（※文言のダブルクォート囲いの部分だけ修正が必要そう）
okane7.com

シンタックスハイライトをMonokai風にする

下記参考記事そのまま
wakalog.hatenadiary.jp

自分用まとめ

まとめるとこれだけ。特に大きなこだわりはないけどやっぱり使い慣れたものがしっくりくる。スマホ向けは「タイトル下」というところへの記述が必要で、pro版じゃないと編集できないところなので未対応。

/*この記事の目次*/
.table-of-contents:before{
content: “この記事の目次”;
font-size: 120%;
font-weight: bold;
}
.table-of-contents li,
.table-of-contents ul{
list-style-type: decimal;
}
.table-of-contents{
padding: 20px 10px 20px 40px;
border-radius: 5px;
background: #f5f5f5;
}
/*Monokai風シンタックスハイライト*/
.entry-content pre.code {
background-color: #272822;/*背景色*/
color: #F8F8F2;/*テキスト*/
}
.synComment { color: #75715E }      /*コメント*/
.synSpecial { color: #E6DB74 }      /*特殊文字*/
.synType { color: #66D9EF }         /*型*/
.synPreProc { color: #F92672 }      /*プリプロセッサ*/
.synStatement { color: #F92672 }    /*ステートメント*/
.synIdentifier { color: #F8F8F2 }   /*識別子*/
.synConstant { color: #AE81FF }     /*定数*/