こんばんわtaisonです。
最近ウチのウサギが１歳の誕生日を迎えまして、
嫁がお祝いということでリンゴとにんじんで作ったケーキを目の前に置いたんですが、、、
全く食べず 笑
食べてる写真を収めたくて奮闘してたんですけど、目の前に置いても口元に置いてもウンともスンとも言わず、、、
最終的に好物のグラノーラチップスをふりかけてなんとか写真収めに成功したんですけど、単純な正解を出すまでになかなかの時間を要しました。
全然関係ない話でスイマセン。
さて今回は、
分かると簡単。意外とシンプルな間違いをおかすwordpressでのcss追加指定について記事を書いていきます。
cssが反映しない？追記したとき訪れるWordpressテーマの壁
普通にオリジナルのサイト制作をした時はブチ当らないでしょう問題も、
Wordpressというフィルターを通すことで問題として浮かび上がります。
cssの反映しない現象。
WordPressの既存テーマを使ってサイト制作をしたことある方なら一度は経験してるでしょうが、上書きしたハズのcssがなぜか反映しない！なんてことがたまにあります。
最初は原因掘り出すまでに時間がかかるんですよねー。普通だったら気にしないところなので。
いったい何が原因なんだ？と、右往左往するのですが、ここでは解決をショートカットできるよう反映しない原因を挙げ、対策を書きたいと思います。
WordPressで追加cssが反映されない主な原因
だいたい以下のような問題が主になります。
| cssクラス名の単純な記法ミス | まあこれはWordpressでなくとも普通に起こることですね。 追加cssをあてたいクラスと記述したクラス名が一致していない。とか、コロンが変なとこに入っている・間違えて２つ入力しちゃってる。とかでしょうか。 |
|---|---|
| 追加したcssの優先順位が元のcssより低い | WordPressの元テーマで既に指定されているクラスにcssを上書きしたい場合、特に起こります。 テーマのクラスが優先されてスタイルが変わらない。というやつですね。 |
| 元テーマのcssが!important指定されている | 絶対権力のimportantが元テーマに指定されていて追加cssが反映しないなんてのも、使用するテーマによっては起こりえますね。 |
| ブラウザのキャッシュが悪さをしている | 意外とある。特にコーディングとチェックを違う人がやってたりすると陥りがち。 「直ってないよ～」と言われるとコーダーがヤキモキするやつです。 |
こんな感じでまあ、普通のサイト制作にも共通することばかりなんですが、Wordpressの既存テーマを使う場合、
制作者と運用・追記する人が違ってくるケースがほとんどで、上記のような問題が起こりやすいと思われます。
ちゃんとチェックしたら問題はないんだけど、、、まあそれは置いといて。
では、実際に上記の問題を解決していきましょう。
cssの問題を解決する準備
まずは解決しやすくするため、下記ブラウザをダウンロードしてください。
もう持ってるよーという人、使わないよーという人は必要ないです。
検証ができるブラウザをダウンロード
上記ブラウザからだと既存テーマのcssクラス名を確認するのが非常にラクになります。
インターネットエクスプローラーでもできますが、コード見る画面出てくるのが遅くて使っていられませんでした 汗
準備ができたら次に進みましょう。
問題別解決方法
単純な記法ミスの場合とクラスの優先度が低い場合
さっそく二つにまとめたのは（めんどくさいからじゃあない）、だいたい書くことが一緒になっちゃうので、、、
では、さっそく作業を確認しましょう。
- まずは上書きもしくはスタイル追加したい要素のクラス名を確認します。
- GoogleChromeかFirefox(IEでも、いいです、、、)を使ってサイトを開く
- 上書き対象の要素にカーソルを合わせ右クリック。
- 検証（要素を検証）という項目をクリック。
上記操作をすると、以下画像のような画面が出ると思います。
画像内右側の赤枠部分に該当のcssが表示されます。
ここで上書き・追加したいcssのクラス名を探し出し、書き間違いのないようクラス名を指定しましょう。
（ちなみにcssクラス名は赤枠内からコピペできるので、そのままコピペしても問題ありません）
あ、ちなみにWindowsの場合はF12（メーカーや機種によってはFnキー押しなど違いあり）で検証画面が表示できますよ。
解決方法
| cssクラス名の単純な記法ミス | 対象となるクラス名にしっかりと設定されているか確認 |
|---|---|
| 追加したcssの優先順位が元のcssより低い | 指定したクラス名が元cssのクラス階層を上回っているか確認 例： .content img ⇒ .content img以上で書き換える 上記でダメな場合はもうひとつ上の要素のクラス名も入れてみる 例： .content img ⇒ .wrap .content img以上で書き換える |
元cssに!importantが指定されている場合
絶対指定となる!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のキャッシュ系プラグインやブラウザのキャッシュを削除した後、ブラウザを更新してください。以上！ |
|---|
表示されない場合は上記4つの問題を疑いましょう
実際には閲覧するデバイス（iOS、Androidが主）のバージョンにcssが対応していないとか細かい部分もあるんですが(気になる人はベンダープレフィックスを確認)、おおよそ上記４つを検証して解決することがほとんどです。
あせらずあわてず原因を特定して、無駄な時間を過ごさないようcssを調整していきましょう。
それではまた！
