こんにちは、MakeShopのあらいです。
いつもMakeShopをご利用いただきありがとうございます。

今回は、トップページのスライドショーの左右の画像をチラ見せしたい場合にカスタマイズする方法をご紹介します。
左右の画像をチラ見せすることで、たくさんの情報を見せることができショップの賑わい感を演出することができます。

[難易度 ★☆☆ ]
スライドショーで左右の画像をチラ見せしたいときの
カスタマイズ方法!

設定方法

手順はテンプレートにcssを追加するだけ!
【Fashion】テンプレートを基に設定してみましょう。
※あらかじめ、「トップページイメージの設定」で画像を登録しておきましょう。
この記事では、幅1000pxの高さ500pxの画像を使用しています。

スライドショーをカスタマイズ

 CSSを追加!

【独自デザイン(PC)】> 【トップページ編集】 > 【共通headタグ管理】ページ設定「トップ」

を選択して、エディタエリアに下記のスタイル指定を追記してください。

・「(スライド画像の横幅÷2)+(矢印画像の横幅÷2)」の部分について
この記事で使用しているスライド画像の横幅が1000px、矢印画像の横幅が32pxなので
(1000÷2)+(32÷2)=516pxという計算になります。
アイコン画像を自分で作成していたり、スライド画像の大きさを変更している場合は、
こちらの数値を変えて記載してください。

・追記する場所は管理しやすい場所か、分からない場合は一番下に追記しましょう!

完了!

スライダー両端の画像をチラ見せ

→左右の画像をチラ見せできました!

いかがでしたでしょうか。
メインビジュアルは、どんなショップなのかをイメージで伝えることができる大事な部分です。ショップの雰囲気に合わせてスライド画像をより魅力的に演出してみてみましょう!

それではまた!