【アメブロカスタマイズ】デザインの変更が反映されない場合は「キャッシュ」のせいかも

こんにちは、鈴木です。

事務所で坂本真綾を聴きながら、、、
菅野よう子つながりで1998年のDIVEからファンですが、ライブに行った事はありません。

今日はよくコメントで質問頂く「CSSを変更したのに反映されない」と言う質問に対してお答えします。
ちなみに、アメブロはすぐに変更が反映されます。

CSSを変更したのに画面に反映されない

あなたもこんな経験があるのではないでしょうか？この場合、いくつかの原因が考えられます。

• 変更後にページの再読み込みをしていない


• 変更が間違えていてエラーになっている


• 同じ項目に対して2回CSSを書いている


• キャッシュのせいで変更が画面に反映されない

これらの原因はパッと見では判別しにくいのですが、変更した内容や症状によって見分けられますし、それより一番簡単なのは片っ端からチェックする事です。

それでは、それそれの内容と対処方法を簡単に説明したいと思います。

変更後にページの再読み込みをしていない

この場合は、単に変更後のページを読込んでいないだけになります。

なので、ページの「再読み込み(リロード)」を行えば変更後の新しいページが表示されます。

「再読み込み(リロード)」のやり方はブラウザによるのですが、大抵のブラウザでは以下の方法で可能です。

• Windowsの場合、F5キーを押す


• Macintoshの場合、command + Rキーを押す

これは簡単に出来る事なので、変更が反映されない場合は取り敢えずやってみる事をお勧めします。

変更内容に間違えがありエラーになっている

CSSを変更した際に、変更内容に間違えがありエラーになっている場合も考えられます。

これは、CSSが間違えているのではなく「;」や「}」などの必須の記号が漏れている場合で、綴りが違うなどではありません。

この場合、必須の記号が漏れる箇所の前までは正常に表示され、エラーになった以降のCSSが画面に反映されなくなります。ちなみに、綴りなどを間違えた場合は、間違えた箇所だけ反映されません。

この様に、広い範囲でCSSが反映されない場合はこの原因を疑い、もう一度CSSを見直して見る事をお勧めします。

また、Javascriptでエラーがある場合は全てのJavascriptが停止してしまいます。これはわかりやすいので、すぐに気づけると思います。

同じ項目に対して2回CSSを書いている

意外に見落としがちなのがこの場合です。CSSは自由に書けてしまう事で、同じ項目に対して何度もCSSを書いてしまう場合があります。

特に、アメブロのCSSは長くなりがちなので、上から下まで全てを把握するのが難しく、無意識にやってしまいがちです。

ここで注目すべきは、CSSには優先順位があると言う事です。

基本的にCSSは後半に書いた方が優先されます。書いた順に上書きされていくイメージです。しかし、項目の最後に「!important」を記載すると上書きされずに「最優先しろ！」という指示になります。

なので、なんど更新して間違えてもいないのに変更が反映されない場合は、一度CSS全体を見直し、同じ項目に何度もCSSを記述していないか確認して下さい。それでも反映されなければ、「!important」を追加してみて下さい。

「!important」の使い方については、下記サイトが参考になります。

》HTMLクイックリファレンス > CSSの優先順位

キャッシュのせいで変更が画面に反映されない

やっと本題の「キャッシュ」の解説です。「キャッシュ」って何かと言うと、

「キャッシュ」とは、Internet Explorerなどのブラウザが、表示したWebページの情報を一時的にコンピュータに保存しておく機能です。 再度同じWebページにアクセスしたときに、インターネット上のデータではなく、キャッシュに保存されたデータを参照することで、Webページを素早く表示することができます。

引用：早稲田大学ITサービスナビ

変更が画面に反映されない原因の多くは「CSSがキャッシュされる」ことによって起こります。変更する前のCSSをブラウザがキャッシュしていて、変更したあとも新しいCSSを読込んでくれていないわけです。

最初に書いた通り、アメブロはすぐに変更が反映されるため、本当のCSSは変更されています。なので、キャッシュに保存されている古いCSSを破棄して、変更後の新しいCSSを読込めばこの問題は解決します。

古いCSSを破棄する方法は、ブラウザによって異なるのですが、実はアメブロの「よくある質問」にちゃんと書かれています。以下のページを参照して古いキャッシュの削除を行って下さい。

》アメーバヘルプ > キャッシュの削除方法を教えて下さい

あと、キャッシュの削除を行った後、ページの再読み込みを必ず行って下さい。そうしないと画面に反映されません。

まとめ

一見すると同じ「変更が反映されない」でも、色々な原因が考えられます。

今回取り上げた原因も、これが全てと言い切ることは出来ませんが、大抵の場合はこれらをチェックすることで改善できると思います。

原因がわからない場合は、とにかく地道に1つずつ原因をつぶしていく事が、遠回りの様で近道になります。面倒がらずにひとつずつ対処していきましょう。

以上、鈴木でした。

追伸

全部試しても解決しない？もっと複雑な原因も考えられます。
でも、慣れている私ならちょっとブログのHTMLを確認しただけで解決できる可能性が高いです。
時間の節約の為にも、すぐにコーチングを受けて下さい。

↓

コーチングお申し込みフォームはこちら

たまにクリックで応援して頂けると、励みになります。
⇒《人気ブログランキング》

引用元：http://www.wcf-drill.com/2014/07/ameblo-customize-whats-cache.html