【楽天市場】横軸の項目選択肢に画像を入れたい

Question

下記の商品に対して横軸の項目選択肢に画像を入れたいと思っています。
どのようなHTML？CSS？をどこに入れるといいでしょうか？

パソコンはもちろんスマホでも表示したいと考えています。

対象商品URL（カラーは5色となります）
https://item.rakuten.co.jp/heartprice5586/pen-1/

ご教授いただければと思います。

Answer

ECマスターズの中野です。


楽天の仕様では、以下の通り項目選択肢別在庫に登録いただいた画像は
お客様側に表示されない仕様となりますが、いただいた以下のご質問につきまして、
対応方法について週明け担当より回答させていただきます。

項目選択肢別在庫ごとの画像は楽天市場に表示されますか？
https://navi-manual.faq.rakuten.net/item/000015923

お時間いただきますがお待ちくださいますよう
よろしくお願いいたします。

Answer

ECマスターズの伊藤です。

ご回答が遅れまして申し訳ございません。

> 下記の商品に対して横軸の項目選択肢に画像を入れたいと思っています。
> どのようなHTML？CSS？をどこに入れるといいでしょうか？
> 
> パソコンはもちろんスマホでも表示したいと考えています。

残念ながら、楽天の使用上、スマホには
画像を表示することができません。

PCについては、下記のタグの
【画像URL】
を修正いただき、
「PC用商品説明文」にご登録ください。

上から、左、左から2番め・・・と画僧の指定をお願いします。




/* PC 選択肢名前に画像出す - 横軸横軸用
---------------------------------- */
.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 80px;
height: 80px;
margin: 0 auto 10px;
}

.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(1):before {
background: url(【画像URL】) no-repeat;
background-size:contain;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
    background: url(【画像URL】) no-repeat;
    background-size:contain;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(3):before {
    background: url(【画像URL】) no-repeat;
    background-size:contain;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(4):before {
    background: url(【画像URL】) no-repeat;
    background-size:contain;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(5):before {
    background: url(【画像URL】) no-repeat;
    background-size:contain;
}

Answer

伊藤様

ご回答いただきありがとうございます。
慣れない作業ではありますが、先ずはやってみます。

ありがとうございました。