読者です 読者をやめる 読者になる 読者になる

かるみに

趣味とともに生きる

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

デザイン勉強中のすーく(@sytry7)です。

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

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

開発者ツールとは?(読み飛ばしOK)

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

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

入力したCSSが反映されていない!?

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の入力は気をつけなきゃ…。