B型ドットコム

B型のサラブレッド。某大手小売業でバイヤーやってましたが、今はカメラマンやってます。そんな僕が ニュース、デキゴト、きづいたコト、おもいついたコト、きになったコトをつづります

【はてなブログ・素人向け】 「レスポンシブデザイン」にチェック入れるだけじゃダメだった件

私、HTML、CSSなど、ほとんど素人みたいなもんです。で、はてなブログもレスポンシブデザインって言うのに対応したよ!なんて情報をみて、レスポンシブデザインが何かも知らず、やってみようかと思ったわけです。で、暫くの間、はてなブログのレスポンシブデザインの設定って、ボタンにチェック入れれば良いのかと思ってました。ただPC用の画面が表示されているだけじゃね?スマホでもPC用の表示がされることを「レスポンシブデザイン」って言うのかと思ってたわー!

 

↓1.このサイドバーの「デザイン」の

f:id:yossy0626:20150107220507p:plain

 

2.「スマホアイコン」の「詳細設定」にある「レスポンシブデザイン」にチェック入れるだけじゃダメなんだぜ!

 

f:id:yossy0626:20150107220735p:plain

チェック入れれば良いだけに見えるけどね...。はてなさん、文言変えてくれ。このままでは、スマホでPC画面が単純に表示されるだけです。

 

でどうすれば良いのか?

1.まずは、テーマストアからレスポンシブデザイン対応の「テーマ」を選ぼう!

テーマ ストア - はてなブログ

f:id:yossy0626:20150107221910p:plain

レスポンシブデザインに対応している場合のみ「対応している」と書いてあります。

書いてないのは対応していません。たぶん...

--1/8追記--

そんなことなかったみたい。こちらのサイトをご参考に。


はてなブログでレスポンシブデザイン対応のテーマ - イロイロひとりごと。

 

 

2.レスポンシブデザインにチェックを入れる

f:id:yossy0626:20150107220735p:plain

管理画面の「デザイン」→「スマホアイコン」→「詳細設定」をクリックして「レスポンシブデザイン」にチェックを入れる

 

3.で、ココからがポイント!CSSに「/* Responsive: yes */」と入力する!

f:id:yossy0626:20150107222402p:plain

さきほどの画面の「スパナマーク」→「デザインCSS」→「/* Responsive: yes */」と入力(上記画像参照)

 

そうすると、デフォルトのスマホ画面ではなく、選んだ「テーマ」に合わせたスマホ画面になりますよ!

 

※ちなみにCSSは変更前にどこかにコピペして保存しておくことをオススメします。上手く行かなかったらコピペし直してね

※AdSenseの広告張っている場合は「レスポンシブ」を選ばないと大きさが調整されないっぽい

f:id:yossy0626:20150107223754p:plain

 

HTMLなどの知識のない素人には、はてなブログのレスポンシブデザインは、チェックひとつで出来るもんだと思ってました!が今回、色々と調べるとこういうことらしいので、ぜひご参考までにシェアしておきます。

ではごきげんよう!