はてなブログのテーマでレスポンシブ対応を選んでいるのにスマホで表示されない時の対処法

はてなブログのテーマでレスポンシブ対応のテーマを選んでいるのに、スマホで見るとパソコン画面をただ単に小さくしただけの表示がされてしまうという方をお見掛けしたので対処法を書いておきます。

「管理画面」→「デザイン」→「デザインスマートフォン」→高度な設定の「詳細設定」

詳細設定の「レスポンシブデザイン」にチェックが入っているかどうか確認します。

テーマがレスポンシブデザインに対応していて、↑のレスポンシブデザインのチェックが入っているのにテーマがスマホを見るとパソコン画面がただ単に小さく表示されているという方は下記を試してみてください。

「管理画面」→「設定」→「詳細設定」→「<head要素>にメタタグを追加」に下記の記述を追加。

<meta name="viewport" content="width=device-width,initial-scale=1.0">

スマホがレスポンシブ対応になりましたでしょうか？

はてなブログのテーマを作成している方向け

はてなブログのテーマを今回初めて作成して非公開で利用した時のことです。

参考にしたサイトが、CSSのファイルは「minify」で圧縮した方がファイルサイズが小さくなって表示スピードが速いと書いてあったので、minifyでCSSファイルを圧縮してテーマストアにアップしました。

パソコンの表示とタブレットの表示は問題なかったのですが、スマホの表示が設定画面の「レスポンシブデザイン」にチェックを入れたにも関わらず、表示がパソコンのままだったんです。

CSSファイルを圧縮せずにテーマストアにアップロードすると、きちんとスマホもレスポンシブデザインになってくれました。

minifyで圧縮すると、コメントはすべて削除されて、不要な行は詰まるので、はてなブログ運営側が指定しているレスポンシブデザインのコメントも消えてしまったんだと思います。

はてなブログのレスポンシブデザインの記述はどうなっているか再度確認してみると

付録: はてなブログのレスポンシブデザインテーマの挙動デザインテーマのCSSにResponsive: yesのコメントが記述されている場合、はてなブログでは下記のようにスマートフォンデバイスに適したviewportをHTMLヘッダーで指定します。

スマートフォン用のサイトを作ったらメタタグにビューポイントの設定を入れないと、パソコンの表示がただ単に小さくなっただけで表示されてしまいます。以下がビューポイントのメタタグ。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

要するに、minifyしてしまうとデザインテーマに折角書いていた「Responsive: yes」のコメントが消えてしまいますよね。

CSSファイルは圧縮して小さくしたいけど、コメント欄が消えてしまうのはこまるし、テーマをインストールしてくれた方にひと手間増やしてしまうのもどうかと思うし。

ということで、現在minifyするかどうか思案中です。

他の方はどのようにされてらっしゃるのでしょうか？コメント欄やはてなブックマークなどでも構いませんのでアドバイスいただけると嬉しいです。