質問: 楽天のスマホ商品ページで項目選択肢に画像表示する方法 いつもお世話になっております。ただ今、弊社ではカラー20色ある商品がございましてお客様にお買い求め頂きやすいようにスマホのカラーを選択する際、カラー名をタップした時に、カラー別で20色分の写真を埋め込みたいと思っております。※添付しました画像の様にしたいです。方法がございましたらお教えください。よろしくお願いいたします。
回答: 田中さんお世話様です。早速やってみましたが画像が表示されません。どこに問題があるでしょうか?よろしくお願いいたします。/* 1項目目 */.itemselectpopup dl:nth-of-type(1) dt:before {background-image: url(https://image.rakuten.co.jp/shop-url/cabinet/06338408/gray-color-1.jpg);}/* 2項目目 */.itemselectpopup dl:nth-of-type(2) dt:before {background-image: url(https://image.rakuten.co.jp/shop-url/cabinet/06338408/beige-color-1.jpg);}/* 3項目目 */.itemselectpopup dl:nth-of-type(3) dt:before {background-image: url(https://image.rakuten.co.jp/shop-url/cabinet/06338408/navy-color-1.jpg);}/* 4項目目 */.itemselectpopup dl:nth-of-type(4) dt:before {background-image: url(https://image.rakuten.co.jp/shop-url/cabinet/06338408/613414-gr3.jpg);}/* 5項目目 */.itemselectpopup dl:nth-of-type(5) dt:before {background-image: url(https://image.rakuten.co.jp/shop-url/cabinet/06338408/613414-be3.jpg);}/* 6項目目 */.itemselectpopup dl:nth-of-type(6) dt:before {background-image: url(https://image.rakuten.co.jp/shop-url/cabinet/06338408/613414-na6.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: 80px;background-repeat: no-repeat;}.itemselectpopup label {padding: 0 34px 0 0px;}.itemselectpopup dt {min-height: 80px;height: 81px;text-indent: 80px;}body .itemselectpopup dt>span:after,body .itemselectpopup dl.opened dt>span:after{top: 33px;---------------------------------------------------------------------------------