CSSが反映されるのに時間がかかる?ウェブキャッシュが原因かも

作業

CSSの変更を保存した後、確認のためにサイト表示をしても、変更が反映されていないことがあります。

このような場合、ただ変更が遅れているだけなのでしょうか?

どれくらい待てばいいですか?

実は、変更はすでに反映されているけれども、自分の端末で見る時には、サイトのウェブキャッシュデータが残っているために、以前の設定のまま表示されてしまっていることもあります。

その場合、キャッシュを消去すれば、変更が反映されているのを確認できることが多いです。

今回は、CSSの変更を確認することについて書きたいと思います。

Safariの場合

プライベートモード

iPadでサイトの編集をしていて、Safariのブラウザを使用している場合、まずは「プライベートモード」を試してみましょう

これは、画面の右上にある設定ボタンより、切り替えることができます。

まず、四角が2つ重なったマークのところをタップします。

プライベート

プライベート

プライベート」の文字をタップして、白く囲まれたらプライベートモードに切り替わります。

通常モードで表示しても、CSSの変更が反映されていなかったですが、プライベートモードに切り替たところ、最新のバージョンになって表示されました。

早速新しいバージョンのレイアウトを見たら、白抜き文字なのに、背景色を間違えてとても薄い色にしてしまっていたことに気がつきました。

確認して、早めに問題を発見できて助かりました。

これは、見出しタグの文字や背景の色を変更したときのことです。

それで、「よし、できた!」

と思っても、仕上がりをきちんと確認しておいたほうがいいですよ〜。

キャッシュの消去

ウェブキャッシュ消去

ウェブキャッシュ消去

通常モードのときでも、ウェブキャッシュの消去をすることで、すぐにCSSの変更を反映させることができると思われますが、あまり気が進まない方法です。

(方法は、設定」で「Safari」を選択  →  「履歴とWebサイトデータを消去」をタップします

理由として、ほかのサイトで使っている便利なキャッシュデータもまとめて消えてしまうからです。

例えば、カエレバリンクに保存してあるAmazonや楽天などのID番号もリセットされてしまいます。

複数のサイトを登録している場合に、長い数字のID番号を何ヶ所も間違えずに入力し直すのは骨が折れます。

数字を間違えると、せっかく設置したリンク経由でお買い物をしてくれた人がいても、報酬がもらえなくなってしまうのです。

それで、できるだけカエレバリンクに登録した情報を何度も入力し直したくありません。

カエレバリンクとは、この上のリンクのように、Amazonや楽天、Yahoo!ショッピングへのリンクを同時に作成できるツールのことです。

※アフィリエイト関連の記事

アフィリエイトにはどんな種類があるか?

キャッシュとは何か?

タブレット

タブレット

Safariやchromeなどのブラウザでは、通常、以前に開いたことのあるページデータの一部をキャッシュデータとして保存しています。

これによって、再び同じサイトを開くときに、データを読み込む時間を短縮でき、早く表示できるようになっているのです。

キャッシュデータは、消去しても、ブックマークに保存されていものは消えません。

また、基本的にキャッシュデータを消去しても大きく困ることはありません

(ただし、サイト運営者の側からすると、登録したカエレバリンクの情報がリセットされたり、いろいろなログイン状態が解除されたりと、余分な手間がかかります。)

ネット検索をしていると、キャッシュデータがたくさん溜まっていきますので、時々すっきりさせるためにキャッシュデータを消去するとよい場合もあります。

同時に消去されるもの

キャッシュデータは、閲覧履歴の削除の操作をすることでもできます。

その場合、閲覧履歴やクッキー、それまでログイン状態だったのが解除されたりします。

キャッシュデータはあった方がいいか?

ページの表示を早くするためにキャッシュデータが使われているものなので、悪いものではありません。

最近は、インターネットの通信速度が上がっているので、ウェブキャッシュを消去した直後にも表示速度に不便を感じることはなくなってきています。

通常モードを使うか、プライベートブラウズモードを使うかは好みの問題です。

まとめ

CSSを編集して、どのように表示されるか確かめたい時には、Safariの場合、プライベートモードを試してみるのがおすすめです。

※サイト編集・HTML関連の記事はこちら

HTMLコードを使ってみようー文字装飾(太字、下線、色など)

HTMLでの囲み文字の装飾の方法

HTMLで蛍光ペンマーカーをつける方法

スポンサーリンク







シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク