項目選択肢の画像について

Question

項目選択肢を目立たせたくて、色を変える方法を、以前、フォーラムから教えていただきました。
添付画像のように、画像でさらに目立たせるにはどのようにしたらいいでしょうか？
よろしくお願いいたします。

http://item.rakuten.co.jp/dandelion/01009031/###HR######IMG0247d05d1254e44a909c21fd9fb47f8a9.jpegIMG0###

Answer

ECマスターズの田中です。

まずは、いただいた商品ページにおける
https://www.rakuten.ne.jp/gold/dandelion/images/pulldown.gif
のように、項目選択肢名の背景にあたる画像ファイルを
R-Cabinetにご用意ください。

次に、下記のHTMLソースを、
ヘッダー・フッター・レフトナビまたは共通説明文（大）に
挿入していただくことで完了となります。

===== この下の行から ================

/* 項目選択肢用の説明文 */
span.choice {
display: block;
width: 背景用画像の横幅px;
height: 背景用画像の高さpx;
background: url(背景用画像URL);
background-size: cover;
}

===== この上の行まで ================
※背景用画像の横幅（高さ）、背景画像用URLは、半角数字および実際のURLにご変更ください。
※文字の装飾や余白などは、上記規則に加えて加えてご設定をお願いします。

Answer

さっそくに、ありがとうございます。やってみます。

Answer

すみません。両方とも併用したいのですが、ずれてしまいます。お教えください。
よろしくお願いいたします。


/* 項目選択肢用の説明文 */
span.choice {
display: block;
width: 380px;
height: 30px;
background: url(https://image.rakuten.co.jp/kamy2/cabinet/topimg/380x30pw.gif
);
background-size: cover;
}



/* 項目選択肢ラベル */
#rakutenLimitedId_aroundCart td span.choice {
padding: 3px;
margin: 3px;
display: inline-block;
vertical-align: middle;
text-align: center;
background-color:#CC0000;
color:#fff;
}

Answer

ECマスターズの塚本です。

こちらの質問ですがお調べしまして、
担当者よりあらためてご連絡さしあげます。

お時間いただいておりますが、今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

併用をご希望とのことですが、
今回の規則で足りない点はどの部分になりますでしょうか。
足りない部分を、今回の規則に加えていただければ引き継ぐことができます。
たとえば、文字色を引き継ぐ場合は、colorの行をコピーしてください。

さらに、セレクタ部分は、厳密に定義されている既存の部分を使うようにし、
縦方向に中央揃え、文字の始まりは若干余白を作る、など調整すると、
結果として下記のような規則になります。


/* 項目選択肢用の説明文 */
#rakutenLimitedId_aroundCart td span.choice {
display: flex;
align-items: center;
width: 380px;
height: 30px;
background: url(https://image.rakuten.co.jp/kamy2/cabinet/topimg/380x30pw.gif) no-repeat;
color:#fff;
text-indent: 5px;
}


ちなみに、上記タグだけを記入していただくと
おわかりいただけると思うのですが、
文章が長すぎて、赤い枠の中に入りきれておりません。
文字数の削減、画像の赤枠部分を延長、などの対策をお願いします。