[FAQ]WordPressテーマのカスタマイズで変更したCSSが反映されない

WordPressテーマ(子テーマ)のstyle.cssなどでCSSを変更したとします。けれど、「サイトを閲覧しても変更部分が反映されていなかった」なんて場合の対処方法です。

フォーラムへの不具合に関する質問で一番多いのは、この「CSSが反映されない」という質問です。今後僕がフォーラム返信でリンクで案内して楽をするためにも、思いつく対処方法をまとめておこうと思います。

試して欲しいことリスト

CSSが反映されない場合に、試して欲しいことのリストがこちら。

  1. そもそもCSSに書き損じがないか確認してみる
  2. ブラウザをリロードする(F5ボタンを押す)
  3. ブラウザキャッシュを削除する
  4. ページキャッシュプラグインを無効にしてみる
  5. サーバー側のキャッシュ機能(mod_pagespeed等)を無効にしてみる
  6. CDN(CloudFlare等)を利用していないか確認してみる(している場合は停止)
  7. プラグイン全てを無効にしてみる

上記の順番をあたりで確認してみると効率が良いかなと思います。

以下では、それぞれの方法について詳しく説明します。

そもそもCSSに書き損じがないか確認してみる

そもそも、まずstyle.cssに書き込んだCSSに問題がないかチェックしてみてください。

よくフォーラムなどであるのが、カッコの閉じ忘れとかです。こんなの。

