CSSが反映されない原因いろいろ


アメブロカスタマイズのわざめーばです。

こんにちは。

本ブログでは、アメブロカスタマイズに関する質問を、関連記事のコメントで受け付けています。

その中でダントツに多い質問は、

「CSSを編集しましたがブログに反映されません。なぜでしょう?」

です。

では、ちゃんと編集したはずのCSSが反映されない原因は何か?というと・・・、

もちろん色んな原因があるんですが、実は非常に頻度の高い典型的なものが3つあります。

それは、

 ■ブラウザで「最新の情報に更新」していない
 ■閉じ括弧「}」が抜けていてそれ以降が無視されている
 ■CSSにHTMLタグなどの書いてはいけない内容を書いてある

の3つです。

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



ブラウザで「最新の情報に更新」していない


このパターンは、

「表示を確認するではうまくいきましたが、ブログに反映されません」

とか、

「プレビューは変わりましたが、ブログは変わりません」

というパターンが多いのですが、これについては、

 ■ Windowsの場合 ・・・ [F5]キーを押す
 ■ Macの場合 ・・・ [Command]キーと[R]を押す

だけで解決します。

詳しくは、CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」するという記事で説明してありますので、もし必要でしたらご参照ください。



閉じ括弧「}」が抜けていてそれ以降が無視されている


これは、どういうことかというと、例えば以下のようなCSSがあったとします。

.footerNav{
  height:130px;
  top:450px;
  bottom:auto;
}
.footerNavNext{
  background-position:0 -26px;


.footerNavNext:hover{
  background-position:-42px -26px;
}
.footerNavTop{
  background-position:0 -26px;
}

このCSSは実は間違っている箇所があります。

それは、赤文字の部分の設定の最後に閉じ括弧『}』が必要だということです。

これがないだけで、それ以降、つまり緑文字の部分は全て無視されてしまい、プレビューにも、もちろんブログにも反映されません。

更にこれに続いてCSSに新たな設定を追加しても、やはり無視されてしまい、アメブロの方には全く変化がないという事態になります。

この状態になってしまう原因は、どうやらどこかからコードをコピペするときに、最後の閉じカッコ『}』をコピーし損ねることのようです。

注意しましょう。

なお、これについても別記事(CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする)で説明してありますので、よろしければごらんください。



CSSにHTMLタグなどの書いてはいけない内容を書いてある


これは何かと言うと、フリープラグインやフリースペースに書くべき内容、つまりHTMLタグを、ユーザーCSSに書いてしまったために起こるトラブルです。

CSSは人間が見るメモ書きではなく、(人間ほどは融通が利かない)コンピューターが読んで理解する設定ファイルですので、きちんとしたルールに沿った内容しか書くことは許されません

CSSとHTMLはまったく別物ですので、ユーザーCSSにフリープラグインやフリースペースに書くべきHTMLを書くとエラーになってしまうんです。

そして、エラーになると、それ以降の一部あるいはすべてが無視されてしまい、ブログに反映されなくなります。

公開されているアメブロカスタマイズ用のコードは、たいていはどこへ記述する内容か明記されていると思いますので、コピペする場合などは、必ずどこへコピペするのかを確認するようにしてくださいね。

なお、CSSでは、HTMLに頻繁に出てくる<の文字が使われることは基本的にありません(絶対ではありませんが)。

ですので、<がある時点で「これはCSSに書くのは間違いでは?」と思って、コピペ先をもう一度確認するようにしてください。

ちなみに、HTMLタグ以外にも、例えば、

---------------------------------------

とか

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

のようなものを区切り線として書いたことが原因となってエラーとなっている場合もよくあります。

とにかく、ルールに沿ったものしか書けないという原則がありますので、ぜひこの点注意して、無用な苦悩は避けるようにしてくださいね。




以上、非常に多いCSSが反映されない原因についてご説明しました。

ぜひ参考にしていただき、アメブロカスタマイズ時のトラブル解決にお役立てください。



関連記事


CSSを編集してアメブロをカスタマイズする方法
CSSを編集した後はF5キーでブラウザの表示を「最新の情報に更新」する
CSSに設定を追加しても反応がないときは直前の閉じカッコをチェックする
アメブロカスタマイズ目次
アメブロカスタマイズで成功するブログを作ろう トップページ



2012/11/21 加筆修正しました。
2012/01/29 記事公開。



コメント(29)