まかぽっぽ。

主にPSO2(ファンタシースターオンライン2)の攻略や最新情報などを取り扱っています。たまに雑記。

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

デザインいじっても反映されないんだけど!!!

 

みなさんこんにちは。

 

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

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

 

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

 

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

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

 

 

原因と対処法

 

記述しているセレクタの優先順位が低い

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

 

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

 

セレクタのポイント獲得ルール
*(全称セレクタ) 0ポイント
p,h1 などのタグ 1ポイント
.sample(classの場合)10ポイント 
#sample(IDの場合) 100ポイント

 

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

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

 

googleクロームで右クリック、検証を選択した時の画面

googleロームで右クリック、検証を選択した時の画面



私の場合は、上図のように、ほとんどのタグに「.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行目で記載されているようです。

 

 

参考記事:

sakichin.com

kyabana.hatenablog.jp

matoyomi.hatenablog.com