えとくしゅふ

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

【UnderShirt 目次カスタマイズ】目次のアイコン設定とズレ修正

f:id:monmonb:20190308133419j:plain 

 

 はてなブログUnderShirtを設定し、THE LITTLE ESCAPE様の目次サンプルをお借りしたカスタマイズです。 

 

参考記事

 

CSS全体について

kimix.hatenablog.com

 こちらの記事から目次サンプル6を使わせていただいています。

 

微調整について

samemai.com

 こちらの記事からアイコンの位置修正について参考にさせていただきました。

 

 

当ブログはアイコンの変更と修正などの微調整をした備忘録です。

 

 

アイコン微調整

 

 アイコンに関しては teble-of-contents 段落を調整します。

 下の方にあるので頑張って見つけましょう。

 

 /*H1のみ表示させる*/の段落の前ですね。

ul.table-of-contents li:before {
font-family: blogicon;
content: "048";
position: absolute;
font-size: 10px;
left: 1.6em;
color: #b4dddf;
}
ul.table-of-contents ul li,
ul.table-of-contents li ul {
/* H1のみ表示させる */
display: none !important;
}

 

【content:"048";】=アイコンコード

 048がアイコンコードです。

 コードを入れなくても◆や★など文字変換で出てくる記号も使えます。

 

 

【left:1.6em;】=左端からの距離

 アイコンの表示位置を調整して枠内に収まるようにします。

 私の場合font-size13にしてleftを4emにしました。

 

 

調整したのがこちら↓

f:id:monmonb:20190308131356j:plain



アイコンを〇にして項目に下線をつければルーズリーフっぽくなりそうですね。

 

現在のCSSはこんな感じ 

 ul.table-of-contents li:before {
font-family: blogicon;
content: "〇";/*アイコン*/
position: absolute;
font-size: 13px;
left: 3.5em;/*アイコン表示位置*/
color: #7fc2ef;
}

 

上記のCSSでの実際の目次

 

目次タイトルを変更するには

 

etc-syuhu.hateblo.jp