WordPressのスタイルシート（CSS）を変更したところ、
PCの画面ではきちんと変更されているのに、スマホ画面で確認すると反映されない…。
というときに、
変更内容をスマホ画面にも反映させる方法です。
スマホだけでなく、PC画面で反映されない場合も有効です。
スタイルシートの変更がスマホに反映されない
先日、ワードプレスのスタイルシートをいじってブログの見出しのデザインを変えました。
PC画面上はイメージ通りにできたんですが、スマホで確認すると…
反映されていない！
というより変更前よりも見づらくなっていました。
「茶背景に黒文字」という読みづらさ満載の設定なんてしていないのに…。
PC画面ではきちんと反映できているので、スタイルシートの記述が間違っているわけでもなさそうです。
反映されない原因を探しました。
反映されない原因はキャッシュでした
結論ですが、スタイルシートの変更が反映されない原因はキャッシュでした。
キャッシュとは？
キャッシュとはなんぞや？
について少しだけご説明。
「そんなことより解決方法だけ知りたい！」
という方は読み飛ばして下に進んでください。
キャッシュとは、一度見たホームページのデータをまたすぐに取り出せるように保存しておくことです。
普段ホームページを開くとき、パソコンの中では下図のようにブラウザ経由でサーバに保存されているデータを読み込んでいます。
※ブラウザ
グーグルクロムやインターネットエクスプローラーなどのこと。
※サーバ
ホームページのデータがあるところ。
ホームページを開くとき、データの読み込みに時間がかかって表示が遅いことがありますよね。
それを解決するのがキャッシュ。
前回と同じページをまた表示しようとするときに、はるばるサーバまでいってデータを読み込みし直すのは効率が悪いです。
そこで一度見たページのデータをブラウザ上に保存しておく（キャッシュ）ことで、データを読み込みし直すことなく表示することができます。
上の図のようにブラウザとだけデータのやり取りをすることで、サーバに行く手間を省くことができます。
今回のようにスタイルシートを変更すると、サーバにあるデータが変更されることになります。
しかしブラウザには、データ変更前のキャッシュが保存されています。
キャッシュがブラウザ上に残っていると、サーバから変更済データを読み込まれないので、変更した内容が反映されないことになります。
キャッシュを削除する方法
キャッシュを削除すれば、サーバに保存されている変更済データを改めて読み込んでくれます。
私の場合はスマホで反映されなかったため、スマホのキャッシュを削除すれば解決のはず。
変更した内容がPCの画面上で反映されない方も原因は同じです。
PCのキャッシュを削除してみてください。
スマホの場合
スマホでグーグルクロムのキャッシュを削除する方法です。
①キャッシュを削除したいページ以外のページを開きます。
削除したいページで以下を実施してもキャッシュを削除できないみたいです。
新しくグーグルを開きなおしましょう。
②画面右上の設定ボタン（：マーク）－「履歴」－「「閲覧履歴データを削除」
を押していきます。
③「詳細設定」－「キャッシュされた画像とファイル」
にチェックを入れて削除します。
これでキャッシュを削除できました。
スマホで確認してみます。
無事反映されました。
PCの場合
PCの場合は、キーボードのショートカットキーでキャッシュの再読み込みができます。
Ctrl＋F5を押してみてください。
このコマンドをスーパーリロードといいます。
ちなみに、再読み込みはF5が有名です。
しかしF5の場合はキャッシュデータを読み込んでいます。
そのためF5単体では変更結果が反映されません。
原因がキャッシュかどうかを簡単に確認する方法
キャッシュを削除するのも大変な作業ではありませんが、より簡単にキャッシュが原因かどうかを確認する方法があります。
「シークレットモード」を使います。
画面右上の設定ボタン（：マーク）－「シークレットウィンドウを開く」
もしくは、
Ctrl＋Shift＋Nを押す
とシークレットモードとなります。
シークレットモードではキャッシュを保存しないため、キャッシュなしのHPデータを確認できます。
まとめ
スタイルシートの変更結果が反映されないときは一度キャッシュを削除してみるといいかもしれません。
ちなみに当初のスマホ画面が「茶背景に黒文字」になっていたのは、変更途中で一時的に更新したキャッシュが保存されていたためのようです。
アサイベリーアイ」
最近パソコンやスマホを使い続けると目がしょぼしょぼしやすい…
集中してパソコンしていると目が疲れやすくなった…
というときにの原因の一つにアントシアニン不足が考えられます。
アントシアニンを手軽に補うならアサイベリーがおススメです。
アサイベリーにはアントシアニンが多い食材として有名なブルーベリーよりも4.6倍多くのアントシアニンが含まれています。
そのアサイベリーをふんだんに使ったサプリメントの「アサイベリーアイ」。
錠剤タイプのサプリメントなので、手軽にアントシアニンを摂取できます。
初回970円と他のアサイベリー系サプリよりも低価格。
しかも定期販売としては珍しく継続指定回数の制限がありません。
1回だけ試したい！など、気軽に試せるのは嬉しいです。
