はてなブログ｜レスポンシブデザインで表示を統一させよう
スポンサードリンク
パソコンとスマホの表示がズレている・どちらかがうまく表示できないとサイトを運営していてモチベーションが下がります。
どちらでも同じように表示されるのが理想でありユーザーにとっても使いやすいサイトになります。
レスポンシブデザインというものをご存知でしょうか？
こんな人におすすめ↓↓
どこの設定を変えたらいいのか分からない
パソコンで編集してもスマホで同じように表示されるの？
もうデザインを諦めた方がいいのかな・・・・。
この記事で分かること
レスポンシブデザインについて
レスポンシブデザインのメリット・デメリット
はてなブログでレスポンシブデザインにする方法
パソコンとスマホの表示を統一させる為に一番簡単な方法はレスポンシブデザインに変更することです。
吹き出しの表示がスマホでは反映されてなくて困っていたんだ！
レスポンシブデザインに変えたら吹き出しもちゃんと表示されるようになるから大丈夫！
レスポンシブデザインとは？
スマホ世代とも言われる程、スマホの普及が進み調べ物をする際にはスマホを使うという人も増えてきました。
この記事を見ている方もスマホの人が多いかもしれません。
しかし中にはタブレットやパソコンで閲覧している人もいるでしょう。
このように、画面サイズの違う端末からアクセスすることが増えたことにより「レスポンシブデザイン」を導入する必要性が高まっています。
レスポンシブデザインとは、デバイスのウィンドウ幅に反応して自動で見やすい表示に切り替える仕組みのあるデザインのことです。
つまり、パソコンとスマホやタブレットで表示デバイスを切り替えた時にズレや表示されないなどの困難に出会ったらレスポンシブデザインをまず考えましょう。
レスポンシブデザインのメリット・デメリット
メリット
- パソコン用とスマホ用で設定する必要がない
- Googleがモバイルサイトの構成方法としてレスポンシブデザインを推奨している。
- モバイル表示でもヘッダー画像を使うことが出来る
- 若者向けである
- 管理しやすい
はてなブログにはパソコン用とスマホ用でデザインを設定しなければいけません。
もし「スマホで見た時には何のデザインもない」と感じている方はデザインを見直してみて下さい。スマホでのデザイン設定をしていないので初期の状態になっているだけという場合もあります。
（初期の状態はタイトルが文字だけでアイコンが真ん中にある、シンプルなデザインのアレです）
パソコン表示の方だけデザインを頑張ってもスマホユーザーに向けてはまっさらな状態なので、スマホでも同じように表示させたい人はレスポンシブデザインに変更しましょう。
（スマホ表示の方もカスタマイズされている人は大丈夫です）
デザインが同じだと管理しやすいというメリットがあります。
また、スマホやタブレットをよく使う若者にはレスポンシブデザインが好まれユーザビリティが向上するというメリットがあります。
デメリット
- レスポンシブデザイン対応のテーマを使用しなければならない
- デザインによっては使えないものが出てくる
- レスポンシブデザインに対応するコードを書かなければならない
- 細かい設定はやっぱり必要
レスポンシブデザインに変更しようと思った時に注意して欲しいのは
「テーマによってはレスポンシブデザインに対応していない」ということ。
是非、こちらの記事を参考にしてみて下さい。
はてなブログでレスポンシブデザインに対応しているテーマです。
デザインによっては使えなくなるというデメリットですが、
スマホでの表示速度を早くしよう軽くしたデータがパソコンでは綺麗に表示されなかったり、パソコンで見た時とスマホで見た時の文字の量が違ってきて、間に画像を挟んだりしなければならなくなることもあります。
（文字列がスマホで見てみると長くなってたという場合ですね）
また、CSSに追加して使いたいコードがある場合にはレスポンシブデザインに対応するように調整しなければいけません。
（カスタマイズの際はバックアップをとって自己責任でお願い致します。）
はてなブログでレスポンシブデザインにする方法
では、実際にどうやってレスポンシブデザインに変更するのかと言うと、
チェックボックスにチェックを入れるだけです。
管理画面を開いたらデザインを選択します。
その中のスマートフォンのタブを開き、「詳細設定」の中のレスポンシブデザインにチェックを入れます。
これだけでスマホとパソコンのデザインを統一することが出来ます。
念のためにデザインCSSのところに
/* Responsive: yes */
こちらのコードを入れておくことをおすすめします。
最後に・・・・
はてなブログは誰にでも簡単にブログを始められ、ユーザー数も多いブログサイトですが右も左も分からない初心者ブロガーには設定の一つ一つも大変です。
私のように調べ物をするだけで一日が終わってしまうという人もいるでしょう。
レスポンシブデザインという言葉すら知らない人も、簡単にデザインを統一させることが出来ますので試してみて下さい。
