[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のリロードボタン

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

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

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

最近、ブラウザのキャッシュって結構表示に関する悪さをするものだと感じています。 というのも、僕はテーマ配布サイ…
自作テーマのフォーラムの方に、よく表示の不具合報告をいただきます。 僕もフォーラムで報告が多いので気づいたので…
WEB制作などの動作確認で、キャッシュは時々表示不良の原因となり、制作者を混乱させます。 その混乱の解消方法と…

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

さらに希に、ページキャッシュプラグインで生成されたページの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の登録方法の紹介です。 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を使用させていただいております。 ブログ外観のカスタマイズをし...
GitHubリポジトリ

不具合等ありましたらGitHubに、ご連絡いただけると幸いです。

yhira/simplicity2

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

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