はてなブログのCSSがスマホで反映されないときの対処法

はてなブログではスマホでCSSを反映させるには、設定を少し変える必要があります。またCSSを自作する際にもコードを書き足す必要があります。そこで今回ははてなブログのCSSがスマホで反映されない場合の対処法を紹介します。

テーマのCSSが反映されない

デザイン設定→カスタマイズ→デザインCSS

はてなブログの設定ページを開き、上の順に進んでいくと「デザインCSS」という欄が見つかると思います。そこからスマホのアイコンを押して下のような画面に変えます。

画面が変わったら一番下にある「レスポンシブデザイン」にチェックを入れます。これでスマホでもCSSが反映されるようになります。注意点ですが、テーマがレスポンシブ対応でない場合はきちんとデザインが反映されない場合もあります。

自作CSSが反映されない

自分でCSSを書く場合にはメディアクエリだけでは不十分です。はてなブログではコメントとして下のコードを冒頭に書く必要があります。

CSS
/* Responsive:yes */

これでスマホでもCSSが反映されるようになります。

Minify化したCSSが反映されない

Minify化すると上で紹介したコメントが勝手に消されてしまいます。詳しくは下の記事で紹介しているので参考にどうぞ。