アメブロでCSSがブログの公開画面に反映されない原因は?

僕は、アメブロで長らくアメブロカスタマイズのアイデアなんかを書いていたこともあって、カスタマイズの件で質問をが受けることが多かったんですが、そんな今までにもらったアメブロのカスタマイズに関する質問で最も多いのは、

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

です。

検索などを使ってカスタマイズ方法を見つけて、その記事に書いてあるとおりにCSSを編集したはずなのに、実際に自分のブログの公開画面を見ると反映されない・・・。

すごく多いんです。

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

これまで質問を受けた時に多かった順に3つ挙げますね。

  • 正常に編集はできたけど「最新の状態」のCSSが使われていない
  • 編集した位置より上にCSSに書いてはいけないことを書いてある
  • 編集した位置より上のどこかで閉じ括弧「}」が抜けている

です。

もちろん他にもあると思いますが、「反映されません」の質問が僕に来たときの原因トップ3はこれらで、おそらく9割以上はこの3つのどれかです。

というわけで、これら3つのアメブロでCSSが反映されない原因について、その対処法を含めご紹介したいと思います。

正常に編集はできたけど「最新の状態」のCSSが使われていない

例えば、

「プレビューで見たら反映されたのに公開ページでは変わらない。」

とか、

「『表示を確認』ではうまくいったのに公開画面を見ると反映されていない。」

という場合、ほとんどこれです。

CSSの編集はできて保存もできたものの、実際にアメブロの公開ページを見る時に、ブラウザが編集後(最新状態)のCSSを使ってくれないのが原因です。

以前は「リクエストは既に処理中であるか無効です」というエラーが表示されてCSSが保存できていないことも多かったんですが、最近はアメブロもシステムを増強したのか、そういうエラーはあまり見なくなりました。

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

対処法は、ブラウザで編集後(最新状態)のCSSを読み込めばOK

アメブロの公開画面を表示した状態で、

  • Windowsの場合:[Ctrl]キーを押したまま[F5]キーを押す(IE、Edge、Chrome、Firefox共通)
  • Macの場合:[Shift]キーを押したまま[更新ボタン]をクリックする(Safari、Chrome、Firefox共通)

という簡単操作をするだけです。

ちなみに、アメブロ以外でもCSSを編集したあとは同じトラブルでこれを使うことが多いので、ご自身のPCの場合の操作を覚えておくと今後役立つと思います。

編集した位置より上にCSSに書いてはいけないことを書いてある

次は、CSS自体がエラーになってしまっているパターン。

CSSがエラーなので、上の場合と違ってプレビューでも反映されません

CSSにはCSSの記述ルールがあって、そのルールに従って記述する必要がありますので、もし、そのルールに従わず好き勝手に書くとエラーになります。

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

例えば、フリープラグインやフリースペースに書くはずの「HTMLタグ」を間違えてCSSに書いてしまった場合。

他にも、自分で見た時に分かりやすいようにと「メモ書き」や「区切り線」を書いた場合。

やはりルールに従って書かないとエラーになってしまいます。

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

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

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

↓これなら大丈夫。

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

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

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

何を書いてもちっとも反映されないというときは、その位置よりも上に、何か怪しい記述がないか探してみるといいと思います。

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

次に、もう一つ、CSS自体がエラーになってしまっているパターン。

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つのどれかだと思いますので、もしよかったら参考にしていただき、アメブロカスタマイズの際のトラブル解決にお役立て下さい。

コメントを残す

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