simplecoreな毎日

アラフォー既婚男性の日々、仕事、子育て、副業、その他雑記

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

f:id:simplecore:20170528164558j:plain

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

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

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

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

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%;
}

デザインCSSにコピペすればつかえると思いますので(テンプレートによるかも知れないですけど)、もしよかったら数値や色を好きなものに変えてつかってください。