[戻る]
No.247

商品ページの画像

極楽堂さん  投稿日:2013/07/14(Sun) 17:56
key

拡大機能をつかわずに、ファーストビューで表示される画像のサイズを大きくしたいのですが可能でしょうか。

Re: 商品ページの画像

おたすけマイショップさん  2013/07/16(Tue) 19:18 No.248
key

ご利用いただいているデザインのスタイルシートを編集いただくことで、
商品詳細画面の画像サイズを大きくすることが可能です。

変更方法を以下に説明させていただきます。

1.拡張設定>デザイン設定>適用中のスタイルシートカスタマイズ>アプリスタイルシートの編集ボタン

 以下のコードの「width」が画像の横幅となりますので
 ご希望のサイズに編集いただきます。

 /* 主画像+サムネイルペイン */
.app_content .item_detail .item_image_block{ /* 主画像+サムネイルペイン */
width: 360px; “←こちらの数字を編集”
float: left;
}

 例)width: 500px;


2.関連するエリアの幅を調節します。
 画像を大きくした分、右側の商品名や商品説明文などのエリアの幅を縮めます。

.app_content .item_detail .item_large_info_block{ /* 商品テキスト情報ペイン */
position: relative;
margin-left: 375px; /* 主画像分+15px シフト */  “←こちらの数字を編集”
background-color:#fff;
padding:40px 20px;

}

 例)margin-left: 515px; /* 主画像分+15px シフト */


3.拡大機能の表示場所を調節します。


.app_content .item_detail .item_image_main .ems_zoom1_pos{ /* ZOOM枠 */
position: absolute; top: 0px; left: 370px;  “←こちらの数字を編集”
width: 55%;
height: 550px;
display: none;
}

 例)position: absolute; top: 0px; left: 510px;


4.以上を編集いただき、保存していただければ完了です。


<注意>
 
 適用しているデザインで行うと、保存と同時にショップの表示も変更されますので、
 他のテンプレートでテストすることをお勧めします。


ご不明の場合は、お手数ですが、
以下のお問合せフォームより直接ご連絡ください。

<easy myShopお問合せフォーム>
https://www.easy-myshop.jp/cgi-bin/form.cgi?fc=c



返信
*おなまえ
*email (回答通知用。公開されません)
*タイトル
*内容
ショップURL
*key (修正の際に使用します)

無料で本格的なネットショップ開業できるのは『イージーマイショップ』