楽天の注文カラー選択肢にて該当カラーの画像？を添付のように設定方法について

Question

楽天の注文カラー選択肢にて該当カラーの画像？を添付のように設定方法についてわかる方いらっしゃいませんか？###HR######IMG06c9d07ef81b0a………（省略）………

Answer

ECマスターズの田中美帆です。

> 楽天の注文カラー選択肢にて該当カラーの画像？を添付のように設定方法についてわかる方いらっしゃいませんか？

2018年頃まで、項目選択肢に画像を表示する
機能がございましたが、現在は機能しておりません。

[商品ページ設定 商品個別編集] 項目選択肢別在庫ごとの画像は楽天市場に表示されますか？
https://navi-manual.faq.rakuten.net/item/000031816

なお、PCの場合は、CSSを追加することにより
画像を表示することが可能です。

スマートフォンの場合は、
styleタグが利用不可につき、画像の表示が
できかねますので、ご了承くださいませ。

以下のソースコードの
画像URLと項目数を変更の上、
PC用商品説明文などのHTMLが
利用可能な箇所にご記述ください。

====================


/* 選択肢名前に画像出す - 縦軸専用
---------------------------------- */
#rakutenLimitedId_aroundCart tr tr tr:not(:first-child) .inventory_choice_name span:before {
content: "";
display: block;
width: 100px; /*画像の幅*/
height: 100px; /*画像の高さ*/
background-size: 100px; /*画像の幅*/
margin-bottom: 4px;
}
/* 1項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(2) .inventory_choice_name span:before {
background-image:url("画像URL");
}

/* 2項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(3) .inventory_choice_name span:before {
background-image:url("画像URL");
}

/* 3項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(4) .inventory_choice_name span:before {
background-image:url("画像URL");
}

/* 4項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(5) .inventory_choice_name span:before {
background-image:url("画像URL");
}

/* 5項目目 */
#rakutenLimitedId_aroundCart tr tr tr:nth-child(6) .inventory_choice_name span:before {
background-image:url("画像URL");
}



====================

なお、楽天の仕様変更により
レイアウトが崩れる可能性がございますので、
ご留意の上、編集をお願いいたします。

Answer

いずれにしてもスマホは表示できないのですね！
ご丁寧にありがとうございます。