のんびり系子育て日誌

10歳と7歳をもつ のんびり系アラフォーママの日常

はてなブログの目次をカスタマイズ

いつも見に来ていただいてありがとうございます。
初めての方は初めまして (`・ω・´)v

はてなブログに引っ越してきて早1ヶ月、
はてなブログでやってみたかったのが目次!
その目次を数日前から使い始めたものの
デザインの崩れが気になっていたので、着手しました。

f:id:nonbirikei:20160712162148j:plain

目次の崩れを直す

1. 現状

様々な先輩ブログさんの記事を参考に、
デザイン-カスタマイズ-デザインcssに下記のhtmlタグをコピペした。

.table-of-contents:before{
content: "目次";
font-size: 120%;
}
.table-of-contents{
padding: 20px10px20px40px;
border-radius: 5px;
background: #f0f0f0;/*背景色はここから変更*/
}

しかしこれだと下記のように、黒丸が背景色からはみ出てるΣ( ̄ロ ̄lll)ーン

なぜ???

f:id:nonbirikei:20160711170457j:plain

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*)/

f:id:nonbirikei:20160711170511j:plain

でも!importantってなんなの??と調べていると、
下記のHPに、どうしても原因が分からないときの最終手段のタグ
として紹介されていました。
どうしても何かと競合してしまったりして、
スタイルが反映されない、そんな時の最終手段。

これならpaddingを全て0pxにしても変化がなかったことも腑に落ちます。
使用中のテーマなどのなかに、優先順位が高いスタイルが
設定してあるんだろうと。もっと単純な原因があるのかもしれませんが(;´∀`)