楽天の設定について

Question

商品の項目選択肢別在庫を文字だけでなく画像を載せるやり方を教えてほしいです。
清水先生が紹介していた動画を見て可能なのであれば私もやりたいと思いました。
添付画像が見本です。###HR######IMG05aae4959ec0fdc0dd5ce9af38b0033da.jpegIMG0###

Accepted Answer

ECマスターズの伊藤です。

> 商品の項目選択肢別在庫を文字だけでなく画像を載せるやり方を教えてほしいです。

下記のタグを編集していただき、
PC用商品説明文などにご登録ください。

ご不明な点がございましたら、ご質問くださいませ。



/* PC 選択肢名前に画像出す - 横軸横軸用
---------------------------------- */
.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 80px;
height: 80px;
margin: 0 auto 10px;
background-size: contain;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background-image: url(画像URL) ;
no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(3):before {
background-image: url(画像URL) ;
no-repeat;
}

/* 
以下、商品数に合わせて
.floating-cart-sku-table tr:nth-of-type(上から何番目) .inventory:nth-of-type(左から何番目):before {
background-image: url(画像URL) ;
no-repeat;
}
を追加してください。
*/


※5/28 コードを一部修正いたしました。

Answer

ECマスターズの伊藤です。

いただいたご質問ですが、確認いたしますので、
恐れ入りますが、ご回答まで今しばらくお待ちくださいますよう
お願いいたします。

Answer

回答ありがとうございます。
タグに詳しくはないのですが
～
の間に（）があるのですがそのまま使用しても大丈夫なのでしょうか？

Answer

また、編集して張り付けたのですが画像が表示されないです。###HR######IMG0ebe9ad550a25ba2966e133a046fca7cf.jpegIMG0###

Answer

ECマスターズの伊藤です。

> ～
> の間に（）があるのですがそのまま使用しても大丈夫なのでしょうか？

はい、こちらは正しい記述となっております。

参考：
https://developer.mozilla.org/ja/docs/Web/CSS/:nth-of-type


> また、編集して張り付けたのですが画像が表示されないです。

画像のURLにお間違いはないでしょうか。
お間違い無い場合、確認させていただきたいので、
適用頂いたページのURLをご連絡くださいませ。

Answer

そのまま張り付けて指定された場所に商品画像URLを入れたのですが未だに反映しておらず空白のままです。
適用したページのURLです。
https://item.rakuten.co.jp/kujiramoon/pc210414-1799/

適用したタグを身的になったところがあるのですが、
商品の1項目目のタグは（　が消えているわけではないのでしょうか？###HR######IMG06e994c24bf46338edd7deec4d0c03c11.jpegIMG0###

Answer

ECマスターズの伊藤です。

> そのまま張り付けて指定された場所に商品画像URLを入れたのですが未だに反映しておらず空白のままです。
> 適用したページのURLです。
> https://item.rakuten.co.jp/kujiramoon/pc210414-1799/

URLのご連絡ありがとうございました。


> 適用したタグを身的になったところがあるのですが、
> 商品の1項目目のタグは（　が消えているわけではないのでしょうか？

大変失礼いたしました。
おっしゃるとおり、お伝えしておりましたタグの記述が
異なっておりました。

下記のタグにてご対応いただけますので、ご利用くださいませ。
また、先にご連絡したタグも修正いたしました。
タグの記述ミスでご迷惑をおかけしてしまい、
大変申し訳ございませんでした。



/* PC 選択肢名前に画像出す - 横軸横軸用
---------------------------------- */
.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 80px;
height: 80px;
margin: 0 auto 10px;
background-size: contain;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(1):before {
background-image: url(https://image.rakuten.co.jp/kujiramoon/cabinet/foamgun/08011238/imgrc0086749148.jpg);
no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background-image: url(https://image.rakuten.co.jp/kujiramoon/cabinet/foamgun/08011238/imgrc0086593901.jpg) ;
no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(3):before {
background-image: url(https://image.rakuten.co.jp/kujiramoon/cabinet/foamgun/08011238/imgrc0087545350.jpg) ;
no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(4):before {
background-image: url(https://image.rakuten.co.jp/kujiramoon/cabinet/foamgun/08011238/imgrc0087545352.jpg);
no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(5):before {
background-image: url(https://image.rakuten.co.jp/kujiramoon/cabinet/foamgun/08011238/imgrc0087545353.jpg) ;
no-repeat;
}