Wordpressテーマ

スマホ表示においてスライドショー画像の尺を合わせる方法(中級者向け)

PlaneWhiteでは使いやすさを優先しているため、スマートフォンにおいてトップページのスライダー部分のビジュアルサイズを固定で設定しています。

pw_sp_size

高さをそろえた画像を利用していただければ問題ありませんが、画像を変更できない場合、直接CSS側を修正し調整する必要があります。
ここではスマホでの縦横比率を元画像での表示に変更する方法を解説します。

この調整はFTPソフトを利用してCSSファイルを直接編集するため、FTPソフトやCSSにある程度知識がある方を前提として説明しております。必ずバックアップを取ったうえで作業願います。
操作ミスや設定間違い等により、表示崩れ等起こったとしても一切の責任を負いません。

カスタマイズ方法

FTPソフトを利用し、サーバーに接続しPlaneWhiteをインストールしたフォルダ内にあるCSSフォルダにアクセスします。
中に「sp.css」というファイルがあるので、ローカルにダウンロードします。

/wp-content/themes/planewhite/css/sp.css

pw_sp_size3

ダウンロードしたsp.cssの97行目付近に書かれている下記を探します。

この部分を下記のように変更します。

「330px」を「auto」に変更という形ですね。
これで保存し、同じcssディレクトリに上書きアップロードします。

トップページを確認

その状態でトップページへアクセスしてみましょう。
無事画像の高さで表示されているのが確認できます。

pw_sp_size4

画像のサイズに注意

各スライダー間の画像高さがマチマチだと、スライダー切り替えの際に高さが変わってしまい、あまりきれいな動きとは言えません。
ここをなめらかに見せるために、各画像のサイズ高さを同じ高さにそろえるとスライダーの切り替えによる高さが切り替わらず綺麗になります。

CONTACTお問い合わせ / お見積もり