はてなブログでCSSがうまく反映されない時の対処法

みなさんこんにちは。

CSSやPHPをいじってる時に、検索して出てきた手順通りにやったのに、

思い通りに反映されないと頭がショートしますよね。

しかも、特に記述ミスもしていないのに、何度確認しても反映されないとわけが分からなくなってしまいます。

今回ははてなブログを利用している方向けの記事となっていまして、

特に、オリジナルテーマを入れていると陥りやすい症状なのではないかと思うのですが、CSSが反映されない時の対処方法を紹介します。

CSSの優先順位はセレクタの獲得ポイントで決まります。

記述したCSSが先に他のセレクタで指定をしている場合、獲得ポイントが高いほうが優先されるため、ポイントが少なければclassやidを指定していても効果を発揮しないことがあります。

セレクタのポイント獲得ルール
*（全称セレクタ）０ポイント
p,h1　などのタグ１ポイント
.sample（classの場合）１０ポイント
#sample（IDの場合）１００ポイント

つまりあなたが正しく記述したCSSが適用されない場合、

適用しているデザインテーマ内であらかじめ指定してあるデザインの方が優先順位が高いため、あなたが付け加えたcssが反映されていない事が考えられます。

私の場合は、上図のように、ほとんどのタグに「.entry-content」というクラス名であらかじめCSSが記述されているようでした。

この場合、「クラス」の10ポイントと、タグ自身の1ポイントを足した11ポイントでもともとCSSが記述されている事となります。

そのため、デザインCSS内に自分で「h3」や「p」のタグだけで記述をしてもセレクタの獲得ポイントが1ポイントとなり、優先順位が低いと判断され、CSSが反映されないのです。

セレクタの獲得ポイントが同ポイントの場合、CSS内で一番下に記述されている方が優先されます。

ですので、デザインCSS内の一番下に同じクラス、タグで書いてしまうのが一番手っ取り早いと思います。

×「p{}」1ポイントのため優先されない

○「.entry-content p{}」11ポイントで同ポイントとなり一番下の記述が反映される。

f:id:makapo-oekaki:20180824125550p:plain

はてなブログのデザインテーマは1～3行目でインポートしているようです。

全体の背景色は4～6行目で記載されているようです。

参考記事：

まかぽっぽ。