現在デフォルトスキンとして「COLORS(ブルー)」を適用中。

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つの方法+普通の方法
Google Chromeのキャッシュの削除の仕方を紹介しています。Googleヘルプに書いてあるオーソドックスなものから、拡張を利用した簡単なものまで、いろいろな方法があります。
Firefoxでブラウザキャッシュを削除する方法いろいろと、自動削除設定の仕方
Firefoxでのキャッシュの削除の仕方です。アドオンでクリック一発で削除する方法から、設定で自動的に削除する方法紹介しています。
Internet Explorer11のブラウザキャッシュ(インターネット一時ファイル)の削除方法
デスクトップIE11のキャッシュ削除の仕方です。クッキーや履歴などを削除しないで、キャッシュのみを削除する方法です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

2017-08-01_22h24_46

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

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

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

まとめ

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

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

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

FAQ
スポンサーリンク
わいひら

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

わいひらをフォローする
わいひらをフォローする
おすすめレンタルサーバー

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越しオプションあり(有料)
サービス運営期間:1年3ヶ月

1年以上の契約をする場合は、クーポンコード入力でさらに10%割引(※2019/12/31まで)。

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可
サービス運営期間:16年

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
◎アダルト・出会い系サイト可
○サーバ引っ越しオプションあり(有料)
○サーバー料金をチャージ払いが可能
サービス運営期間:3年

とにかく速い。サイトに表示スピードを求めるならココ。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
○DB復旧は無料(ファイルは有料)
○サーバ引っ越しツールあり
○サーバー料金をチャージ払いが可能
△新しいサービスなので運営櫪がまだ短い
サービス運営期間:1年1ヶ月

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
◎アダルト・出会い系サイト可
○http/2(高速化プロトコル)に対応
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)
サービス運営期間:3年

Cocoon

コメント テーマの質問はフォーラムへ

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