ほりーのブログリ

ブログ+クリエイト=ブログリ。初心者ほりーがブログを作るうえで必須なHTMLやCSSを学んでいくブログ。備忘録やテストとして使います。あと軽い日記程度にも。

【はてなブログ】カスタムCSSが反映されない時の対処法 CSSの優先度について

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を付ける

f:id:hollys-command-lecture:20180528000003p:plain

横線が引かれているコードに!importantを付け加えるとそのコードが最優先で実行されるので、無事僕が書いた内容通りになる。けど、あまり使わないほうが良い、という情報も見るので他の方法も試してみよう。

 

2.セレクタの数で優先度を調整

セレクタっていうのはCSSのコードで○○ { ~~~ }の○○の部分ね。

例えばはてなの場合、目次のデザインに使われているセレクタは.table-of-contents。

 

 

セレクタは重ねて書くことができるが、それぞれに点数がある。

重ねれば重ねるほど点数は高くなり、その点数で優先順位も決まるらしい。

 

つまり、h2{ ~ } と h2 .class { ~ }っていうコードがあった場合、セレクタの数が2つあり点数も高い h2 .class{ ~ }のコードが優先される。

ということで、table-of-contentsの前後の要素を見て、適当にセレクタを付け加えてみよう。

 

f:id:hollys-command-lecture:20180528001304p:plain

 

table-of-contentsの前にはentity-contentがあるな・・・。ってことで、

.table-of-contents を .entry-content .table-of-contents にしてセレクタの数を増してみよう。

 

f:id:hollys-command-lecture:20180528001705p:plain

 

で、できた。

これでいいんだろうか?もし何か問題がまた起こったら、その時はその時にしよう。

 

そういえばこのセレクタの形、life.cssセレクタと全く一緒だ。ということは、優先度が同じ場合で違うCSSのファイルの場合、カスタムCSSのほうが優先されるということになる。

よく考えなくても、そりゃそうか、と納得。というか、そうじゃないとデザインテーマのせいでまともにカスタマイズできないような・・・。

 

まとめ

ということで、はてなブログの目次をカスタマイズする時は

.entry-content table-of-contents{
カスタム内容 }

という形で書こう!以上!

常々、ブログのデザインをカスタマイズしたいっていう人は最低限のCSSやHTMLは勉強したほうが良いと思う。

カスタマイズが上手くいかないと、何をいじればいいのかすら検討がつかないんだもの・・・。