番号リスト&目次中見出しのデザイン【ブログカスタマイズ14】(と断念した奴)

f:id:buttobimusic:20161101183437j:plain

細かいところだけどブログのカスタマイズをしたからメモっとく!

 

目次の中見出しのデザインを変えた

f:id:buttobimusic:20211115153352p:plain

中見出しは冒頭に数字を入れないカスタマイズをずっとしたかったんだけど、なんか検索してコピペしてもずっとうまくいかず。
見よう見まねであちこち見ながら編集したらなんとかなりました。

文字もちょっと小さくした方が見やすそうだったのでそれも追加で、
以下のコードを書いてます。

.entry-content .table-of-contents li ul li{
    font-weight: bold;  
    font-size: 13px;
    list-style-type: circle;}

 

そしたら大見出しの前に余白があると塊で視認できてわかりやすそうだな〜と思ったので、以下追加。

.entry-content .table-of-contents>li {
    margin-top: 5px;}

 

番号のリストもカスタマイズ

こないだの記事で番号付きのリストを珍しく使ったらなんとも味気ない印象だったので、こちらもカスタマイズしました。

大好きなサルワカさんのを使わせていただいてます。

色合いやサイズを自分のブログ用に整えて、完成〜!

f:id:buttobimusic:20211115155812p:plain

 

実装見直しの黒点リストのデザイン

番号付きと同じ感じでデザインしようと画策したんだけど、どうしても目次にも反映されちゃっておかしなことになっちゃう…………

こういう感じにしたいんだけど↓

f:id:buttobimusic:20211115173820p:plain

これを採用すると目次もこうなっちゃう↓

f:id:buttobimusic:20211115173853p:plain

いろいろ自分なりに対策してみたけど上手くいかなかったので今回は断念…。

またやりたくなったらやろう。

 

しかし久しぶりにCSSいじったけど、やっぱ触ってないと忘れますね!
元々ちゃんと勉強とかしてない人なので尚更ね!

マーイーカちゃんです。(「まぁいいか」の意)

 

ブログカスタマイズまとめも作りたいなーって思ってたんだけど、また新しい記事を増やしてしまった…w
これもマーイーカちゃんなのである。