CSS素人がCSSの優先順位で四苦八苦している記事です。生暖かい目で見守ってね。
経緯
今回は目次を作ったので、日記兼テスト用であるこのブログで使ってみようと思ったのだが・・・。
↑こんな感じ
どうもカスタムCSSに書き込んでも反映されない。下のようになる。というか初期のまんまで何も変わってない・・・。なんで?
原因を推測する
コードの文法ミスは絶対にない。このコードを書いたhtmlファイルはちゃんと動いてるし・・・。
つまり、なにかCSSの仕様で上手くいってないということだ!(あやふや)
ということで、検証デベロッパーツールを使ってみた。今回みたいにCSSやHTMLで上手くいかないことがある時はこれを使うと便利。
うまく反映していない部分、今回では目次のところ右クリックし、表示されるメニューの最後にある『検証』をクリック。
すると、そのページのhtmlとかcssがズラっと出てくる。
今回は目次をいじったので、HTMLコードで目次が使われている部分を探し出す。はてなブログだと、目次のclass名はtable-of-contentsなので、それを探し、クリックするとCSSがズラっと出てくる。
そこに僕が書いたコードとかもあったんだけど、なぜか横線が引かれている。
なんやこいつ・・・。どうやら、上のコードのほうが優先度が高いから僕が書いたborderとかpaddingは無視されている、ということだろうか?
つまりこのlife.cssが悪さをしていることになる(言いがかり)。
この時のデザインテーマはLifeだから、そのCSSなんだろう。
デザインテーマのCSSを書き換えるのはめんどうだし、他にできることと言ったらCSSの優先をを上げることぐらいしかない。
1.!importantを付ける
横線が引かれているコードに!importantを付け加えるとそのコードが最優先で実行されるので、無事僕が書いた内容通りになる。けど、あまり使わないほうが良い、という情報も見るので他の方法も試してみよう。
2.セレクタの数で優先度を調整
セレクタっていうのはCSSのコードで○○ { ~~~ }の○○の部分ね。
例えばはてなの場合、目次のデザインに使われているセレクタは.table-of-contents。
セレクタは重ねて書くことができるが、それぞれに点数がある。
重ねれば重ねるほど点数は高くなり、その点数で優先順位も決まるらしい。
つまり、h2{ ~ } と h2 .class { ~ }っていうコードがあった場合、セレクタの数が2つあり点数も高い h2 .class{ ~ }のコードが優先される。
ということで、table-of-contentsの前後の要素を見て、適当にセレクタを付け加えてみよう。
table-of-contentsの前にはentity-contentがあるな・・・。ってことで、
.table-of-contents を .entry-content .table-of-contents にしてセレクタの数を増してみよう。
で、できた。
これでいいんだろうか?もし何か問題がまた起こったら、その時はその時にしよう。
そういえばこのセレクタの形、life.cssのセレクタと全く一緒だ。ということは、優先度が同じ場合で違うCSSのファイルの場合、カスタムCSSのほうが優先されるということになる。
よく考えなくても、そりゃそうか、と納得。というか、そうじゃないとデザインテーマのせいでまともにカスタマイズできないような・・・。
まとめ
ということで、はてなブログの目次をカスタマイズする時は
.entry-content table-of-contents{
カスタム内容
}
という形で書こう!以上!
常々、ブログのデザインをカスタマイズしたいっていう人は最低限のCSSやHTMLは勉強したほうが良いと思う。
カスタマイズが上手くいかないと、何をいじればいいのかすら検討がつかないんだもの・・・。