項目選択肢別在庫での画像表示設定(スマホ)

Question

お世話になります。

項目選択肢別在庫の画像設定について教えて下さい。

https://forum.ec-masters.net/post_view.php?id=8507
こちらを参考に、PC・スマホともに画像を表示させることはできました。
ここから、スマホで画像表示させる場所を変更できるでしょうか？

添付画像は上記リンク先ページのもので私のページも同様の形なのですが、スマホページで項目選択肢を折りたたむと画像が隠れてしまいます。
折りたたんだ状態でも画像が表示される、この画像でいうとBLACK・KHAKIなどの項目選択肢のタイトル部分に画像を表示したいと考えています。

よろしくお願いします。###HR######IMG027bcba34cf299235d23373595a8632b1.jpegIMG0###

Accepted Answer

ECマスターズの田中です。

それでは、下記の形式でスタイルシートをご設置いただきますようお願いします。

= この下の行から ====================
@charset "utf-8";
/* CSS Document */


.itemSelectPopUp dl:nth-of-type(1) dt:before {
    background-image: url(画像URL);
}

.itemSelectPopUp dl:nth-of-type(2) dt:before {
    background-image: url(画像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 {
	background-color: タイトル部分の背景色 !important;
	min-height: 80px;
	height: 81px;
	text-indent: 80px;
}
body .itemSelectPopUp dt>span:after,
body .itemSelectPopUp dl.opened dt>span:after{
	top: 33px;
}
= この上の行まで ====================
※画像URLは、各選択肢に表示する画像URLにご変更ください。
※タイトル部分の背景色は、カラーコードもしくは色の名前にご変更ください。変更しない場合は行ごと削除願います。
※以上３行ずつ（空白含めて４行ずつ）繰り返し、の部分は、「.itemSelectPopUp dl:nth-of-type(*) dt:before」から始まる３行の規則を繰り返しご記入ください。

Answer

ECマスターズの田中です。

> 折りたたんだ状態でも画像が表示される、この画像でいうとBLACK・KHAKIなどの項目選択肢のタイトル部分に画像を表示したいと考えています。

スタイルシートで調整を行うことで可能となります。

ちなみに、楽天の商品画像は、
基本的に透過の情報を持っていないため、
添付画像のように、背景の色込みで表示されることになりますが
構いませんでしょうか。

ご確認いただき次第、調整するためのスタイルシートの内容を検討させていただきます。###HR######IMG04766639fc49bbb8d187925357a4c87bf.pngIMG0######BR###

Answer

田中様

ご確認ありがとうございます。
可能なんですね！！

＞添付画像のように、背景の色込みで表示されることになりますが
＞構いませんでしょうか。
はい、構いません。
よろしくお願いします！

Answer

ありがとうございます！

表示される場所を変更することができました！