ブログデザイン備忘録 ~目次デザイン設定変更

1. リスト・目次のデザイン

　以前、記事ごとにリストや目次のデザインを適用する方法について紹介したが、今回ははてなブログ全体の目次のデザイン設定を変更したので方法を紹介する。

atatat.hatenablog.com

2. 目次のデザイン設定

前提としてデザインテーマはSmoothを用いている。目次のデザイン設定を変更するには、デザイン設定のデザインCSSに以下のコードを追記する。

.table-of-contents {
    padding: 15px 15px 15px 15px;
    font-weight:bold;
    font-size: 120%;
    border:solid 2px green;
    background:#F3FFD8 !important;
    border-radius:8px;
}
.table-of-contents:before {
    content: "目次";
    font-size: 130%;
    font-weight:bold;  
    color:#336633;
}

設定後、目次を挿入すると以下のようになる。

1. リスト・目次のデザイン
2. 目次のデザイン設定
3. まとめ

セレクタは.table-of-contentsとしてCSSでスタイルを指定していく。目次にタイトルを入れる場合は疑似要素:beforeを用いてcontent:"タイトル";とする。毎回適用されるので無難なもの(今回は目次)がよいと思う。 backgroundはそのままだと変更できず、!importantを入れて優先順位を上げることで変更できた。

なお!importantを入れると以後のスタイル変更が無効になってしまうため(CSSで!importantを使った優先順位の変更方法 | TechAcademyマガジン)、上のコードはなるべくデザインCSSの最後の方に入れるとよいかもしれない。