はてなブログカスタマイズの記録④～目次～

当ブログは新しいブログに移転しました。
5秒後に新しいブログに切り替わります。

https://www.simplecore.site/

今後とも引き続きよろしくお願いいたします。

simplecore.site

f:id:simplecore:20170528164558j:plain

久々にはてなブログのカスタマイズの話をがっつりと・・・と思ったのですが、本業の方がかなり忙しく、このブログも自宅で仕事をしている合間に書いています。まあ、頼りにされている（恐らく）ということで、ありがたい話なのですが。

ということで、今日はサクッと終わる簡単なカスタマイズです。カスタマイズする箇所は個別記事ページ内の目次。これ、デフォルトだとかなり微妙じゃないですか？デフォルト感丸出しな感じがしてしまいます。

ただ、決してコンテンツのメインになる部分ではないので主張はしなくても良いです。なので、ここはあっさりとイイ感じに仕上げたいところです。

デフォルトだとこんな感じ
カスタマイズしてみる
追記したCSSはこちら

デフォルトだとこんな感じ

f:id:simplecore:20170528165341p:plain

う～ん・・・イマイチですね。個人的には、「目次」という見出しのインデントが気になりますし、フォントサイズも大きいような気がします。また、リンクが貼られたテキストの色も変えたいところです。

カスタマイズしてみる

早速、例のごとく開発者ツールをつかって修正していきます。

simplecore.hatenablog.com

考えているのはかなりシンプルな目次リストです。装飾もしないつもりなので、最初からCSSをいじっていきます。

で、こんな感じにしてみました。

f:id:simplecore:20170528170700p:plain

正直あまり変わっていないです。変更箇所は下記の通りです。

「目次」という見出しを「index」にして、左に寄せた
項目と項目の間を広げた
大見出しと小見出しのフォントサイズに差を付けた
テキストの色とボックスの背景色を変えた

追記したCSSはこちら

ul.table-of-contents {
    background: #f8f8f8;
}
ul.table-of-contents::before {
    font-size: 140%;
    font-weight: normal;
    content: 'index';
    margin-left: -15px;
}
ul.table-of-contents li{
　　margin-top:10px;
　　font-size:100%;
}
ul.table-of-contents li a{
　　color:#333;
}
ul.table-of-contents li a:hover{
　　color:#666;
}
ul.table-of-contents li ul li{
　　margin-top:5px;
　　font-size:90%;
}