customizeblanc note.のカスタマイズ
blanc note.のカスタマイズ

WordPressのstyle.cssに書いたCSSが反映されない? CSSの優先順位のお話

blanc note.のカスタマイズ

CSSは、よりHTML内の該当要素に近い位置に書かれたCSSが優先される仕様。
スタイルを記述した位置によっては、他の位置に書いてあるスタイルに打ち消されてしまうことがあります。
CSS優先度は、ざっくり説明するとこんなイメージ。
css-layer
例えばstyle.css(外部CSS)の中に、同じ要素に対するスタイルの指定がある場合、より下(後ろ)のスタイルが優先になります。それだけでなく、より細かくセレクタ(要素)を指定したスタイルが優先です。
さらに、外部CSSより<head>内に書かれたCSSが優先。<head>中でも下に書かれているCSSが優先に。
うわぁー! ややっこしい!!

優先度低 優先度中 優先度高
外部css HTML内に<style>〜</style>で記述 要素に直書き

CSSを書く3つの方法と優先順位について、具体的に説明させていただきますと……。

全体を通して

外部CSSと<head>内<style>〜</style>での、文法は
セレクタ(要素){ プロパティ:値; }
要素に直書きする場合は、
style=”プロパティ:値;”
となります。直書きすることで要素を指定しているため、セレクタの指定は必要ありません。

後ろに書いたCSSが優先

同じセレクタ(要素)に対するスタイルが複数あった場合は、後ろに書いたCSSが優先になります。

20行目では、画像.exの枠線はナシと指定してますが、後ろに書いたCSSが優先になるため「40行目では1ピクセルのやや濃いめのグレーの枠を付けて!」という指定がイキになります。

セレクタを細かく指定したCSSが優先

同じimg.exにスタイルを設定したい場合でも、

という3つの指定があったら、

が優先されます。
ID=”contents”の中にある、class=”entry”の中の<img src=”画像のパス” class=”ex” alt=”画像の説明”>に、薄いグレーの10ピクセルの枠線をつけます。
という指定です。
例えばclass=”entry”の外にある<img src=”画像のパス” class=”ex” alt=”画像の説明”>には、一番上のCSSが適応されます。

C.外部CSS(優先度低)

外部CSSは<head>〜</head>の間に、linkタグを使ってスタイルシートを読み込む方法です。

メンテナンスのことを考えると外部CSSを使うのが好ましいのですが、外部CSSは一番優先順位が低いです。
WordPressでは、プラグインが独自CSSを<head>〜</head>の間に挿入することがあり、外部CSSでスタイルを当てようとしても、効かないことが……。

B.<style>〜</style>で記述した例(優先度中)

<head>〜</head>の間に書かれたCSSは、外部CSSよりも優先されます。

A.要素に直書きしたCSS(優先度高)

紹介した記述方法の中では、要素に直書きした場合が一番優先度が高くなります。

変えたい要素に対するcssが、HTMLに<style>〜</style>で記述されていたり、要素に直書きされていたりすると、外部CSSにスタイルを書いても打ち消されてしまいます。
では、直書きされていた場合はどうしようもないのかというと……ちゃんと解決法があります。

S.!importantのついたCSS(最優先)

すべてを打ち破る必殺技、!importantにおまかせあれ。
外部CSSに記述されたcssだとしても、!importantがついている要素が最優先されます。
外部CSSの中にある最優先したいスタイルに!importantをつけると…

!important;のついているプロパティが優先されます。

優先順位のまとめ

css-layer02
最優先:!important;
優先度高:要素に直書き
優先度中:<style>〜</style>
優先度低:外部CSSで指定
の順で優先されます。
CSSの優先順位の関係を理解した上でカスタマイズをすると、style.cssの内容が反映されない〜〜と、つまづく回数が減るとおもいます。
ちょっとややっこしいですが、試しているうちにわかってくるはずです。
というわけで、カスタマイズするためのcssを書き込む際は、style.cssの一番したにコピペするのが確実。
もし効かなかったら、セレクタを細かく指定してみてください。
それでは楽しいブログライフを♪

Category : blanc note.のカスタマイズ

この記事がお気に召したら、いいね!お願いします♪

最新情報をお届けします

ほんわかクリエイター るこ

Web系のお仕事をしています。
むちゅめ(6歳/早生まれ/小学生1年生)大好きな親バカ系。
LOFT、無印、生活の木、伊東屋が好き。
自然溢れる場所に惹かれはするものの、めんどくさがりの省エネ派。ぐでたまを尊敬してます。

ブログ一覧へ戻る