CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」する

CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」する

最新の情報に更新する

アメブロカスタマイズのわざめーばです。

こんにちは。

CSSを編集した後は、Windowsの場合は『[F5]キー』、Macの場合は『[Command]キーと[R]』を押して、ブラウザの表示を「最新の情報に更新」してから結果を確認して下さい。

アメブロカスタマイズの経験のある多くの方は、アメブロをカスタマイズしているとき、

「CSSは正しく修正したはずなのに、ブログに反映されない」

とか、

「『表示を確認する』では変わったのに、ブログを見ると変わっていない」

という経験があると思います。

実は、ウェブブラウザ(インターネットエクスプローラなどのウェブサイトやブログを見るためのツール)は、常に最新の状態を表示しているわけではありません。

これは、ウェブブラウザが、キャッシュという仕組みを持っているためです。

キャッシュは、普段は、一度読み込んだ情報を一時的にパソコン内に保存しておいて再利用することで、むやみにサーバーや通信回線に負荷をかけないようにしたり、また、高速な表示を実現するために働くうれしい仕組みです。

ですが、CSSを書き換えた直後の場合、このキャッシュが働いてしまうと、ウェブブラウザがパソコン内のキャッシュに保存してある変更前の古いCSSを使って表示してしまって困ることがあります。

そのため、

「CSSは正しく修正したはずなのに、ブログに反映されない」

といったことが起こってしまいます。

(ちなみに、これはCSSだけに限らず、例えばフリープラグインを外部化したJavaScript(JS)ファイルや、他のページをiframeの中で呼び出した場合などにも起こります)

なので、CSSを編集した後、カスタマイズした内容がうまく設定できたかどうかを確認するためには、ブラウザに表示される内容を「最新の情報に更新」する必要があります。

そのための操作が、

 ■ Windowsの場合 ・・・ [F5]キーを押す
 ■ Macの場合 ・・・ [Command]キーと[R]を押す

です。

なお、マウス操作でも「最新の情報に更新」することができますので、以下に主なブラウザ毎の方法を書いておきます。

よかったら参考にしてください(OSは何れもWindowsです)。

IE(Internet Explorer)の場合

IE 最新の情報に更新

IE(画像はIE8)は、アドレスバー(「http://・・・・」のように、WebページのURLを表示・入力するツールバー)の右の方に、上向きと下向きの矢印が書かれた最新の情報に更新(F5)ボタンがありますので、これをクリックすればOKです。

Google Chromeの場合

Chrome このページを再読み込みします

Google Chromeは、ブラウザの左上の方、左から三つ目に矢印がグルっと一周まわったようなこのページを再読み込みしますボタンがありますので、これをクリックすると最新の情報に更新されます。

Mozilla Firefoxの場合

Firefox このページを再読み込みします

Mozilla Firefoxは、アドレスバー(「http://・・・・」のように、WebページのURLを表示・入力するツールバー)の右の方に、矢印がグルっと一周まわったようなこのページを再読み込みしますボタンがありますので、これをクリックすれば最新の情報に更新されます。

Safariの場合

Safari 現在のページを再読み込みします

Safariは、アドレスバー(「http://・・・・」のように、WebページのURLを表示・入力するツールバー)の右の方に、矢印がグルっと一周まわったような現在のページを再読み込みしますボタンがありますので、これをクリックすればOKです。

その他

その他、OperaやSleipnirなどのブラウザの場合も、たいていは、上記のいずれかのブラウザと同じか似た位置に同じか似たボタンがあって、それをクリックすることで最新の情報に更新することができます。

CSSや外部JSファイルなどの内容を変更した直後のブログの表示確認のときは、まずは、ブログを表示した状態でブラウザの表示を最新の情報に更新することをお忘れなく。

関連記事

CSSを編集してアメブロをカスタマイズする方法
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ

2012/11/20 Macでの操作の追加等の修正をしました。
2011/09/30 公開。