項目選択肢ブロックのカスタマイズについて

Question

お世話になります。

項目選択肢ブロックの上部に間隔を開け、項目選択肢の説明（各項目からご希望のものを選択して下さい...等）を追加したいのですが、可能でしょうか。
可能であればどのようにすればよいでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

下記のHTMLソースを、
ヘッダー・フッター・レフトナビまたは共通説明文（大）に
挿入してください。

===== この下の行から ================

/* 項目選択肢用の説明文 */
span.choice:nth-of-type(1):before {
    display: block;
    content: ".";
	overflow: hidden;
	text-indent: -100%;
    width: バナー用画像の横幅px;
    height: バナー用画像の高さpx;
    background: url(バナー用画像URL);
    background-size: cover;
}

===== この上の行まで ================
※バナー用画像の横幅（高さ）、バナー画像用URLは、半角数字および実際のURLにご変更ください。
※余白が必要な場合は、「margin-top: 10px;」のような属性を加えて、余白を作ってください。

なお、この方法は、
一番目の項目選択肢の項目名の直前に
表示のための領域を作り、
領域の背景としてバナー用の画像を設定する、
という仕組みになっております。

そのため、BBさんのショップのように、
項目選択肢の項目名を囲まれた領域（ブロックレベル要素）として
表示させている場合、
項目名の領域の中にバナー用の領域が入っている扱いとなるため、

画像の下に余白を作ると、項目選択肢の領域の背景色（#DD455E）がつき、
領域の角を丸くする効果も、画像に隠れて見えなくなってしまいます。

見た目を整えるためには、
バナー用画像ファイルを画像編集ソフトで開き、
余白と、項目名の角丸の部分だけを、バナーの真下に加え、
つながって自然に見えるように修正していただく必要があります。

あるいは、上記HTMLタグの中に含まれる
span.choice:nth-of-type(1):before
を、
span.inventory_desc:after
にご変更いただくことで、
項目選択肢別在庫の商品に限り、
画像ファイルの調整をすることなく、バナー用画像を表示させることができます。

Answer

とても詳しく解説して頂き、感謝です！

早速やってみます。ありがとうございました。