CSSの変更が反映されない時の6つの対処法、教えます！

ブログの見た目に変更を加えたい時はHTMLとCSSをいじる必要があります。

とはいっても素人が手を出せるほど甘いものじゃありません。
専用の言語を使って記述しないといけないんですね。

ありがたいことにWeb上でカスタマイズ用のHTMLやCSS例がたくさん紹介されているのでそれをコピペすればオッケーな場合がほとんどなのですが、みなさんは特にCSSを変更する時こんな経験したことありませんか？

CSS変更したのに反映されねぇぇーー！！！

そう、コピペしたのに自分のブログにカスタマイズが反映されないことがけっこうあるんです！

悪戦苦闘して時間だけ無駄に過ぎてしまい、結局あきらめてしまうことが何度あったことか・・・

でも大丈夫！
今回は確実にCSSの変更をブログに反映させる方法をご紹介します！

これさえ実行すれば今までカスタマイズにかけていた時間を大幅に減らし、思い通りのブログに仕上げることができるでしょう！ 

CSSが反映されない6つの理由

考えられる理由は次の6つです。

1つずつ原因を探ってみましょう。

1. コード入力が間違っている

Webで紹介されているCSSコードが間違っている可能性があります。

もしくはコピーしてきた時に記号が1つ抜けていたり、余計なものまでコピーしてたりしませんか？

CSSでは　}　　;　<　など記号がたくさん使われます。

どれか1つでも抜けてたらうまく反映されません。

そしてやっかいなのが目には見えないスペースの存在。

記号と記号の間にスペースが余計に入ってたり、逆にスペースが抜けていることが考えられます。

お手本コードをよく見直してみましょう。

2. 半角になってない

コードは全て半角入力する必要があります。

よく見落としがちなのはスペースが全角で入力されている場合。

見えないスペースだからこそ気をつけて確認したい箇所ですね。

3. 記述する場所が違う

CSSコードはスタイルシートのどこにでも書いていいわけじゃありません。

スマホやタブレットなどディスプレイサイズが違う端末でそれぞれ違う見せ方をしたい（たとえばレスポンシブデザインのように端末に応じて自動的に形を変えるやつ）場合、CSSコードは適応した場所に書かなければいけません。

もしくはコードによっては特定のコードよりも前の位置にないとうまく表示されないこともあります。

追加したコードが反映されないと感じた時はCSSの一番最初に持ってきたりしてみましょう。

4. キャッシュが残っている

キャッシュとはコンテンツを速く表示させるために画像データなどをブラウザに保存しておき、同じページを開いた時にスムーズに閲覧できるようにする機能のことをいいます。

CSSを変更したのに反映されない場合、古いカスタマイズのキャッシュが残ってしまっている可能性があります。

例えばChromeブラウザを使っている場合、キャッシュは次のように削除できます。

まずブラウザ右上にあるオプションボタンから[履歴]→[履歴]に進みます。

表示された履歴画面の中から「閲覧データを消去する」を選択します。

次のようにチェックボックスを入れ、右下の「閲覧履歴データを消去する」をクリックしてお終い。

これでキャッシュが全て削除されました。

あとはブログ画面をもう一度開いてみましょう。

ちゃんとカスタマイズが反映されてますね！

もしくは各ブラウザに用意されているシークレットモードでアクセスしてもいいですね。そちらのほうがお手軽かもしれません。

5. キャッシュ系のプラグイン

今のキャッシュに関連することで、ワードプレスにはサイトを高速表示するためのキャッシュ関連のプラグインがあります。

これを使うと確かにページがサクサク表示されるようになりますが、CSSをカスタマイズする時はキャッシュが邪魔になります。

そのためキャッシュ系プラグインは一時的に無効にしておきましょう。
どのプラグインが原因がわからない場合は一度すべてのプラグインを無効化しておくといいですね。 

ここまでやってもダメな場合

さあこれで快適なカスタマイズを楽しむことができますね！

めでたしめでたし・・・ん？

コードはばっちり正しいものを使い、すべて半角で入力し、スタイルシートの正しい場所に書いて古いキャッシュも削除してプラグインも切った。

なのに反映されない？

そうなんです、僕が今まで困っていたのはこれです。

考えられる原因を潰したはずなのにそれでもカスタマイズが反映されないことがあるんです。

ここで相当悩まされました。時間を無駄に使い、他にCSSコード例はないものかネットサーフィンしまくりました。

そしてとうとうもう1つの原因を発見したのです！

これをやれば100％の確立でCSSカスタマイズをバッチリ反映させることができるようになりました。

原因はエックスサーバーの設定

エックスサーバーの設定の中に「mod_pagespeed」というものがあります。

この機能はサイトの高速表示をサポートするありがたいもの。
ページ表示に時間がかかると離脱者が増えてしまうため嬉しい機能ですね。

これはエックスサーバーを契約した時から自動的にONになっているのですが、mod_pagespeed が原因でCSSのカスタマイズが変更されないことがあります。

実はこれ、サイトを高速表示するためのキャッシュ関連の機能なのですが、古い情報が残ったままになるのでカスタマイズが反映されないことが頻発するんですね。

普段はONにしておいて問題ない機能ですが、CSSをカスタマイズする時はOFFにしておきましょう。

設定変更は簡単です。

まずエックスサーバーのサーバーパネルにログインし、mod_pagespeedの設定画面を選択。

変更を加えたいドメインを選択すると mod_pagespeedがONになってることがわかりますね。

「OFFにする」ボタンをクリックして mod_pagespeed をOFFに変更します。

これでOK！

ブログに戻り更新してみましょう！

ちゃんとカスタマイズが反映されてますね！

今度こそめでたしめでたし！

まとめ

ここまでやれば完璧にカスタマイズが反映されるようになりました。

原因はエックスサーバー。意外な盲点でした。

ではここでCSSカスタマイズを100％反映させるための方法のまとめです。

まず疑うべきポイントは次の6つ。

1. コードは正しいものが入力されてあるか
2. すべて半角で入力されてあるか
3. スタイルシートの正しい場所に記述されているか
4. ブラウザのキャッシュが残ってないか
5. プラグインが邪魔してないか
6. エックスサーバーのmod_pagespeedがONになってないか

この6つを確認すれば完璧です。

特に今回お伝えしたいのは6番のmod_pagespeedの設定。

見落としがちなので注意しましょう。

そしてこれ以降CSSにカスタマイズを加えた時は以下の順番で作業するいいですね！

1. CSSコードを入力して保存する
2. ブラウザのキャッシュを消す
3. サイトを更新する

2番でキャッシュを消すを入れたのは確実性を求めるためです。

これで大丈夫！快適なカスタマイズライフをお楽しみ下さい！