こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。
以前、スライドショーの画像サイズは何ピクセルにすればいいの？「目安のサイズを教えて！」をご紹介しましたが、今回は具体的に対象のテンプレートで、スライドショーを小さく表示する方法をご紹介します！
※対象テンプレート：【WIDELY】／【ENKEL】
こんなお悩みありませんか？
【WIDELY】【ENKEL】のPC表示で
・スライドショーが画面いっぱい表示されているのを小さくしたい
【WIDELY】【ENKEL】について
【WIDELY】【ENKEL】は、スライドショーが画面に対して画像の縦横比を維持したまま横幅いっぱいに表示されます。画像を使ってショップのイメージをストレートに表現したいショップ様におすすめのテンプレートです。ですが、もう少しスライド画像を小さくしたいなあと思ったら、CSSで調整して表示することができます！
スライド画像は、オンラインマニュアル「トップページイメージの設定」で設定できます。
スライドショーのサイズを小さくしたい
（対象テンプレート: WIDELY／ENKEL）
それでは、CSSでの調整方法をみていきましょう。
設定方法
CSSを調整する
【ショップデザイン（PC）】>【トップページ編集】>【共通CSS管理】
内のソースを下記の手順で編集してください。
【WIDELY】ご利用の場合
【1】CSSを追加します。
|
1 2 3 4 |
.index-slider{ width:1000px;/*設定したい画像の横幅のサイズ*/ margin:0 auto; } |
【2】CSSを削除します。（332行目付近）
|
1 2 3 |
.index-slider{ min-width:1300px; } |
【ENKEL】ご利用の場合
【1】CSSを追加します。
|
1 2 3 4 |
.index-slider{ width:1000px;/*設定したい画像の横幅のサイズ*/ margin:0 auto; } |
【2】CSSを削除します。（324行目付近）
|
1 2 3 4 |
.index-slider{ padding:0 0 48px; min-width: 1200px;/*←この行を削除*/ } |
↓
|
1 2 3 |
.index-slider{ padding:0 0 48px; } |
・同じサイズにそろえてスライド画像を登録しておきましょう。
・CSSを追記する場所は管理しやすい場所か、分からない場合は一番下に追記してください。
完了
【ENKEL】ご利用でもスライドショーのサイズが小さく表示されました！
いかがでしたでしょうか。
ショップの雰囲気に合わせてスライド画像を小さく表示したい場合にお役立てください。
それではまた！
