grayishスキン適用中

WordPressテーマ設定(CSS等含む)を変更しても反映されない場合のトラブルシューティング方法

FAQ
この記事は約6分で読めます。

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

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

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

試して欲しいことリスト

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

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

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

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

そもそもCSSに書き損じがないか確認してみる(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のリロードボタン

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

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

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

Chromeのブラウザキャッシュを簡単に削除する2つの方法+普通の方法
最近、ブラウザのキャッシュって結構表示に関する悪さをするものだと感じています。 というのも、僕はテーマ配布サイ…
Firefoxでブラウザキャッシュを削除する方法いろいろと、自動削除設定の仕方
自作テーマのフォーラムの方に、よく表示の不具合報告をいただきます。 僕もフォーラムで報告が多いので気づいたので…
Internet Explorer11のブラウザキャッシュ(インターネット一時ファイル)の削除方法
WEB制作などの動作確認で、キャッシュは時々表示不良の原因となり、制作者を混乱させます。 その混乱の解消方法と…

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

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

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

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

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

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

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

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

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

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

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

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

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

その他にも、「Xアクセラレータ」が有効になっている場合も無効にしてみてください。

Xアクセラレータ(エックスアクセラレータ) | レンタルサーバーならエックスサーバー
レンタルサーバー「エックスサーバー」のご利用マニュアル|Xアクセラレータ(エックスアクセラレータ)に関する仕様の一覧を記載しています。

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

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

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

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

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

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

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

Name Server: CLEO.NS.CLOUDFLARE.COM
Name Server: DAISY.NS.CLOUDFLARE.COM

CDNサービスによっては異なるかも。他は使用したことがないので。

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

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

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

無料CDNサービスCloudflareの登録方法。無料で転送量の負荷分散。
今回は、Cloudflareの登録方法の紹介です。 Cloudflareとは、CDN(コンテンツデリバリーネッ…

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

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

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

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

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

2017-08-01_22h24_46

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

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

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

まとめ

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

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

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

FAQ

\お得なキャンペーン実施中!/
エックスサーバーキャンペーン

\WordPressの情報を発信中!/

わいひら

無料WordPressテーマ、Simplicity、Cocoonを作成。当サイトと寝ログを運営しています。

わいひらをフォローする
わいひらをフォローする

高速かつ高い安定性を誇る高性能レンタルサーバー【エックスサーバー】稼働率99.99%以上の高い安定性で、業界トップクラスの高コストパフォーマンスを誇る高品質レンタルサーバーです。

まずは無料お試し10日間。

サービス運営期間:20年

タイトルとURLをコピーしました