イロイロひとりごと

ブログのこと 日々のことをつぶやいています

はてなブログ 3STEPでレスポンシブデザインに!やり方を解説♪

 当ブログには、広告・プロモーションが含まれています

はてなブログでレスポンシブデザイン(PCとスマホ表示を同じデザイン)にするには、ちょっと設定がいります。

やることは意外と簡単なので、ぜひやってみましょう!

 

はてなブログの無料プランではスマホ表示をイジるのは限界があります。

スマホ版にはGoogleAdSenseの広告も貼れません。

※2016.3 レスポンシブデザインでも無料プランだとはてなの広告が表示されるようになってしまったので、アドセンス広告は貼れません…。

スマートフォンで「レスポンシブデザイン」を有効にしているときの広告の表示について - はてなブログ開発ブログ

 

レスポンシブデザインにすることで、PCでもスマホ、タブレットでも同じ設定で同じデザインが使えます。表示する画面サイズによって自動で、スマホの場合メニューバーが記事下に表示されます。

そして同じデザインにすることで、PCでの読者もスマホから見たときに同じブログって認識できますよね(*´ω`*)

それに1度設定してしまえば、のちのちカスタマイズする際にPCのカスタマイズとスマホのカスタマイズと…って2つやらなくても済むので便利ですよ♪

 

スマホ表示をレスポンシブ対応にする

help.hatenablog.com

 

こちらにあった説明をお借りします。

f:id:setuyakuhappylife:20141223005652p:plain

よくわからない…。

では、簡単に解説しますよー!

 

STEP1 レスポンシブデザイン対応のテーマに設定

レスポンシブデザイン対応のテーマをいくつか調べました!

コチラを参考にインストールして設定してください。

happylife-tsubuyaki.hatenablog.com

 

 *デザインCSSが消えてしまうことがあるので、インストールする前にデザインCSSの設定をメモ帳などにコピペしておいてください。

 

STEP2 レスポンシブデザインをONに!

スマホマークの一番下の『レスポンシブデザイン』にチェックを入れます。

f:id:setuyakuhappylife:20141223010633p:plain

 

これでスマホから確認してみてください。

テーマによっては、これでうまく表示されるようになります。

f:id:setuyakuhappylife:20160201220629j:plain

テーマによっては、このようにそのまま縮小表示されて、文字がすごく小さくなってしまいます。その場合はSTEP3をやってください。

 

STEP3 Responsive:yesにする

縮小表示されている場合は、下記のコードを記述してみてください。

 

/* Responsive: yes */

 

デザイン設定>スパナマークの一番下、デザインCSSに記述する

 

f:id:setuyakuhappylife:20150315225457p:plain

これで、 スマホから見てもPCと同じテーマの表示になります♪

 

テーマ自体がレスポンシブデザインに対応していないとうまく表示されないので、その場合は違うテーマにしてみましょう!

 

対応していると、当ブログのようにサイドバーが記事本文下に表示されるようにります(o^^o)

f:id:setuyakuhappylife:20160201220841j:plain

これが正解です。

 

まとめ 

これ結構簡単なのに、以前はあまりやっている人がませんでした。

そして説明してる人も少なく、苦労しました(´;ω;`)

やっと最近レスポンシブデザインが浸透してきましたね!

 

 

スマホやタブレット、いろんなサイズのスクリーンでもうまく対応してくれるレスポンシブデザイン。

一度やってしまえば、PC表示はこの設定でスマホ表示はこの設定にして…など考えなくて済むのでラクですよ!

 

ぜひ挑戦してみてね(*uωu*)σ

happylife-tsubuyaki.hatenablog.com


©2014イロイロひとりごと。
当ブログに掲載されている画像を、無断で他サイトへ転載することはご遠慮ください。 文章を引用する際は、引用元として当ブログURLを記載ください。