はてなブログの目次のCSSに苦戦した
古（いにしえ）のオタクなのでHTMLには一日の長がありますが、CSSには不慣れです
このブログ、テーマなどのカスタマイズをほとんど行なっていないので、所々UIが微妙だったりする
そこが気になるなら他の方が公開しているものをインスコせいって感じだが、ストアを見てるとどれがいいかわからなくなってしまう 選択肢が数多
文字サイズなど些細なものはCSSでちょこっといじったのだけど、目次のカスタマイズに２、３時間は苦戦した ほとんどコピペなのに……
ちなみにこのテーマのデフォルトの目次がこれ
なんか物足りない 物足りないというか足りない
テキストに埋もれそう感はなはだしい
なので
.table-of-contents{
font-size: 16px;
background: #f8f8f8;
}
を埋め込んだのだが、
ちょっと！
箇条書きのアイコンまで、なぜか背景が反映されない
ここから地獄のお直しが
.table-of-contents{
font-size: 16px;
padding: 20px 10px 20px 40px;
background: #f8f8f8;
}
不動
.table-of-contents{
font-size: 16px;
padding: 20px 10px 20px 40px;
background: #f8f8f8;
margin: 0 0 0 0 ;
}
不動
fuck
不動（表示がめちゃくちゃ崩れた）
イライラしながら「はてなブログ 目次 CSS 崩れる」とかなんとか検索したら、秒で解決した
!important
が足りなかったようす
今のHTMLでは優先順位がどうとかあったのだが、面倒なので説明は割愛する
.table-of-contents{
font-size: 16px;
padding: 20px 10px 20px 40px !important;
background: #f8f8f8;
margin: 0 0 0 0 ;
}
ヨッッッシャ終わっ
あ？
なんか右寄りになっている
.table-of-contents{
font-size: 16px;
padding: 20px 10px 20px 40px !important;
background: #f8f8f8;
margin: 0 0 0 0 !important;
}
完
