[戻る]
No.6874

テンプレートのカスタマイズ(商品一覧ページ)について

nssさん  投稿日:2023/09/29(Fri) 11:00
key

テンプレート(c01-Mono_Tone1)を使わせて貰っています。
商品一覧、商品詳細ページに表示される商品画像に罫線を付けたいと考えています。

詳細ページについては
.item_detail .item_image_main img.item_image {
に追記したことで、画像に罫線がつきましたが、
一覧ページではどこで設定すれば良いでしょうか。

Re: テンプレートのカスタマイズ(商品一覧ページ)について

おたすけマイショップさん  2023/09/29(Fri) 17:58 No.6877
key

商品一覧ページの画像に対して罫線をスタイルで指定する認識で回答させていただきます。
商品一覧ページの画像に対してスタイルを充てる場合は以下のclassでスタイルの作成・追加いただくことで可能です。

「.item_image_frame」

なお、各カテゴリページを含む商品一覧ページ全てに対しても適用がされますので予めご了承ください。


Re: テンプレートのカスタマイズ(商品一覧ページ)について

nssさん  2023/09/29(Fri) 22:42 No.6880
key

ありがとうございます。

.item_catalog .item_image_frame {
border: solid 1px #000000;
}

と記述をしたところ、画像だけではなく、商品名画像、金額等のエリアに罫線が表示されました。
画像のみに罫線を付けたいと思っています。


Re: テンプレートのカスタマイズ(商品一覧ページ)について

おたすけマイショップさん  2023/10/02(Mon) 16:55 No.6884
key

案内の認識が異なり大変恐れ入ります。
画像のみの罫線を適用させる場合は以下のスタイルになりますが、商品フレームの設定により
画像のみではなく画像が表示されるエリアに対しての適用となりますことをご了承ください。

.item_catalog .item_image_frame .item_image_block {
border: solid 1px #000000;
}

そのため、下記にてご案内する設定をしていただくことで画像とフレーム設定の差を無くし画像に対して罫線を反映したような表示が可能となりますのでご参照の上、お試しください。

1.拡張設定>デザイン設定「レイアウト」
2.ページ選択「商品一覧▽」
3.[商品一覧・フレーム設定]をクリック
4.「商品フレーム」欄「フレームサイズ」にて「〇チューニング」を選択
5.「3. 画像エリア 高さ:」にて「自動(画像に合わせる)」を選択
6.[保存]をクリックで設定は完了です。

前述の設定以外に関してはご利用いただく画像によっては画像とフレーム設定差が発生し
画像が無い部分に対して罫線が表示される見た目になることがございます。
※商品一覧ページにて商品画像のフレーム(表示エリア)に対して罫線を反映させるスタイルは前回のご案内した内容で可能です。

前述の設定以外で罫線の反映する場合は、スタイルでの適用は困難となります。
お手数ではございますが、商品画像としてご利用いただく画像に対して直接、お持ちの画像編集ソフト等で
罫線を追加したのちに、その画像をアップロードしてご利用いただきますようお願いいたします。
※イージーマイショップ上では画像編集機能はございませんので店舗様にて編集をお願いいたします。



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

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