【はてなブログ・素人向け】 「レスポンシブデザイン」にチェック入れるだけじゃダメだった件
私、HTML、CSSなど、ほとんど素人みたいなもんです。で、はてなブログもレスポンシブデザインって言うのに対応したよ!なんて情報をみて、レスポンシブデザインが何かも知らず、やってみようかと思ったわけです。で、暫くの間、はてなブログのレスポンシブデザインの設定って、ボタンにチェック入れれば良いのかと思ってました。ただPC用の画面が表示されているだけじゃね?スマホでもPC用の表示がされることを「レスポンシブデザイン」って言うのかと思ってたわー!
↓1.このサイドバーの「デザイン」の
2.「スマホアイコン」の「詳細設定」にある「レスポンシブデザイン」にチェック入れるだけじゃダメなんだぜ!
チェック入れれば良いだけに見えるけどね...。はてなさん、文言変えてくれ。このままでは、スマホでPC画面が単純に表示されるだけです。
でどうすれば良いのか?
1.まずは、テーマストアからレスポンシブデザイン対応の「テーマ」を選ぼう!
レスポンシブデザインに対応している場合のみ「対応している」と書いてあります。
書いてないのは対応していません。たぶん...
--1/8追記--
そんなことなかったみたい。こちらのサイトをご参考に。
はてなブログでレスポンシブデザイン対応のテーマ - イロイロひとりごと。
2.レスポンシブデザインにチェックを入れる
管理画面の「デザイン」→「スマホアイコン」→「詳細設定」をクリックして「レスポンシブデザイン」にチェックを入れる
3.で、ココからがポイント!CSSに「/* Responsive: yes */」と入力する!
さきほどの画面の「スパナマーク」→「デザインCSS」→「/* Responsive: yes */」と入力(上記画像参照)
そうすると、デフォルトのスマホ画面ではなく、選んだ「テーマ」に合わせたスマホ画面になりますよ!
※ちなみにCSSは変更前にどこかにコピペして保存しておくことをオススメします。上手く行かなかったらコピペし直してね
※AdSenseの広告張っている場合は「レスポンシブ」を選ばないと大きさが調整されないっぽい
HTMLなどの知識のない素人には、はてなブログのレスポンシブデザインは、チェックひとつで出来るもんだと思ってました!が今回、色々と調べるとこういうことらしいので、ぜひご参考までにシェアしておきます。
ではごきげんよう!