WordPressといえばテーマを変えると簡単に着せ替えできて便利ですね。でも、オリジナリティを出そうと思ったらCSSの編集によるカスタマイズは欠かせませんね。
CSSそのものが分からなくて編集できない以外で、WordPressのCSS編集が適用されない（反映されない）と悩むのは
- 子テーマを使っているときにハマりやすいCSS編集
- 意図しない場所までカスタマイズしたCSSが適用されてしまう
- プラグインのCSSを上書きしたはずがどうやっても適用されない
というのがほとんど。そんな経験ありませんか？
このハマった状態から脱出する方法を順に紹介したいと思います。
子テーマを使っているときにハマりやすいCSS編集
初心者向け
WordPressでサイトを作り始めてしばらくしてから、そろそろカスタマイズしてみよう！！で、いろいろと調べると、テーマはアップデートするとカスタマイズ内容が上書きされてしまうから子テーマを使った方がいいというところにたどり着きますね。
そこで子テーマを作っていよいよカスタマイズ。CSSなんて全く知らないところから始めた方は子テーマに親テーマのCSSをコピーして変更したい部分だけ色を変えたりしますね。
で、表示してみると・・・「なんで変わらないの？？？」となることがあります。初心者ですからとっても焦ります。何か間違ったことしてる？でネット難民のようにいろいろなページを漁っても何も解決方法がない！！もうやーーめた！！でサイトを表示してみたら・・・「あれ？？変わってる～～♫♫」という経験ありませんか（ちょっと劇画的に表現しすぎでした・・・）？
実はこれ、サイトでもテーマでも、カスタマイズしたCSSのせいでもないんです。諸悪の根源はウェブブラウザのキャッシュ機能。次に同じページを見たときに少しでも速く表示ができるようにするための機能なのですが、これがCSSの編集では悪さをします。
ほとんどのブラウザにはページの表示と一緒にデザイン要素やHTMLの要素を表示できる「デベロッパーツール」というのがあります。Google Chromeではページを表示して「F12」を押すと画面が切り替わります。デザインが変わらないときは、リロードボタン（再読み込みボタン）を右クリックして、「キャッシュを消去してハード再読み込み」というのをクリックしてみてください。しばらく時間がかかりますがホラ！適用されますよね？
慣れてきてもとてもハマりやすいことなので、おかしいなぁと思ったらキャッシュの削除（リフレッシュ）をする、というよりはCSSを編集するときは必ず行うようにしましょう。
ちょっと慣れた人向け
これで初心者から脱出～～、せっかくデベロッパーツールの存在も、どこにどのCSSが適用されているかの見方も分かってきたから、もうわざわざ親テーマからCSSを探してコピーしなくても大丈夫！！となった後で陥りやすい事柄が、消したいものが消えない現象。ちょっとかじってるから絶対大丈夫！！と思っているのはあなただけです（ごめんなさい）。
この失敗、初心者のうちは親テーマのCSSとにらめっこして、親切なテーマだとどこの部分なんてコメントが書いてあるのでそこを全部子テーマにコピーしてから編集するから絶対に陥らないんです。でもちょっと慣れてくると必ず一度はハマるんですね、これが。
その原因はズバリ、消したいものを消してますか？？ということ。
子テーマと親テーマは、どちらにも同じデザイン要素がある場合は子テーマの情報を最終的に上書きするという関係にあります。
つまり、親テーマにあるデザイン要素で要らないものは「要らない」としてやらないと、きっちり反映されてしまうのです。ここで使えるのが「要らない」という意味である「０（ゼロ）」や「none」という値。
CSSの基本は
セレクタ{デザイン要素:値;・・・}ですから、要らないものはきっちりと「デザイン要素:none(または0);」にしてやるんです。そうすることで不要なものは不要という記述になりますから、要らないものは表現されなくなるのです。
また、テーマによってはCSSクラスが親子関係になっている場合もあります。大枠ではこのデザインでその中にある部品はこのデザインでという書き方がしてある場合です。その場合には、子のデザインを変更してもうまく反映されないときがあります。そんなときはこれまた魔法のコードを１つ追加します。それは・・・
セレクタ{デザイン要素:値!important;・・・}というふうに値の後ろに!importantという「最優先しなさいよ！！」という命令を付け加えてあげるのです。ただこれにも限度があって、使いすぎるとどれがインポータント？？となってしまいますから注意してくださいね。
意図しない場所までカスタマイズしたCSSが適用されてしまう
CSSを適用させる場所には<div class=”〇〇”>などのCSSクラス名と呼ばれるものが付けられており、そこに対してCSSでデザイン要素を充てるというのはカスタマイズできるようになった人には理解できますね。
でも、このCSSクラスはいろいろな場所で共用されてるんです。これは意地悪とかではなく、同じ要素のものは統一したデザインになるようにというテーマ制作者の意図が含まれています。
ではそういう場所はどうしても同じじゃないとダメなのでしょうか？？いやそんなことはありません。
大抵のテーマ内には前述したように親子の要素があります。ここという場所を指定するタグに<div>タグがあります。そしてそのdivタグの中身をよく見ると、
<div id=”××” class=”〇〇”>と書かれているところがありますね。実はこれがミソなんです。
確かにclass要素は〇〇なのですが、その前に「この場所の名前は・・・」というのがidで設定されているのです。
つまり、××の場所の〇〇というCSSという指定ができるようになっているのです。
この××はidセレクタと呼ばれ、CSSの中では「#(シャープ)」で表現します。
「#×× .〇〇」というCSSを書けば、idが”××”でclassが”〇〇”の場所だけに対するデザインですよ！！と指定することができるのです。
いやあ奥が深いというか、考えた人は天才ですね。
通常のヘッダーがあって、本文が左にあって、右にサイドバーという当サイトのようなありがちなレイアウトでは
ヘッダーは「header」、本文は「main」、サイドバーは「sidebar」などという大まかなidセレクタの中にいろいろ書かれていますから、これとも組み合わせてどうやったらその場所だけを特定できるかを考えれば、思ったようにデザインできなくて悩むことは減ると思います。
プラグインのCSSを上書きしたはずが・・・の原因と対処
最後にこれで悩むことがあるなぁということを書いておきます。前の項目を見て、もう大丈夫と思った矢先にハマるのがこれです。
CSSが適用されている場所も分かったし、CSSの編集にも慣れてきた。最後にプラグインで表示されるコンテンツの文字の色を変えよう！！で、プラグインのセレクタを探してコピーして、子テーマのCSS上で編集して、上書きするんだから!important、これでOK！！・・・あれ？？？変更されない・・・キャッシュのリフレッシュ忘れてた・・・あれ？？となったことありませんか？
この場合の諸悪の根源は、プライオリティです。プライオリティとは優先順のこと。どこで何が読み込まれているかという順番のことです。WordPressではページが表示されるまでの間にたくさんのデータが読み込まれます。そこに当然順番があります。この順番によっては後からプラグインのCSSが適用されてしまい、変更できないときがあるのです。
仕方なくプラグインのCSSへ直接上書きして・・・はテーマ以上に危険です。プラグインは作者のやる気？によってどんどん更新されていきます。そのときにCSSファイルが上書きされて元に戻ることもたくさんあります。その度に再編集していてはキリがありません。
そこで行ってみるべき対策は、子テーマのCSSの中での記述順を変えることです。
例えば最後に書き足したCSSで適用されなければ先頭に移動してみるといった単純な方法です。実はこれで解消されることが非常に多いですからあきらめる前にやってみてください。
逆にそれによって適用されない部分が出てくるかもしれませんから、見ては変更見ては変更と何度でも編集してチェックすれば大抵は解決できます。
以上がハマりやすいCSS編集の落とし穴と対処方法です。私も最近までCSS？？という人でしたがいろいろとやるうちにこれで解消できるようになりました。同じような経験をお持ちの方、ぜひ試してみてくださいね。
