画像表示をレスポンシブ対応してみよう


スマートフォンやタブレットの利用が日常の中で当たり前の時代、
WEBもパソコンだけではなくさまざまなデバイスで閲覧されるようになりました。

私はブログ記事を投稿する場合、Macで編集しMacでデザイン確認をするという作業をしています。

MacやWindowsPCなどパソコン画面で表示した時の見え方は確認できるのですが、スマートフォンなどの狭い画面で表示した時の見え方は確認することができません。

たまにスマホで表示してみると、画像やYoutube動画が画面からはみ出しているのを確認したこともあるのですが、とりあえず放置状態でした。

WordPress版「気まぐれデジタル好奇心」では、テーマでレスポンシブ対応されているのですが、当ブログで利用しているテーマは完全には対応されていないようです。

今回レスポンシブ対応させるための表示方法を少し調べたので、参考までにポイントを投稿しておきたいと思います。


レスポンシブ非対応


【最大25%OFFキャンペーン】.jpg10月15日まで


CSSコード



レスポンシブ非対応では、画像のdivボックスの幅と高さの指定に画素数の「px」を指定しています。
この例では画像にテキストを重ね合わせて表示させていますが、テキストを表示させる位置も画素数で位置を指定しています。

表示させたい大きさや位置を絶対数値で指定しているので、ウィンドウサイズが変わり親要素(この記事では親要素は記事スペースで、現在600pxに設定しています)が600pxより小さくなると600pxの画像は画面からはみ出るという仕組みですね。

パソコンのWEBブラウザ上でもウィンドウの端をドラッグして縮めたり伸ばしたりするとそれを確認することができます。

ちなみに縮めて行くとサイドバーエリアが消えて1カラムになり、テキスト部分などはしっかりその中におさまっています。これは今利用しているテーマのカエテンジョイがレスポンシブ対応されているためです。しかし画像がはみ出してしまう部分についてはテーマ側では対応されていないため投稿する記事で細工してやる必要があるわけですね。

関連記事



レスポンシブ対応


【最大25%OFFキャンペーン】.jpg10月15日まで


CSSコード



レスポンシブ対応では、画像のdivボックスの幅と高さ、テキストの表示位置の指定に相対数値の「%」を指定しています。

表示させたい大きさや位置を相対数値で指定しているので、ウィンドウサイズが600pxより小さくなってもそれに追従して画像も小さいくなり、画面からはみ出ることがなくなるというわけですね。

画像サイズは、記事スペースに対し600[px] ÷600[px] × 100 = 100%
テキスト位置は、画像高さに対し260[px] ÷ 400[px] × 100 = 65%
という値を算出しました。


レスポンシブ非対応


Fotolia_69185815_S.jpg

CSSコード



これは1枚の画像ですが、
レスポンシブ非対応では記事幅600pxに対して500px幅の画像をセンタリング配置しています。


レスポンシブ対応


Fotolia_69185815_S.jpg

CSSコード



レスポンシブ対応ではセンタリング指定に画素数[px]で指定せず、パーセンテージ[%]指定します。
画像サイズは、記事スペースに対し500[px] ÷600[px] × 100 ≒ 83%

関連記事



あとがき


画面からはみ出る画像やYoutube動画が気になっていましたが、とりあえずレスポンシブ対応させて画面の中へ納める方法がわかりスッキリしました。

これでまた一つ、技を吸収できたという感じです。

既存記事についても順次確認・対応して行きたいと考えているところです。今後はこの点に留意して記事を投稿してゆきたいと思います。

私は趣味でWEB作成をしていますので、解釈が間違っているところもあるかもしれません。その点についてはご容赦ください。そのような内容を発見された場合は、忌憚のないご意見をお待ちしています。

参考にさせていただいた記事
少し難しいかもしれませんが、じっくり学んでその技を吸収しましょう。
スポンサード・リンク