はてなブログでレスポンシブデザイン(PCとスマホ表示を同じデザイン)にするには、ちょっと設定がいります。
やることは意外と簡単なので、ぜひやってみましょう!
はてなブログの無料プランではスマホ表示をイジるのは限界があります。
スマホ版にはGoogleAdSenseの広告も貼れません。
※2016.3 レスポンシブデザインでも無料プランだとはてなの広告が表示されるようになってしまったので、アドセンス広告は貼れません…。
⇒スマートフォンで「レスポンシブデザイン」を有効にしているときの広告の表示について - はてなブログ開発ブログ
レスポンシブデザインにすることで、PCでもスマホ、タブレットでも同じ設定で同じデザインが使えます。表示する画面サイズによって自動で、スマホの場合メニューバーが記事下に表示されます。
そして同じデザインにすることで、PCでの読者もスマホから見たときに同じブログって認識できますよね(*´ω`*)
それに1度設定してしまえば、のちのちカスタマイズする際にPCのカスタマイズとスマホのカスタマイズと…って2つやらなくても済むので便利ですよ♪
スマホ表示をレスポンシブ対応にする
こちらにあった説明をお借りします。
よくわからない…。
では、簡単に解説しますよー!
STEP1 レスポンシブデザイン対応のテーマに設定
レスポンシブデザイン対応のテーマをいくつか調べました!
コチラを参考にインストールして設定してください。
happylife-tsubuyaki.hatenablog.com
*デザインCSSが消えてしまうことがあるので、インストールする前にデザインCSSの設定をメモ帳などにコピペしておいてください。
STEP2 レスポンシブデザインをONに!
スマホマークの一番下の『レスポンシブデザイン』にチェックを入れます。
これでスマホから確認してみてください。
テーマによっては、これでうまく表示されるようになります。
テーマによっては、このようにそのまま縮小表示されて、文字がすごく小さくなってしまいます。その場合はSTEP3をやってください。
STEP3 Responsive:yesにする
縮小表示されている場合は、下記のコードを記述してみてください。
デザイン設定>スパナマークの一番下、デザインCSSに記述する。
これで、 スマホから見てもPCと同じテーマの表示になります♪
テーマ自体がレスポンシブデザインに対応していないとうまく表示されないので、その場合は違うテーマにしてみましょう!
対応していると、当ブログのようにサイドバーが記事本文下に表示されるようにります(o^^o)
これが正解です。
まとめ
これ結構簡単なのに、以前はあまりやっている人がませんでした。
そして説明してる人も少なく、苦労しました(´;ω;`)
やっと最近レスポンシブデザインが浸透してきましたね!
スマホやタブレット、いろんなサイズのスクリーンでもうまく対応してくれるレスポンシブデザイン。
一度やってしまえば、PC表示はこの設定でスマホ表示はこの設定にして…など考えなくて済むのでラクですよ!
ぜひ挑戦してみてね(*uωu*)σ
happylife-tsubuyaki.hatenablog.com