項目選択肢のテーブルに画像を差し込む方法

Question

いつもお世話になっております。
他店舗様で項目選択肢に商品画像を差し込んでいる店舗がありました。

こちらはRMSに問い合わせをしたところ項目選択に画像を差し込む機能は無いので、
独自でCSSを使用して行っているという回答をいただきました。

こちらの項目選択肢について画像を差し込む方法をご存じでしたらばご教示いただけないでしょうか？
参考店舗様のURLが必要でしたらばメールでお知らせさせて頂きます。

よろしくお願い致します。###HR######IMG0cf7270c7a36463491dfc72fc52c22e02.pngIMG0###

Answer

ECマスターズの伊藤です。

> こちらの項目選択肢について画像を差し込む方法をご存じでしたらばご教示いただけないでしょうか？

項目選択肢に画像を追加するには、CSSを追加して頂く必要がございます。
詳しいCSSについては、下記フォーラムにて、
清水より回答をしておりますので、こちらをご覧くださいませ。

ご不明な点がございましたら、ご相談くださいませ。

https://forum.ec-masters.net/post_view.php?id=8507

Answer

お忙しい中ご連絡ありがとうございました。
もう一点、質問がございます。

質問の内容が重複してしまい大変恐縮ではございますが
スマホの画像を差し替える場合、
ご紹介いただいたページにはCSSを直接変更するという内容がございます。

恐らく弊社の場合もそのように対応するかと存じますが、該当のCSSをご教示ください。
RMS上の操作は可能でしょうか？

Answer

ECマスターズの伊藤です。

> 恐らく弊社の場合もそのように対応するかと存じますが、該当のCSSをご教示ください。
> RMS上の操作は可能でしょうか？

スマートフォン用商品説明文に入力する方法もございますので、
こちらをご案内させていただきます。

下記　〜 を
スマートフォン用商品説明文に入れていただきますと
スマホでも項目選択肢に画像を表示していただけます。

2項目のみ、例で記述しておりますので、
他の画像を追加して、ご登録をお願いいたします。


/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/dreamsupply/cabinet/design/giftitems/lemonade-1.jpg);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(2) dt:before {
background-image: url(https://image.rakuten.co.jp/dreamsupply/cabinet/design/giftitems/lime-1.jpg);
}

/* 以下略。項目を増やす際は、複製の上、nth-of-type(*)の数字と画像URLを修正してください。 */

.itemSelectPopUp dl {
height: 80px;
}
.itemSelectPopUp dt:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: auto 80px;
background-repeat: no-repeat;
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
min-height: 80px;
height: 80px;
text-indent: 80px;
}
body .itemSelectPopUp dt span:after,
body .itemSelectPopUp dl.opened dt span:after{
top: 33px;
}

Answer

いつも有益な情報ありがとうございます。

下記　〜 を
スマートフォン用商品説明文に入れていただきますと
スマホでも項目選択肢に画像を表示していただけます。
↑
上記の方法をスマートホン用商品説明分に挿入し項目選択肢にカラバリ画像を表示させてみました。
結果、1枚目の画像のみが項目の上部に表示されるだけでした。
原因がわかりません。
お手数ですがご確認いただけないでしょうか。

よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

ばっきーさん ＞

> 上記の方法をスマートホン用商品説明分に挿入し項目選択肢にカラバリ画像を表示させてみました。
> 結果、1枚目の画像のみが項目の上部に表示されるだけでした。

実際の商品ページを拝見させていただきたいと思いますので
商品IDをご連絡いただけますでしょうか。

Answer

お世話になります

https://item.rakuten.co.jp/markgraf/100000226/

上記商品IDとなります。
以下4項目登録してみましたが、1項目のみ表示されます


/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1684.jpg);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(2) dt:before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1683.jpg);
}

/* 3項目目 */
.itemSelectPopUp dl:nth-of-type(3) dt:before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1685.jpg);
}

/* 4項目目 */
.itemSelectPopUp dl:nth-of-type(4) dt:before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1686.jpg);
}


.itemSelectPopUp dl {
height: 80px;
}
.itemSelectPopUp dt:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: auto 80px;
background-repeat: no-repeat;
}
.itemSelectPopUp label {
padding: 0 34px 0 0px;
}
.itemSelectPopUp dt {
min-height: 80px;
height: 80px;
text-indent: 80px;
}
body .itemSelectPopUp dt span:after,
body .itemSelectPopUp dl.opened dt span:after{
top: 33px;
}

Answer

ECマスターズの伊藤です。

ばっきーさん ＞

> 上記商品IDとなります。
> 以下4項目登録してみましたが、1項目のみ表示されます

商品ページのご連絡、ありがとうございました。

縦軸と横軸とで表示方法が異なるため
画像が表示されておりませんでした。

下記のコードですと
縦軸、横軸とも、画像を表示していただけますので
ご利用くださいませ。


項目を増やす際は、
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before {
background-image: url(画像URL);
}
複製の上、
縦軸は dl:nth-of-type(*) 
横軸は nth-of-type(*)
の数字と画像URLを修正してください。 



/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1684.jpg);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(2):before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1683.jpg);
}

/* 3項目目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(3):before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1685.jpg);
}

/* 4項目目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(4):before {
background-image: url(https://image.rakuten.co.jp/markgraf/cabinet/desktop3/1bn1686.jpg);
}

.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 81px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.itemSelectPopUp label {
padding: 0 34px 0 0px;
}

.itemSelectPopUp dd {
min-height: 81px;
height: 80px;
text-indent: 80px;
}

body .itemSelectPopUp .itemSelectRadio {
top: 32px;
}

body .itemSelectPopUp dl .inStockMailLink {
top: 16px;
}

Answer

伊藤　様

お世話になりました。
キレイに表示されました。
ありがとうございました。