えとくしゅふ

引きこもり主婦のあれこれと商品レビューなど

【UnderShirt 目次カスタマイズ】 目次の数字を消す

f:id:monmonb:20190308123402j:plain

 はてなブログのテーマをUnderShirtにし、目次の数字を消すために奮闘した備忘録です。THE LITTLE ESCAPE様の目次サンプルをお借りしました。

 

 

 

もともとの目次表示

f:id:monmonb:20190308123450j:plain

 テーマを設定して何もいじらなければこんな感じです。

 

 数字が頭にあるとランキング式の記事でなにがなんだか分からなくなってしまうので今回は数字ではなく、アイコンで表示されるようにCSSを調整していきます。

 

 

目次のデザインごと変える

 数字表記だけどうにかなくせないかといろいろやってみましたが上手くできませんでした。探していたら好みの目次サンプルがあったのでコピペでまるっと変えてしまいます。

 

 

デザイン参考記事

kimix.hatenablog.com

 

 こちらのブログから「目次サンプル6」のCSSをお借りして調整しました。

 

 

CSS入力

f:id:monmonb:20190308124308j:plain

 コピペでそのまま入れてみるとこんな感じです。

 

  • アイコンの位置ズレ
  • 「目次」のCSSが反映されていない

 

調整後↓

f:id:monmonb:20190308131356j:plain


 ちょっと調整すればこんな感じ。

 

 文字サイズや色を自分好みに調整すればUnderShirtにも合うシンプルオシャレな目次になります。
 

 

アイコン変更・位置修正について

etc-syuhu.hateblo.jp

 

 

 

目次タイトルが反映されない場合

etc-syuhu.hateblo.jp