レスポンシブデザインと画像サイズ

[no_toc]当サイトと同じテーマファイル「lightning」を使用していることが前提ですが、
最近のテーマファイルはほとんどレスポンシブルに対応していますね。

レスポンシブルとは?

フルード(リキッド)でデザインされ、デスクトップ、タブレットそしてスマートフォンという3つのブレイクポイントでレイアウトを変更。(引用)

・・・だそうです。

カタカナが多くて分かり難いので、簡単に画像で解説。

パソコンで当サイトを見ると↓のように見えるのですが

ブラウザのウィンドの幅を狭めると、自動的にスマホからの最適な見え方に変わります。

本当はもっと適切な説明があると思いますが、自分自身もよく分かってないw
自動的に配置を調整してくれるので、便利ですねぇ。
CSS等で配置を好みにカスタマイズも出来るようです。

グーグルに推奨されているので、勿論SEOにも効果的。
最近のテーマファイルはほとんど標準搭載されています。
逆に搭載されていないものは、今後は使われにくいでしょう。

ウィンド幅によって表示が変わってくるだけで、内容は同じなので
PCとスマホのページを一度に編集出来る。管理する側にはとても大きなメリット。

レスポンシブルデザインで画像を使う際に気をつけたいこと

ワードプレスを使っていると、画像を挿入する際にサイズを指定できますよね。
ここで幅を640PX以上にすると、スマホで見た際に画像がはみ出す可能性があります。

大昔のスマホは幅解像度が320pxだったり、最先端のスマホになると1000px以上表示出来たり。
この辺を統一して頂きたいところではあるのですが、進化に文句をつけても仕方が無い。
とりあえず、今の所は幅を640PXにしておけば間違いは無いと思います。

ステップアップするとすれば、画像の幅をピクセルでは無く「%」で幅を指定出来ます。

このようにしておけば、ウィンド幅に合わせて画像を表示することが出来ます。

またはCSSに以下を追加しておけば、画像がはみ出すことはありません。
最初から以下のCSSをテーマファイルに入れておいてくれても良いものですけどね。

更に言えばCSSでスマホで閲覧した場合のみ、幅を指定する方法もあるのですが・・
基本的には当サイトでそこまで使い倒す気は無いので、省略しますw

えっ?ガラケ?
しらんwwww今の時代、ガラケでネットサーフィンする人なんて居るんですかねぇ。