koblog

高校生のWEBデザインブログ

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

サムネイル

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

 

 

 

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

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

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

キャプチャー1

 

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

 

自作CSSが反映されない

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

 

CSS
/* Responsive:yes */

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

 

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

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


サムネイルPC
POPULAR
サムネイル

【コピペのみ】ブログのシェアボタンをシンプルでオシャレにカスタマイズしよう!

サムネイル

Twitterの「埋め込みタイムライン」を使う方法

サムネイル

【CSS】コードをオシャレに飾るボックスデザイン


スポンサーリンク


NEW POST
サムネイル

2019.8.30 Fri

Xcodeを使ってスマートフォン用サイトの動作確認をしてみる【Mac】

サムネイル

2019.4.09 Tue

【2019年版】Disqusのおすすめ設定

サムネイル

2019.8.07 Wed

JavaScriptでURLを遷移させる【ジャンプページを作る方法】

サムネイル

2019.6.12 Wed

JavaScriptでページのURLをコピーする機能を作ってみる

サムネイル

2019.6.04 Tue

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

サムネイル

2019.6.03 Mon

Javascriptで「前のページに戻る」リンクを作ってみる