45 For Trash

しごうするのか、されるのか。

はてなブログでレスポンシブデザインにしたら設定メニューのチェックも忘れずに。

このブログにあてているテーマは今のところレスポンシブデザインのBlank

ところがスマートフォンでアクセスしてみると、なんだか違う。なんだ?

f:id:shigo45:20151217154224j:plain
Photo credit: ZERGE_VIOLATOR via Visual Hunt / CC BY

テーマを適用しただけではレスポンシブにならない

テーマを適用した直後の見た目を見てみよう。

デスクトップPCでの表示

f:id:shigo45:20151217142635j:plain

スマホでの表示

ヘッダー付近

f:id:shigo45:20151217143424j:plain

はてなブログのツールバーも表示されているし、画像などの見た目も違う。

フッター付近

f:id:shigo45:20151217143716j:plain

はてなブログの広告が表示されていたり、フッターのコピーライト表記も違う。

そして、赤丸のところにPC表示への切り替えボタンがある。

つまり、選択したテーマBlankではなく、はてなのスマホ用テーマで表示されているというわけだ。

一箇所チェック入れるだけで解決

WordPressでブログを作成していると、レスポンシブテーマを入れればそれで終わりという感覚なので、ちょっとだけ戸惑う。

スマホでの表示ははてなのテンプレ強制かいな、などと早合点したけど、そんなことはなかった。ごめん、はてな。

ダッシュボード→デザイン→スマートフォン→詳細設定と行って、「レスポンシブデザイン」にチェック。下の赤丸部分。

f:id:shigo45:20151217145234j:plain

チェックをいれてから「変更を保存する」を押す。これだけ。

さて、この後スマホで見てみると

f:id:shigo45:20151217145640j:plain

フッター部分もデスクトップから見たのと同じになった。

f:id:shigo45:20151217145941j:plain

逆もありかも

詳しく書くほどのことでもないとは思うけれど、自分は最初「へ?」と思ったので、同じように思っている人がいるかもと書いてみた。

このように、レスポンシブデザイン対応のテーマを使うなら、「レスポンシブデザイン」にチェックを入れるべきだろうが、あえてそうしないという手もあるかも。はてなブログのデフォルトのスマホ用テンプレートもよくできており、それはそれで読みやすいからだ。読んでもらうということが大事なのだからそういう選択もありうる。

でも、はてなブログProを使っていて、ヘッダー・フッター非表示にできるのに、スマホだと無料版と同じ見た目というのもちょっと悔しいかもしれない。


This is a post from 45 For Trash

POLICY :1. このサイトへのリンクは自由です。 2. できるだけ誤りのないように書いているつもりですが、当サイトに掲載する情報の正確性は保証できません。また掲載している情報は執筆日現在の情報です。 3. 当サイト、当サイトリンク先、広告リンク先の利用によって生じたいかなる損害についても一切の責任を負いません。 4. 当サイトはGoogleアドセンス、Amazonアソシエイト、その他アフィリエイトの広告を掲載している場合があります。 5. 当サイトご利用の場合は上記の事項に同意したものとみなします。