このブログにあてているテーマは今のところレスポンシブデザインのBlank。
ところがスマートフォンでアクセスしてみると、なんだか違う。なんだ?
Photo credit: ZERGE_VIOLATOR via Visual Hunt / CC BY
テーマを適用しただけではレスポンシブにならない
テーマを適用した直後の見た目を見てみよう。
デスクトップPCでの表示
スマホでの表示
ヘッダー付近
はてなブログのツールバーも表示されているし、画像などの見た目も違う。
フッター付近
はてなブログの広告が表示されていたり、フッターのコピーライト表記も違う。
そして、赤丸のところにPC表示への切り替えボタンがある。
つまり、選択したテーマBlankではなく、はてなのスマホ用テーマで表示されているというわけだ。
一箇所チェック入れるだけで解決
WordPressでブログを作成していると、レスポンシブテーマを入れればそれで終わりという感覚なので、ちょっとだけ戸惑う。
スマホでの表示ははてなのテンプレ強制かいな、などと早合点したけど、そんなことはなかった。ごめん、はてな。
ダッシュボード→デザイン→スマートフォン→詳細設定と行って、「レスポンシブデザイン」にチェック。下の赤丸部分。
チェックをいれてから「変更を保存する」を押す。これだけ。
さて、この後スマホで見てみると
フッター部分もデスクトップから見たのと同じになった。
逆もありかも
詳しく書くほどのことでもないとは思うけれど、自分は最初「へ?」と思ったので、同じように思っている人がいるかもと書いてみた。
このように、レスポンシブデザイン対応のテーマを使うなら、「レスポンシブデザイン」にチェックを入れるべきだろうが、あえてそうしないという手もあるかも。はてなブログのデフォルトのスマホ用テンプレートもよくできており、それはそれで読みやすいからだ。読んでもらうということが大事なのだからそういう選択もありうる。
でも、はてなブログProを使っていて、ヘッダー・フッター非表示にできるのに、スマホだと無料版と同じ見た目というのもちょっと悔しいかもしれない。