a {
  color: #2098A8;
  word-wrap: break-word;


a:hover {
  color: #C03;
}

あと、;(セミコロン)の書き忘れもよくあります。

a {
  color: #2098A8
  word-wrap: break-word;
}

こういったケースでは、Wordpressのテーマ編集画面から見ても、わかりづらいので、CSS文法が強調されるエディターに貼り付けて確認してみてください。

文字色に違和感のある表示になるので気づくことができるかもしれません。

あと、スタイルを適用するCSSセレクタが正しいかなども確認してください。

ブラウザをリロードする(F5ボタンを押す)

CSSが反映されないということは、ブラウザ上に「ブラウザキャッシュ」が残っている可能性があります。

ブラウザキャッシュについては検索で調べてみてください。

ブラウザキャッシュとは
検索

ブラウザキャッシュの更新は、ブラウザのリロードボタンを押すことで行うことができます。

Chromeのリロードボタン

ブラウザキャッシュを削除する

たまに、ブラウザのリロードボタン押しても、ブラウザキャッシュが更新されないことも稀にあります。

そういった場合は、以下の手順でブラウザキャッシュの削除を行ってみてください。

Google Chromeのキャッシュの削除の仕方を紹介しています。Googleヘルプに書いてあるオーソドックスなものから、拡張を利用した簡単なものまで、いろいろな方法があります。
Firefoxでのキャッシュの削除の仕方です。アドオンでクリック一発で削除する方法から、設定で自動的に削除する方法紹介しています。
デスクトップIE11のキャッシュ削除の仕方です。クッキーや履歴などを削除しないで、キャッシュのみを削除する方法です。

ページキャッシュプラグインを無効にしてみる

さらに希に、ページキャッシュプラグインで生成されたページのCSSが反映されている場合も考えられます。

そういう場合は、Wordpress管理画面の「プラグイン」設定項目からページキャッシュプラグインを無効にしてみてください。

ページキャッシュプラグインの有名どころで言えばこんなところでしょうか。

  • W3 Total Cache
  • WP Fastest Cache
  • WP Super Cache
  • Quick Cache

上記のようなプラグインを無効にしてみてください。

大抵のページキャッシュプラグインのデフォルト設定では、管理者にはキャッシュ表示されない設定になっています。ですので、ログインして閲覧するのでも良いのかもしれません。ただし、プラグインによっては動作が変わってくるかもしれないので、無効にして試した方が確実かもしれません。

サーバー側のキャッシュ機能を無効にしてみる

エックスサーバーなどでは、mod_pagespeedのような、サーバーサイドのキャッシュを用意しているサービスもあります。

この機能が有効になっていると、変更したCSSは即座に反映されません。動作確認などをしたい場合は、無効にする必要があります。

詳しい手順は以下を参照してください。

レンタルサーバー「エックスサーバー」のご利用マニュアル|Google社により開発された拡張モジュール「mod_pagespeed」を使用して、Webサイトの表示速度を向上させる「mod_pagespeed設定」機能に関するご案内です。

エックスサーバー以外でもサーバー側にキャッシュ機能がある場合は、無効にしてください。

CDNを利用していないか確認(利用していれば更新・削除)

あと、CloudFlareのようなCDN(コンテンツデリバリーネットワーク)サービスを利用している場合は、CSSや、JavaScriptのようなリソースファイルは、CloudFlare上にキャッシュされます。

CDN上にリソースファイルがキャッシュされている場合は、更新または削除してる必要があります。

CDNを利用しているかの確認方法

CDNを経由していないかなどは、who is情報を確認してみると良いでしょう。

Whois情報を表示します。SEOチェキ!は、サイト調査・検索順位チェックなど、SEOに役立つさまざまなツールを無料でご提供いたしております。あなた自身のサイトや気になるあのサイトをチェック!

ネームサーバー等がCDN(CloudFlare他)になっていれば、CDNを経由しています。

Name Server: CLEO.NS.CLOUDFLARE.COM
Name Server: DAISY.NS.CLOUDFLARE.COM
CDNサービスによっては異なるかも。他は使用したことがないので。

CDNを利用している場合はキャッシュの更新・削除を行う

CDNサービスを利用している場合は、CDN側でリソースの更新(キャッシュの更新・削除)を行う必要があります。

CloudFlareの方法については、以下の「CloudFlareのキャッシュをクリアにする」項目にやり方が載っているので、参照してみてください。

CloudFlareという無料で簡単に使えるCDNサービスの初期設定方法です。利用しているレンタルサーバーなどへのリクエスト数や転送量などを大幅に削減することができます。

その他のCDNについては、検索やヘルプなどを活用して調べてみてください。

プラグイン全てを無効にしてみる

ここまでして、CSSが反映されない場合は、とりあえず(可能性は低いかもしれませんが)その他のプラグインを疑ってみても良いかもしれません。

中には、CSSやJavaScriptのようなリソースを圧縮するプラグインが悪さをしている場合も考えられます。その他にも、予期しない不具合を引き起こすプラグインがないと言えません。

とりあえず、一旦「プラグイン」ページにあるすべてのプラグインを一旦「停止」にします。

2017-08-01_22h24_46

その後、ブラウザでリロード行って、CSSが反映されるようであれば、「プラグインのどれか」に問題がある可能性が高いです。

一つ一つプラグインを有効にしていって、不具合が再現されるプラグインを特定してください。

プラグインが特定されたら、特定されたプラグインのみを無効にして、他を有効に戻してOKです。

まとめ

とりあえず、当フォーラムに寄せられる「CSSが反映されない」という質問の原因は、98%くらいの確率で、この8つのうちのどれかで解決することができるような気がします。

「せっかく子テーマのstyle.cssにカスタマイズコードを書いたのに反映されない」とか「何度リロードしても編集が反映されない」なんて場合には試してみてください。

ここまでして不具合が解消できない場合は、ちょっと無料のサポートフォーラムでは対応しきれないので、プロの方にご依頼ください。

ココナラのようなサービスでは、「Wordpressのトラブルを解決します」なんてスキルを売り出している人が結構おられます。

ココナラの検索フォームから「Wordpress トラブル」等で検索してみてください。

ココナラでWordpress トラブルで検索

サイト ココナラで解決してもらう

関連トピック

同様の問題があったトピックの一部。

つい最近WordPressを始め、カスタマイズに四苦八苦しています。Simplicity2およびSimplicity2の子テーマをダウンロー...
Simplicityの見出しをカスタマイズしよう。コピペでできる5つのデザインを紹介 にある。 ↓のをcssへ貼り付けましたが、、 反映され...
困っているのでご助言いただければ幸いです。 カエレバのデザインを変更しようとSimplicity2の子テーマのスタイルシートに書き込みファ...
質問事項はタイトルの通りで、動作不良時のガイドラインに書かれているようなことは全て試した見たものの改善されずお手上げ状態です。 ・全てのプラ...
タイトルの件、ローカル開発環境にて開発中です。 開発環境 MAMP 4.0.6 (PHP 5.6.27) (MySQL 5.6.33) Wo...
こんにちは、お世話になります。 子テーマのCSSで見出しのカスタマイズを試みているところです。 h1、h2は無事反映されたのですが、 h3...
今までは何の問題もなかったのですが、 cssをいじっても、PC上でなにも反映されなくなりました。(スマホではきちんと反映されています) どう...
こちらのサイトになります。 Simplicity2のバージョンは2.5.9を使用させていただいております。 ブログ外観のカスタマイズをし...
Ptengine
初心者でも見やすいアクセス解析「Ptengine」。無料から使えて、Simplicityから手軽に設定することも可能です。
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)