こーにゃーの結婚2年生

知らない土地で暮らし始めました。

【解説あり】PCとスマホのデザインを一緒にして設定が楽に!はてなブログでレスポンシブデザインに対応しました。

皆さんは、デザインのカスタマイズを行った際に、こんな経験はありませんか?

 

・デザインCSSにコードを入力したのに反映されない。

・PCでは反映されるのにスマホには反映されない。

 

私はPCの知識がなく、参考にした記事通りにカスタマイズを試しても、上記のようになってしまうことが多く悲しくなっています。

 

実際にヨメレバ・カエレバの設定を行っても、スマホにうまく表示されなかったりして悩んでました。

 

f:id:kooonyaaa:20171023103454p:plain

 

ですが、レスポンシブデザインに設定してから、無事に表示されるようになりました!

 

 

f:id:kooonyaaa:20171023103601p:plain

 

レスポンシブデザインとは

 

PCのデザインをスマホと同じように表示する方法です。

 

共通のURL・HTML・CSSファイルを使用しているため、PCでは表示されるのにスマホでは表示されないといった事象を避けることが出来ます。

 

また、同じデザインにすることでPCでの読者もスマホから見た時に同じブログって認識できること。

 

スマホのカスタマイズとPCのカスタマイズを別々に行う必要もなくなったことも大きなメリットに感じています。

 

設定方法

以下の手順で行ってください。

 

【設定方法1】 レスポンシブデザイン対応のテーマに設定を

 

レスポンシブデザインに対応するためにはテーマを絞らなければいけません!

これまで私が使用していたテーマはHandwriting

レスポンシブデザインに対応していなかった為、思い切ってデザインを変更しました。

 

はてなブログにある公式テーマの中でレスポンシブデザインに対応しているのは以下の通りです。

 

Evergreen

 

f:id:kooonyaaa:20171023093930p:plain

Reach

 

f:id:kooonyaaa:20171023094113p:plain

 

Terminal

 

 

f:id:kooonyaaa:20171023094306p:plain

 

この中から私は、Reachを選択しました!

 

f:id:kooonyaaa:20171023094848p:plain

 

 

デザインテーマの変更はダッシュボード⇒デザイン⇒デザインテーマを選択⇒変更を保存するで変えることが出来ます。

 

【設定方法2】 レスポンシブデザインを設定する

ダッシュボード⇒デザイン⇒スマホアイコンをクリック⇒一番下の詳細設定をクリック⇒レスポンシブデザインにチェックでOK。

 

 

f:id:kooonyaaa:20171023095352p:plain

 

スマホから確認してみてください。テーマ次第ではこれでうまく表示されます。

f:id:kooonyaaa:20171023104146p:plain

 

テーマによっては上の画像のようにPC表示がそのままスマホに反映され、文字が小さくなってしまいます。その際は【設定方法3】に進んでください。

 

【設定方法3】コードを入力する

 

以下のコードを記述します。

 

/* Responsive: yes */

 

記述する場所はダッシュボード⇒デザイン⇒スパナマーク⇒デザインCSSです。

 

f:id:kooonyaaa:20171023104719p:plain

 

これでPCとスマホが同じ表示になります。

 

上手く対応していると、スマホの記事下にPCのサイドバーが表示されます。

 

f:id:kooonyaaa:20171023104928p:plain

 

まとめ

 

私はこれまで、PCで設定してもスマホに表示されなかったり、うまく反映されないことに疲れてしまい、もはや放置してました。

 

しかし、スマホから見てくれる方が圧倒的に多いので、何とかしなきゃとも思ってました。

 

そして調べたら簡単に設定することができ、これでPCとスマホをそれぞれ設定する必要もありません。

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

 

私のようにパソコン初心者には特にお勧めです。

簡単なので皆さんもぜひ!