最近のWebサイト構築のお仕事は、必ずスマホ対応（だけではなくて、レスポンシブデザイン）を意識しなくてはいけないのです。
パソコン用の画面表示とスマホ用の画面表示で決定的に違うのは画面サイズ。当たり前ですが。
スマホの場合、パソコンとは違ってスクロールせずに表示できる情報量が少ない＝パソコンと同じ情報を入れようとすると縦スクロールが多くなります。
これを意識してページの表示方法を変えていく必要に迫られるのですが、例えば商品の写真を沢山載せたい。但し、スマホや小さなタブレットでもコンパクトに表示したいという場合を考えてみた際、写真を一つにまとめてスライダーで表示すれば良いのでは？と考えました。
それが、昨日のテスト。
Easing Sliderというプラグインを導入。
導入に関しては、下記のサイトを参考にさせて頂きました。
知識不要！簡単にWordPressに画像スライダーを付けられる「Easing Slider」の使い方
で実際に作ってみたのが昨日のスライダーだったのですが、縦位置と横位置の画像を混在したため、縦位置の写真が切り取られる感じになってしまったので、写真の向きを縦だけから選んで作ったのが↓これ
作成したスライダーはショートコードで本文に埋め込む形になります。
この形式ならば、スマホで見てもレイアウトを崩さずに写真を全て見せる形ができそうです。
ただ、問題はPCや画面サイズの大きいタブレットでの表示と、スマホやサイズの小さいタブレットでの表示をどう切り替えるかですね。
CSSを使ってそこをコントロールしなければいけません。
勉強と実践だな。
コメント