カスタマイズのためにCSSを編集してもアメブロに反映されない原因と対処法は?

  • アメブロのCSSを編集したのにカスタマイズ内容が反映されない。
  • CSSを編集して「表示を確認する」ではできているのに公開画面に反映されない。
  • CSSが反映されない原因や対処法がわからない。

初心者が必ずぶつかる壁

初心者がネットや書籍を参考にアメブロのカスタマイズをしていて、必ずぶつかる壁と言ってもよい問題に、

CSSを編集して保存したのにブログ(アメブロの公開画面)に反映されない

というものがあります。

やっとカスタマイズ方法を見つけて、説明されているとおりにCSSを編集したはずなのに、アメブロの公開画面で確認すると反映されていないというものです。

  • 何度もCSSを見直し、保存し直してもうまくいかない。
  • 「表示を確認する」ではちゃんとできているのに、アメブロの公開画面で確認するとまったく反映されていない。

など、本当に困り果ててしまいますよね。

そこで当記事では、このような、CSSがアメブロに反映されない原因について、その対処法を含め、いくつかご紹介したいと思います。

CSSが反映されない原因と対処法

では、アメブロで編集したCSSの内容が公開画面に反映されない原因は何でしょうか?

もちろん、ここで全ての原因を挙げることはできませんが、初心者がよくやってしまう例として以下の3つをご紹介します。

  • ブラウザが最新のCSSを読み込んでいない。
  • 編集位置より上にCSSに書いてはいけない内容を書いてある。
  • 編集位置より上のどこかで閉じ括弧「}」が抜けている。

もちろん他にもありますが、僕がこれまでに質問を受けた事例では、この3つのどれかが原因であることが本当に多く、恐らく90%以上だと思います。

ブラウザが最新のCSSを読み込んでいない

プレビューではできているのに、アメブロの公開ページを確認すると変わっていない

あるいは、

「表示を確認する」ではうまくいったのに、ブログを見ると反映されていない

という場合、まず間違いなく「ブラウザが最新のCSSを読み込んでいない」のが原因です。

この場合、CSSの編集はうまくいっていますが、確認のためにアメブロを表示した時に、その時点での最新の(修正後の)CSSが表示で使われてず、修正前の古いCSSを使って表示されてしまうのが原因です。

ブラウザ(Google ChromeやInternet Explorer等)が、高速表示などを目的として、以前読み込んだ内容を記憶しているために起こります(この仕組をキャッシュと言います)。

本来は、CSSを修正したら自動的に最新のCSSが読み込まれるよう、アメブロのシステム側で対応してくれていればこの問題は発生しないのですが、そうはなっていないために起こるトラブルです。

対処法は、最新の(修正後の)CSSを読み込む操作をすればOKです。

アメブロの画面を表示した状態で、キーボードの以下のキーを押してみて下さい。

  • Windowsの場合 ・・・ [Ctrl]キーを押したまま[F5]キーを押す(IE、Edge、Chrome、Firefox)
  • Macの場合 ・・・ [Control]キーを押したまま[R]を押す(Safari)

これで、CSSの編集がアメブロの表示に反映されたかことが確認できると思います。

この方法は、あくまでも表示確認をしているパソコンで最新の状態を見る方法です。残念ながら、読者はこのような操作をしてくれませんので、読者が見ているページは最新になるまでには時間がかかることがあります。

編集位置より上にCSSに書いてはいけない内容を書いてある

CSSにはCSSの記述ルールがあって、そのルールに従って記述する必要があります。

もし、そのルール以外のことを書くとエラーになってしまいます

そして、CSSは上から順に理解されて反映されていくという決まりがあるので、ある位置でエラーになると、その位置で処理が停止してしまい、そこから下に何を書いても反映されません

例えば、

  • フリースペースやフリープラグインに書くようなHTMLタグを、間違えてCSSに書いてしまった場合
  • 自分で見た時に分かりやすいようにと、ルールを無視して「メモ書き」や「区切り線」を書いた場合

なども、エラーが発生します。

もし、「メモ書き」や「区切り線」を書きたい場合は、その範囲を「/*」と「*/」で挟めばOKです。

すると、そこは、ある程度自由に注釈(コメントと言います)を書ける、CSSのルールが適用されない範囲となります。

例えば、↓この区切り線はエラーになりますが、

=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:

↓これなら大丈夫。

/* =:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:= */

挟む範囲は複数行になってもいいので、↓これでも大丈夫です。

/* =:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:
メモ書きメモ書きメモ書きメモ書きメモ書きメモ書き
:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:= */

CSSの末尾に何を書いてもまったく反映されないという場合は、その位置よりも上に、何かルールに従っていない怪しい記述がないか探してみてください。

編集位置より上のどこかで閉じ括弧「}」が抜けている

これも、CSSの書き方のルール違反の1つです。

CSSの基本的な記述方法は、

セレクタ {
  プロパティ : 値;
  プロパティ : 値;
  プロパティ : 値;
}

という形式です。

「セレクタ」や「プロパティ」は専門的なので分からないかもしれませんが、「プロパティ」と「値」の組み合わせがいくつかあり、その前と後に括弧が必要なのはお分かりいただけると思います。

前に「 { 」、後に「 } 」です。

CSSが反映されないトラブルの原因として、初心者は、なぜかこの後側の括弧、つまり閉じ括弧「 } 」が抜けるミスをしてしまっていることがよくあります。

しかも、今編集している位置ではなく、それよりも前(上)の方のどこかで抜けているというもの。

たとえば、↓このCSS

body {
  font-family: “メイリオ”;
  font-size: 16px;
}
a {
  color: #00f;

a: hover {
  color: #f00;
}

本来「color: #00f;」の後に閉じ括弧「 } 」が必要ですが、これがないため、その後(下)の「a: hover {」の行でエラーが発生します。

そして、この後、何を書いても無視されてしまうということです。

閉じ括弧を忘れた位置ではなく、それよりも下でエラーになるのが、初心者にはわかりにくく、問題を発見しにくいところですね。

ルール違反になるような「HTMLタグ」や「メモ書き」「区切り線」などは書いていないのに、何を書いても反映されないという場合は、この閉じ括弧「 } 」抜けを疑ってチェックしてみて下さいね。

まとめ

以上、カスタマイズのためにCSSを編集してもアメブロに反映されない原因として、初心者がよく悩むものを3つと、その対処法をご紹介しました。

よかったら参考にしていただき、アメブロカスタマイズのトラブルの解決にお役立て下さい。

関連記事

コメントを残す

メールアドレスが公開されることはありません。

ご覧いただきありがとうございます。どうぞお気軽にコメント下さい。ただし、コメントでのご質問の方は、記事内容に関することだけに限定させていただきます。ご了承下さい。