アメブロでCSSの編集結果がブログ画面に反映されない原因は？

アメブロをカスタマイズしていて、CSSを編集したのに、なぜか編集結果がブログ画面に反映されないということはありませんか？

実は、管理人がこれまでに頂いたアメブロのカスタマイズに関する質問で最も多かったのが、

「記事のとおりCSSを編集してみましたがブログ画面に反映されません。なぜでしょう？」

というものでした。

Google検索などから当サイトのアメブロのカスタマイズ方法を見つけてくれて、その記事に書いてあるとおりにCSSを編集したはずなのに、自分のブログを見るとなぜか反映されない。

と、悩む人がとても多いようです。

では、アメブロでCSSの編集がブログに反映されない原因は何か？

これまでの管理人の経験上、多かった事例を3つご紹介したいと思います。

CSS編集用デザインの新・旧が違っている

まず、残念ながら、アメブロの設定が対応する状態になっていないというパターンです。

現状、アメブロのCSS編集用デザインという名前のデザインは4つありますが、この4を大きく分類すると新旧２つのグループに分けることができます。

アメブロの4つの「CSS編集用デザイン」の違いや特徴について理解する

これからアメブロのカスタマイズをしようと思っている。 CSS編集用デザインが4つもあって、どれを使ってカスタマイズすれば良いのかわからない。 4つある「CSS編集用デザイン」 アメブロには、カス...

当サイトで紹介しているアメブロのカスタマイズ方法は、ほとんどが新CSS編集用デザイン向けです。

中には新旧どちらにも使える場合もありますが、たいていは新CSS編集用デザイン専用のカスタマイズ方法で、それらは、旧CSS編集用デザインのアメブロに適用しても全く無反応となることが多いです。

ですので、旧CSS編集用デザインを利用していて、新CSS編集用デザインに変更したくない場合は、旧CSS編集用デザイン向けの同様のカスタマイズ方法が公開されていないか探してみて下さい。

変更した位置よりも上でCSSに書けないことを書いている

次に、CSSに書けないことを書いてしまってCSSでエラーが発生しているパターンです。

CSSにはCSSの記述ルールがあって、そのルールに従って記述する必要がありますので、ルール違反になる書き方をしてしまうとエラーが発生します。

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

例えば、

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

なども、エラーになってしまいます。

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

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

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

↓この区切り線なら大丈夫です。

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

新CSS編集用デザインで間違いないのに、何を書いてもプレビューにすら全く反映されないというときは、その位置よりも上に、何か文法違反になりそうな怪しい記述がないか探してみるといいと思います。

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

これも、CSSがエラーになってしまっていますが、こちらは必要な記述が抜けてしまっているパターンです。

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

という形です。

「セレクタ」や「プロパティ」の意味がよくわからない人でも、実際にある程度CSSの中身を見ている人なら、いくつかある「プロパティ」と「値」のセットの前と後に波括弧が必要なのはお分かりになるのではないでしょうか。

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

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

直近に変更した位置だけではなく、それよりも前（上）の方のどこかで抜けていることもあります。

たとえば、↓こんなCSSのコードがあるとします。

本来「color: #00f;」の後に閉じ括弧「 } 」が必要なんですが、それが無いため、その次の「a: hover {」という行で文法間違いのルール違反になってエラーが発生します。

上でも書きましたが、CSSは上から順に理解されて反映されてますので、この位置でエラーになると、そこから下に何を追記しても無視されてしまい、ブログもに反映されなくなってしまいます。

というわけで、ルール違反になるような「HTMLタグ」や「メモ書き」「区切り線」などは書いていないのに、何を書いても反映されないという時は、閉じ括弧「 } 」が抜けていないかチェックしてみてると問題が解決するかもしれません。

CSS文法チェックツール

なお、CSSの文法チェックができる便利なサイトがありますのでご紹介します。

W3C CSS 検証サービス

アメブロのCSSの内容をコピペして「検証する」ボタンをクリックすると、エラーを見つけて表示してくれます。

エラー内容を理解するにはある程度の専門知識が必要になると思いますが、当記事でご紹介した「ルール違反の記述をしてしまっている」「閉じ括弧が抜けている」については、その位置を見つける手がかりになることが多いのでお勧めです。

まとめ

以上、アメブロでCSSの編集結果がブログ画面に反映されない原因をご紹介しました。

• CSS編集用デザインの新・旧が違っている
• 変更した位置よりも上でCSSに書けないことを書いている
• 変更した位置よりも上のどこかで閉じ括弧「}」が抜けている

もちろん他にも原因となり得ることはたくさん考えられますが、（コピペでのカスタマイズの場合は特に）これらの何れかであることが多いと思いますので、アメブロのカスタマイズの際のトラブル解決にお役立て下さい。