ワードプレスに追記したCSSが反映されない場合の対策方法とは?

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

新しくCSSを追記したのにレイアウトがうまく適用されない現象があります。一般的には「キャッシュ」を読み込んでいるため起こります。キャッシュはブラウザ上に保存される一時的なデータですね。

ワードプレスに追記したCSSが反映されない場合の対策方法とは?

以前に別の記事でも解説した通りどんな環境もキャッシュが溜まることがあります。

キャッシュはブラウザ上に保存される“一時的なデータ”です。カンタンに言えば更新したはずのウェブサイトでも最新ファイルが開かず古い状態を読み込んでしまうことを「キャッシュ」と呼びます。

ウェブサイトに追加した最新のCSSファイルが読み込まれないのもその1つ。ブラウザ(ChromeやSafari)は閲覧者にできるだけ素早く閲覧できる環境を提供するためにキャッシュを使います。

まずはキャッシュの仕組みを知る

前提としてキャッシュを理解するには2つの目線が必要です。

1. ウェブサイト側が生成するキャッシュデータ(運営元)
2. 来訪ユーザー側に残されるキャッシュデータ(閲覧者)

まずは「ウェブサイト側に蓄積されるキャッシュデータ」から解説いたします。

1. ウェブサイト側が生成するキャッシュデータ(運営元)

もしウェブサイトに「キャッシュ系プラグイン」を導入しているとウェブサイトの格納サーバー上にキャッシュデータを作り出します。キャッシュデータはデータベース通信が重たくなりがちな状況の解決策。

特にワードプレスはウェブサイト内にユーザーが訪れる度「ワードプレスとデータベースがリアルタイム通信」をする仕組みです。データベースの処理が増えるとページの表示は重たくなります。

そこでリアルタイム通信ではなく“キャッシュ化したデータ”を使って軽く見せます。つまり、キャッシュ系プラグインを導入しているウェブサイトは来訪ユーザーに少しだけ古いデータを開かせるわけです。

もしキャッシュ系プラグインを導入していないならユーザーは常に最新でデータを閲覧できます。

2. 来訪ユーザー側に残されるキャッシュデータ(閲覧者)

ウェブサイト側が生成するキャッシュデータの次は「ユーザー側に保存されるキャッシュデータ」。

このデータはユーザー側で保存される一時的なデータ。主にブラウザ(ChromeやSafari)が作り出します。キャッシュ系プラグインが動いていないウェブサイトで古いデータを見たら自身のキャッシュデータです。

特に最近の主要ブラウザはキャッシュデータを多用する仕組みになっています。その方が来訪ユーザーとしては「ウェブサイトを快適に利用できるから」ですね。あと少しだけ専門的な話をすると「CSSファイルよりもJavaScriptファイル」の方がキャッシュを読込みやすくなっています。

CSSは最新ファイルなのにJavaScriptが少し古いデータを読み込んでいるというのはよくある現象です。

キャッシュを強制一掃する方法

上記をまとめると「運営元と閲覧者のどっちのキャッシュデータなのか?」の判断がむずかしくなりますよね。もし運営元のウェブサイトがキャッシュプラグインを導入していないなら来訪者側で対策可能です。

上記はGoogle Chromeのスクリーンショットです。更新ボタンからキャッシュを消去して再読込みができます。一般的に「ウルトラスーパーリロード」と呼ばれているのでぜひお試しくださいませ。

以前に別の記事で手順を書いているので操作方法はチェックお願いいたします。
Google Chromeでウルトラスーパーリロードを試す方法

まだキャッシュを読み込む場合

もしあなたがウェブサイトの運営者で管理画面からキャッシュをリセットする機能があれば試してみましょう。

キャッシュ系プラグインは定期的にキャッシュが空になるので上記の通り手動で削除もできる仕組みです。

💻受講料無料でプログラミング習得

⇒ 完全無料のプログラミングスクール - 手に職をつけて安定的に働きたい人へ -

サイトのキャッシュクリアとスーパーリロードでも改善しない場合

CSSをうまくアップロードできていない可能性もあります。もし仮に最新のCSSが反映されないならサーバー上の正しい位置にデータが上がっているか直接ファイルを開いて確認してみましょう。

まとめ

本日は「追記したCSSが反映されない場合の対策方法」を解説いたしました。

大体が「ウルトラスーパーリロード」で解決いたします。キャッシュ系プラグインを導入しているなら導入プラグインの手順に沿って「キャッシュを空にする」を試してみればOKです。操作方法もカンタン。

もし反映されずに困っている方がいたらぜひお試しくださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください