Wordpressでcssを追加・修正したけど反映しない！cssが効かない時に確認するコト │ ＷＥＢコト

こんばんわtaisonです。

最近ウチのウサギが１歳の誕生日を迎えまして、
嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、

全く食べず　笑

食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、

最終的に好物のグラノーラチップスをふりかけてなんとか写真収めに成功したんですけど、単純な正解を出すまでになかなかの時間を要しました。

全然関係ない話でスイマセン。
さて今回は、

分かると簡単。意外とシンプルな間違いをおかすwordpressでのcss追加指定について記事を書いていきます。

cssが反映しない？追記したとき訪れるWordpressテーマの壁

普通にオリジナルのサイト制作をした時はブチ当らないでしょう問題も、
Wordpressというフィルターを通すことで問題として浮かび上がります。

cssの反映しない現象。

WordPressの既存テーマを使ってサイト制作をしたことある方なら一度は経験してるでしょうが、上書きしたハズのcssがなぜか反映しない！なんてことがたまにあります。

最初は原因掘り出すまでに時間がかかるんですよねー。普通だったら気にしないところなので。

いったい何が原因なんだ？と、右往左往するのですが、ここでは解決をショートカットできるよう反映しない原因を挙げ、対策を書きたいと思います。

だいたい以下のような問題が主になります。

cssクラス名の単純な記法ミス	まあこれはWordpressでなくとも普通に起こることですね。追加cssをあてたいクラスと記述したクラス名が一致していない。とか、コロンが変なとこに入っている・間違えて２つ入力しちゃってる。とかでしょうか。
追加したcssの優先順位が元のcssより低い	WordPressの元テーマで既に指定されているクラスにcssを上書きしたい場合、特に起こります。テーマのクラスが優先されてスタイルが変わらない。というやつですね。
元テーマのcssが!important指定されている	絶対権力のimportantが元テーマに指定されていて追加cssが反映しないなんてのも、使用するテーマによっては起こりえますね。
ブラウザのキャッシュが悪さをしている	意外とある。特にコーディングとチェックを違う人がやってたりすると陥りがち。「直ってないよ～」と言われるとコーダーがヤキモキするやつです。

こんな感じでまあ、普通のサイト制作にも共通することばかりなんですが、Wordpressの既存テーマを使う場合、
制作者と運用・追記する人が違ってくるケースがほとんどで、上記のような問題が起こりやすいと思われます。

ちゃんとチェックしたら問題はないんだけど、、、まあそれは置いといて。

では、実際に上記の問題を解決していきましょう。

まずは解決しやすくするため、下記ブラウザをダウンロードしてください。
もう持ってるよーという人、使わないよーという人は必要ないです。

検証ができるブラウザをダウンロード

上記ブラウザからだと既存テーマのcssクラス名を確認するのが非常にラクになります。
インターネットエクスプローラーでもできますが、コード見る画面出てくるのが遅くて使っていられませんでした　汗

準備ができたら次に進みましょう。

さっそく二つにまとめたのは（めんどくさいからじゃあない）、だいたい書くことが一緒になっちゃうので、、、
では、さっそく作業を確認しましょう。

上記操作をすると、以下画像のような画面が出ると思います。

コード検証画面画像

画像内右側の赤枠部分に該当のcssが表示されます。

ここで上書き・追加したいcssのクラス名を探し出し、書き間違いのないようクラス名を指定しましょう。
（ちなみにcssクラス名は赤枠内からコピペできるので、そのままコピペしても問題ありません）

あ、ちなみにWindowsの場合はF12（メーカーや機種によってはFnキー押しなど違いあり）で検証画面が表示できますよ。

cssクラス名の単純な記法ミス	対象となるクラス名にしっかりと設定されているか確認
追加したcssの優先順位が元のcssより低い	指定したクラス名が元cssのクラス階層を上回っているか確認例：　.content img ⇒　.content img以上で書き換える上記でダメな場合はもうひとつ上の要素のクラス名も入れてみる例：　.content img ⇒　.wrap .content img以上で書き換える

絶対指定となる!importantが上書き予定のcssクラスに指定されている場合、残念ですが普通に上書きすることは出来ません。
この場合は潔く!important指定を優先度に気を付けながら指定しましょう。

元テーマのcssが!important指定されている	優先順位に気をつけ、cssを上書きする。例：　.content img{ color: #2a2a2a !important;} ⇒　.content img{ color: #1a1a1a !important;} 上記でダメな場合はもうひとつ上の要素のクラス名も入れてみる例：　.content img{ color: #2a2a2a !important;} ⇒　.wrap .content img{ color: #1a1a1a !important;}

ただ最近の傾向だと、カスタマイズ頻度が高そうな部分に指定されていることはほとんど無いので、あまり指定することは無いかもしれませんね。

ブラウザのキャッシュが悪さをしている	wordpressのキャッシュ系プラグインやブラウザのキャッシュを削除した後、ブラウザを更新してください。以上！