58才からのチャレンジ

はじめてのホームページ作成 第三回

レスポンシブデザインを理解する

 

ワードプレスでホームページを作成するにあたって、”テーマ”に何を使うかは、ホームページの出来栄えに大きく影響します。
第二回でも少しお話ししたように、PC用のページを作ることで、スマホ対応を同時にやってくれるレスポンシブデザイン対応のテーマを選ぶことをお勧めしました。

レスポンシブ対応でないテーマを使う場合は、PC用のページ作成と、スマホ用を別々に作成するか、そうでなければPC用で作ったページが、スマホの画面サイズに合わせて縮小されて表示されるので、文字が非常に小さくなって見れたものではありません。
今の時代、Web閲覧はPCで見るよりもスマホやタブレットなどで見られる方が圧倒的に多く、むしろスマホで見られることを中心にデザインする必要があるくらいです。

いずれにしてもスマホでの表示がどうなるかは、非常に重要です。

私の場合、テーマとしては、

  • Attitide
  • Simplicity 2.0
  • Principle
  • 賢威

を中心にページ作成をしています。ちなみにこのサイトはAttitudeを使っています。

PC用とスマホ用の表示で一番の違いは、画面のサイズ、特に横サイズになります。
横に広く使えるPC表示に対して、スマホ表示では横は非常に小さくなります。このことをページを作るときには常に意識する必要があります。

特に画像を挿入するときに、PCでは画像を横並びにしたり、画像の横に文字を回り込ませたりすることで見栄えを良くしたりしますが、スマホ表示では、画像サイズが横方向は350~400ピクセル程度で制限されてしまいます。
また、画像を横並びにしていたレイアウトを縦並びにするようなことを、テーマがやってくれたりします。

PC用にデザインしたものを、スマホ用にどう変換するかはテーマによって異なるので、テーマ毎のクセを把握しながらデザインしていきましょう。
上級者になると、ワードプレスのテーマの編集というのを使って、phpファイルやcssファイルを必要に応じて編集することで、デザインそのものや、スマホ対応時に変換方法などをカスタマイズすることもできます。

このサイトでも、私が困って対応したテーマの編集について少しだけですが共有していますので、多少慣れてきたら参考にしてみてください。

このサイトのトップページで、PC表示とスマホ表示の違いを見てみましょう。

 

PC用の表示

 

スマホ表示

特に画像や表のサイズには注意してください。通常は、スマホ表示ではMaxサイズを設定して、それよりも大きいサイズの時には縮小してMaxサイズにして表示してくれるのですが、必ず自分でPC表示とスマホ表示を確認しながら進めてください。

また、スマホ表示のメニュー表示などは、テーマによって異なります。好みもありますので、UIとしてどう違うかも確認してみてください。
Attitude以外については、例えば私の作ったページで、テーマによるスマホ表示を確認いただけます。

賢威

Enjoy World Beer

通勤時下痢の悩み

Simplicity

日本人の英語学習を考える

Principle

中高年からの健康

また、WPtouchというスマホ用のデザインをしてくれるプラグインがあります。これを利用すればレスポンシブ対応でないテーマでも自動的にスマホデザインに変換してくれます。

 

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA