いつも見に来ていただいてありがとうございます。
初めての方は初めまして (`・ω・´)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にしても変化がなかったことも腑に落ちます。
使用中のテーマなどのなかに、優先順位が高いスタイルが
設定してあるんだろうと。もっと単純な原因があるのかもしれませんが(;´∀`)