アメブロのカスタマイズをしていて、CSSを編集したのに、なぜか編集結果がブログ画面に反映されないということはありませんか？
参考にした記事で説明されている通りCSSを編集してもブログ画面に反映されず、しかも原因が分からない状態では、悩んでしまいますよね。
アメブロでCSSの編集がブログに反映されない原因は何か？
当記事では、これまで管理人が経験したり相談を受けた中で、多かった事例を3つご紹介したいと思います。
CSS編集用デザインの新・旧が違っている
まず、カスタマイズするために使ったコードが、そもそも対応していない場合です。
現状、アメブロのCSS編集用デザインという名前のデザインが4つありますが、この4つを大きく分類すると新・旧２に分けることができます。
そして、新CSS編集用デザイン向けのコードは旧の方にはほとんど使えませんし、逆に、旧CSS編集用デザイン向けのコードは新CSSにはほとんど使えません。
対象のアメブロが新・旧どちらのCSS編集用デザインを使っているかを確認し、使っている方に対応している方法を探してみて下さい。
変更した位置よりも上でエラーが発生している
次に、CSSでエラーが発生しているパターンです。
CSSにはCSSの記述ルールがあり、そのルールに従って記述する必要がありますので、ルール違反になる書き方をしてしまうとエラーが発生します。
そして、一つエラーが発生するだけで、そこから下には何を書いても処理されず無視されてしまうことがあります。
しかも、CSSの内容にエラーがあっても、アメブロのCSS編集画面ではエラーが表示されないので、気づかないことが多いです。
例えば、フリースペースに書くはずの「HTMLタグ」をCSSに書いてしまったり、あとで見た時に分かりやすいようにと思って文法に合っていない「メモ書き」や「区切り線」を書いてしまったりしてもエラーになってしまいます。
もし、「メモ書き」や「区切り線」を書きたい場合は、その範囲を /* と */ で挟めばOKです(こうすることをコメントアウトと言います)。
つまり、↓この区切り線を書いてしまうとエラーになりますが、
=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:
↓この区切り線ならコメントアウトしているので大丈夫です。
/* =:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:= */
挟む範囲は複数行になってもいいので、↓これでも大丈夫です。
/* =:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:
メモ書きメモ書きメモ書きメモ書き
メモ書きメモ書きメモ書きメモ書き
メモ書きメモ書きメモ書きメモ書き
:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:=:= */CSS編集用デザインの新・旧は合っているのに、何を書いてもプレビューにすら全く反映されないというときは、その位置よりも上で、何か文法エラーになりそうな怪しい記述がないか探してみるといいと思います。
変更した位置よりも上のどこかで閉じ括弧「}」が抜けている
これも、CSSのエラーの一つですが、こちらは必要な記述が抜けてしまっているパターンです。
CSSの基本的なコードの記述方法は、
セレクタ {
プロパティ : 値;
プロパティ : 値;
プロパティ : 値;
}という形です。
「セレクタ」や「プロパティ」の意味がよくわからない人でも、実際にある程度CSSの中身を見ている人なら、いくつかある「プロパティ」と「値」のセットの前と後に波括弧が必要なのはお分かりになるのではないでしょうか。
前に「{」、後に「}」です。
CSSがブログに反映されない時、この後側の閉じる括弧「}」が抜けていることがよくあります。
直近に変更した位置だけではなく、それよりもずっと前（上）の方のどこかで抜けていることもあります。
これは推測ですが、恐らくどこかからコードをコピペ（コピー＆貼り付け）した時にコピー元のコードの範囲選択に失敗して、最後の波括弧をコピーし損ねたのではないでしょうか。
厄介なことに、一番最後の閉じ括弧だけは無くても問題なくブログに反映されるので気づきにくいんです。
そして、ずっと前に貼り付けたコードの閉じ括弧が無いため、忘れた頃にまたコードを追加した際に新しいカスタマイズ内容が反映されず困ってしまうということになります。
というわけで、文法違反になりそうな「HTMLタグ」や「メモ書き」「区切り線」なども書いていないのに、何を書いても反映されないという時は、終了括弧「}」が抜けていないかチェックしてみてると問題が解決するかもしれません。
CSS文法チェックツール
なお、CSSの文法チェックができる便利なサイトがありますのでご紹介します。
アメブロのCSSの内容をコピペして「検証する」ボタンをクリックすると、エラーを見つけて表示してくれます。
エラー内容を理解するにはある程度の専門知識が必要になると思いますが、当記事でご紹介した「ルール違反の記述をしてしまっている」「閉じ括弧が抜けている」については、その位置を見つける手がかりになることも多いのでお勧めです。
まとめ
以上、アメブロでCSSの編集結果がブログ画面に反映されない原因のよくある例をご紹介しました。
- CSS編集用デザインの新・旧が違っている
- 変更した位置よりも上で文法違反の内容を書いている
- 変更した位置よりも上のどこかで閉じる括弧「 } 」が抜けている
もちろん他にも原因となり得ることはたくさん考えられますが、（コピペでカスタマイズする場合は特に）これら3つの何れかであることが多いと思いますので、カスタマイズの際のトラブル解決に役立てて下さい。
