アメブロでCSSが反映されない原因は?

僕が受けるアメブロのカスタマイズに関する質問で、最も多い質問は、

「やってみましたがブログ画面に反映されません。なぜでしょう?」

です。

カスタマイズ方法を見つけ、その記事に紹介されているとおりにCSSを編集したはずなのに、アメブロの画面を見ると反映されないというものです。

では、アメブロでCSSが反映されない原因は何でしょうか?

もちろん、ここで全ての原因を挙げることはできませんが、非常によくある例として以下の3つを挙げることができます。

それは、

  • ブログで「最新の状態」のCSSが使われていない
  • 編集位置より上にCSSに書いてはいけない内容を書いてある
  • 編集位置より上のどこかで閉じ括弧「}」が抜けていてそれ以降が無視されている

です。

もちろん他にもありますが、この3つのどれかが原因であることが本当に多いです。

そこで、当記事では、これら3つのCSSが反映されない原因について、その対処法を含めご紹介したいと思います。

ブログで「最新の状態」のCSSが使われていない

例えば、

プレビューでは変わったのに、ブログでは変わらない。

とか、

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

という場合はこれです。

CSSはうまく修正できたものの、ブログを見る時に、最新の状態(修正後)のCSSがブログ表示で使われていないのが原因です。

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

対処法は、最新の状態(修正後)のCSSを読み込めばOK。

ブログの画面を表示した状態で、

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

だけです。

ご自身のPCの場合の操作を覚えておいて下さいね。

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

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

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

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

例えば、フリースペースやフリープラグインに書くべきHTMLタグなどをCSSに書いてしまった場合。

また、自分で見た時に分かりやすいように「メモ書き」や「区切り線」を書く場合も、ルールに従って書かないと同じことが起こります。

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

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

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

↓これなら大丈夫。

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

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

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

何を書いてもちっとも反映されないという場合は、その位置よりも上に、何か怪しい記述がないか探してみてくださいね。

編集位置より上のどこかで閉じ括弧「}」が抜けていてそれ以降が無視されている

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

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

という形式です。

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

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

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

しかも、最新の追加した位置ではなく、それよりも前(上)の方のどこかで抜けているというもの。

たとえば、↓このCSS

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

a: hover {
  color: #f00;
}

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

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

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

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

まとめ

以上、アメブロでCSSが反映されない原因として、僕がこれまでに遭遇した中のよくある原因を3つご紹介しました。

たぶん、90%以上は、この3つのどれかだと思いますので、よかったら参考にして、カスタマイズのトラブルの解決にお役立て下さい。

 

気に入って頂けたらフォローお願いします

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です