NEW ARTICLE
「組織を変える」という無理ゲーに消耗しないために
  1. HOME
  2. ブログ
  3. デザインテーマをスマホでも！レスポンシブデザインの設定方法

デザインテーマをスマホでも！レスポンシブデザインの設定方法

デザインテーマをスマホでも！レスポンシブデザインの設定方法
ブログの醍醐味は記事を書くこととは言いますが、
やっぱりおしゃれなデザインで自分色にカスタマイズしてみたいですよね！
長く続けるにはモチベーションを保つことも必要。
自分好みのスタイルで楽しいブログライフを過ごしましょう！
好きなテーマを選んで・・・
よし、完了！
って、、、え！？
スマホだけが最初のデザインのまま・・・
おしゃれなスマホページはどうやったら作れるのーーーー？？？
そんなこんなでお困りの方、
朗報です
ちょっとした設定でスマホページもあっという間に自分スタイルに早変わりです。
以下、レスポンシブデザインの設定方法をまとめました。
目次
  • レスポンシブデザインとは
  • レスポンシブデザイン対応のテーマを選ぼう
  • レスポンシブデザインの設定方法
  • 本当にレスポンシブになってますか？
  • まとめ
目次

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

レスポンシブデザインの英語表記は《Responsive Design》
 
Responsive
【形】反応する、回答する
 
つまり直訳すると『反応するデザイン』
 
何に反応するんじゃ！？
 
スマホです。
 
つまりスマホに反応するデザインだよという意味です。
 
 
スマホとPCではディスプレイの大きさは異なりますよね。
 
ならばデザインもそのサイズに合わせて変更する必要があるのです。
 
つまりレスポンシブデザインとは
表示するディスプレイのサイズに反応してバランスをとるデザインですよー
ということなのです。
 
 
 
 

レスポンシブデザイン対応のテーマを選ぼう

レスポンシブデザインにするにはまず専用のテーマを選ぶ必要があります。
テーマ詳細の画面で「レスポンシブデザイン対応」といった説明書きがあるものを選びましょう。
ちなみに当ブログのテーマは【Vancouver】（※2018年8月現在）

Vancouver – テーマ ストア

他にもレスポンシブデザイン対応のテーマはたくさんあるので
あれこれ試しながら自分好みのデザインを探してください。

レスポンシブデザインの設定方法

テーマが決まったらいよいよレスポンシブデザインを設定して行きます。
まず、
はてなブログのダッシュボードから「デザイン」を選びます。
左サイドバーにスマホマークのタブがありますので
これをクリック！
するとサイドバー上に「レスポンシブデザイン」というチェックBOXがありますので
これにチェックを入れて「変更を保存」
これでレスポンシブデザイン完了！！
めちゃくちゃ簡単ですよね。
でもちょっと待って！
安心せずに次の項もお読みください。

本当にレスポンシブになってますか？

レスポンシブデザインが設定できた！
ちょっと待った！
PCと全く同じデザインになっていませんか？
通常レスポンシブデザインが正常に設定されると
1カラムのデザインになることが多いです。
PC上と全く同じカラムの配置になってしまうと
スマホでは右に左に上に下に。。。
縦横無尽にスクロールしないとページが確認できなくなってしまいます。
かといって左右のサイズをスマホのサイズに合わせて縮小するとちっっっちゃな文字になって
もー見づらいのなんの・・・
そんなこんなで通常スマホページでは1カラムのデザインになることがほとんどです。
もし、スマホページを確認して
PCと全く同じデザインになっているならそれは完全なレスポンシブデザインになっていないかも知れません。
本来このデザインはHTMLコードと呼ばれるプログラム言語で設計図が書かれているわけですが、
スマホサイズ用とPCサイズ用で二種類の設計図があるのです。
つまり、PCと同じデザインになっているということは
単純に、
はてなブログサービス側でPC用の設計図をスマホに反映させただけで、
上手くスマホ用設計図を引っ張り出せていないのです。
この場合、スマホ用の設計図があるよ〜
ってのをコードで付け加えてあげないといけないのです。
そこで、「デザイン」設定画面のスパナのタブをクリックして
「デザインCSS」という項目をクリックしてください。
するとデザインコードに上書きするBOXが開きます。
そこに以下のコードをコピペしてください。
Responsive : yes
これで、先程と同じように
変更を保存すると、
お見事！
あっという間にスマホページが見やすくなりました！

まとめ

以上、デザインテーマをスマホにも反映させる方法をご紹介しました。
昨今のブログアクセスは何と言ってもスマホからの流入が過半数を締める場合が多いのではないでしょうか？
当ブログもまだまだアクセス数は少ないですが
過半数がスマホからの流入になっています。
スマホデザインを充実させて、
より良いブログを育てていきましょう！
最後におさらいです。
POINT

  1. レスポンシブデザイン対応のテーマを設定
  2. はてなデザイン設定からレスポンシブデザインのチェックBOX選択
  3. それでもダメな場合はデザインCSSで「responsive ： yes」上書き
最後まで記事をご覧いただきありがとうございました。
発展途上のブログにてデザインや記事の内容、
どれを取っても未熟ですが、
この記事が皆様のお役に立てれば幸いです。
自分の大好きなブログとともに
ブログライフを謳歌しましょう！！
ちゃへいでした！