• No : 1515
  • 公開日時 : 2017/11/01 19:51
  • 更新日時 : 2020/12/29 11:51
  • 印刷

スマートフォン商品詳細ページの商品画像部分にある、フリックの矢印画像を変更できますか?

回答

コマースクリエイター未利用店舗様専用の記事です

スマートフォン商品詳細画面の商品画像部分にある矢印画像を、任意の画像に変更する方法です。
CSSを追記することにより、変更可能です。
 
※変更する画像は店舗様でご用意いただき、FTPサーバもしくは画像ファイル管理にアップロードしてください。
(画像ファイル管理とは、構築メニュー>デザイン設定>画像ファイル管理 の画面を指します。)
 
▼変更例
 

変更方法

モバイル>デザイン設定>デザインCSSの編集 に下記のCSSを追記することで、画像を変更することができます。

※ 赤字の箇所は、画像に合わせて適宜ご調整ください。
※画像パスはhttpはじまりの絶対パスで記述してください。(常時SSL化した店舗様はhttpsはじまりの絶対パス)
 
/* ▼左側のフリック矢印画像▼ */
.fs_sp_flick_btn_left{
background:url(画像パス) no-repeat left center; /* ←変更する画像のパス */
width: **px; /* ←変更する画像の横幅*/
height: **px; /* ←変更する画像の高さ*/
}
 
/* ▼右側のフリック矢印画像▼ */
.fs_sp_flick_btn_right{
background:url(画像パス) no-repeat left center; /* ←変更する画像のパス */
width: **px; /* ←変更する画像の横幅*/
height: **px; /* ←変更する画像の高さ*/
}