「カスタマイズしたのに反映されない!」と思ったら確認しておきたい3つのポイント


内藤です。

「カスタマイズしたのに反映されない!」

よくいただく質問です。

カスタマイズしたのに反映されていない場合には、考えられる原因がいくつかありますのでチェックしてみましょう。

1.キャッシュ(古いデータ)を読み込んでいる

ブラウザ(インターネット閲覧ソフト)が、古いデータを表示している可能性があります。
その為本来は反映されているのに、古いデータをみて、反映されていないと勘違いしてしまいます。
最も多いパターンです。

編集後は、必ず画面上にあるアドレスバーの横にある更新ボタンを押しましょう。

IE


GoogleChrome


FireFox


もしくは、キーボードのF5ボタンでも更新されます。

2.CSSが保存されていない

アメブロでは、CSSの編集をして保存しようとしたときにエラーがよくでます


こんな赤い注意書きがでたら焦らずに、もう一度保存ボタンを押しましょう。

3.CSSの書き間違い

CSSの書き間違いでよく見られるのが

・ } ← 閉じかっこ忘れ

例えば

/*リンク*/
a{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}
/*リンク:訪問済み*/
a:visited{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}

が正しいのですが、間の }が抜けてしまっているパターン

/*リンク*/
a{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/

/*リンク:訪問済み*/
a:visited{
text-decoration:none; /*文字装飾*/
color:#0066CC; /*文字色*/
}

2つめの リンク:訪問済み のCSSが読み込まれなくなります

・コメントアウトミス

/* リンク:訪問済み */

 のようなCSSの補足をするようなコメントアウト(説明書き)は

/* と */ で囲む必要があります.

これが

 リンク:訪問済み */

のように不完全だったりすると、CSSが正しく読み込まれません。

・classの . (ドット)抜け

などのように、class名がある場合CSSでは先頭に .(ドット)を付けます

.articleText{
font-size: 14px; /*文字サイズ*/
line-height:1.6; /*行間*/
}

これがドット抜けすると正しく反映されません。

articleText{
font-size: 14px; /*文字サイズ*/
line-height:1.6; /*行間*/
}

反映されないと思ったら、1つ1つ確認してみましょう。

2017年3月からのアメブロ常時SSL化に際しまして、「フリープラグイン」を使ったカスタマイズが利用できなくなる可能性があります
【追記あり】アメーバブログの常時SSL化に伴う仕様変更について|スタッフブログ
フリープラグインを使ったカスタマイズはせずに、CSSを使ったカスタマイズを行ってください