いつも見に来ていただいてありがとうございます。
初めての方は初めまして (｀・ω・´)v
はてなブログに引っ越してきて早1ヶ月、
はてなブログでやってみたかったのが目次！
その目次を数日前から使い始めたものの
デザインの崩れが気になっていたので、着手しました。
目次の崩れを直す
1. 現状
様々な先輩ブログさんの記事を参考に、
デザイン-カスタマイズ-デザインcssに下記のhtmlタグをコピペした。
.table-of-contents:before{
content: "目次";
font-size: 120%;
}
.table-of-contents{
padding: 20px10px20px40px;
border-radius: 5px;
background: #f0f0f0;/*背景色はここから変更*/
}
しかしこれだと下記のように、黒丸●が背景色からはみ出てるΣ(￣ロ￣lll)ーン
なぜ？？？
2. htmlタグを見直す
取り合えず、上の部分は「目次」の文字サイズの指定なので無視。
問題は下の部分にありそう。
.table-of-contents{
padding: 20px10px20px40px;
border-radius: 5px;
background: #f0f0f0;/*背景色はここから変更*/
}
●と○の違いはと言えば、下記の通り。
●高松市立あじ竜王〜＝大見出し<h3>
○彫刻の広場〜＝中見出し<h4>
でも見出しに何か特定の指定をしているタグはなさそう。
試しにpaddingを全て0pxにしても変化なし。
・・・なぜ？？
（border-radiusというのは、ボックスの角丸の指定でした。）
3. !importantというタグ
藁をもすがる思いで検索して辿り着いたのが、先輩はてなブログさんの記事。
（元記事のリンクを貼っていたものの、いつの間にか、
リンク先のページが削除されていました(^_^;)【23.1月現在】）
.table-of-contents{
padding: 20px 10px 20px 40px !important;
border-radius: 5px;
background: #f0f0f0;/*背景色はここから変更*/
}
こちらに載っていたのが !important;という見た事のないタグ…
これを同じようにpaddingの最後に追記したところ修正できました！！！
ヤッターーーー＼(*T▽T*)／
でも!importantってなんなの？？と調べていると、
下記のHPに、どうしても原因が分からないときの最終手段のタグ
として紹介されていました。
どうしても何かと競合してしまったりして、
スタイルが反映されない、そんな時の最終手段。
これならpaddingを全て0pxにしても変化がなかったことも腑に落ちます。
使用中のテーマなどのなかに、優先順位が高いスタイルが
設定してあるんだろうと。もっと単純な原因があるのかもしれませんが（；´∀｀）
