はてなブログのCSSを変更しても反映されないときの対処法

はてなブログユーザーということでProgateで学んだCSSの知識を活かして｢はてなブログ｣のデザインを変えていました。しかし、「なぜか反映されない！？」というときがありまして…。原因を調べてみると単純な理由だったので、忘備録として紹介します。

画像付きで説明しますが、手っ取り早く答えを知りたい方は最後まで一気にスクロールしてもらえればと思います。

WEBをデザインするなら頻繁に使用するツールで、キーボードの「F12」を押すことで利用できます。あらゆるWEBサイトのCSSを確認することが出来るので、WEBデザインを学ぶときは重宝する便利なツール！CSSを使うなら覚えておくと便利です！

F12 開発者ツールは、Web ページの作成とデバッグをサポートするツール群です。（F12 開発者ツールについて (Windows)）

f:id:trrun:20170202191542p:plain

開発者ツールで確認すると記入したはずのCSSに取り消し線？？

エラーコードは｢invalid property value｣。要するに、僕の打ったCSSがエラーになり反映されていない！？

f:id:trrun:20170202192800j:plain

原因を調べてみると…「全角スペース」でした。

CSS記述欄に全角スペースが入力されているとエラーとなってしまいます。上の画像であれば、赤線部の部分はすべて全角スペースが入力されています。

ぶっちゃけ、見た目じゃ判断できないですよね…

はてなブログのCSS入力画面では、改行時に入力位置を自動で調節してくれる便利な機能があります。最初に記入したデータに全角スペースが挟まっていたため、すべてエラーを出したってことです。便利な機能が裏目に…(´；ω；`)ｳｯ…

要するに、コード内にある全角スペースを取り除くとOK!

なのでひとつひとつ消していくと…。

これが。

f:id:trrun:20170202191542p:plain

こうなりまして…

f:id:trrun:20170202193857p:plain 無事反映されました！

一言で言うと

入力したコードの前後に全角スペースがないか確認する

です。その確認には開発者ツールが便利です。調べてみると単純なことでした。ケアレスミスで無駄な時間を過ごしてしまいました。もっとCSSの入力は気をつけなきゃ…。

かるみに