スマホでの項目選択肢別画像の表示について

Question

いつもお世話になっています。
スマホ画面のカートに画像をいれたいのですが先日お問い合わせ履歴から見ましたCSSのコードを【スマートフォン用商品説明文】にいれたのですが横軸専用のCSSになっているようでして縦軸のものもあるのでしょうか。PC説明分のカートは横に品番が1.2.3.4～と並んでいます。それをそのままスマフォのカートにも反映させたいです。宜しくお願い致します。

Answer

ECマスターズの伊藤です。

> スマホ画面のカートに画像をいれたいのですが先日お問い合わせ履歴から見ましたCSSのコードを【スマートフォン用商品説明文】にいれたのですが横軸専用のCSSになっているようでして縦軸のものもあるのでしょうか。PC説明分のカートは横に品番が1.2.3.4～と並んでいます。それをそのままスマフォのカートにも反映させたいです。宜しくお願い致します。

下記に、縦軸、横軸に対応したコードを
ご案内いたしましたが、

楽天RMSのバグを利用した方法となり、
7月にスマホサイトリニューアル、
8月にRMS入力エラーチェック強化後、
ご利用いただけなくなります。

そのため、対応した内容を、全て修正する必要が
出てしまうため、
8月の入力エラーチェック強化をお待ちいただき、
ご対応いただくことを、おすすめいたします。

なお、エラーチェック強化後に、
カートの画像表示方法など、
現在と同じような仕組みが利用できるかは、
実装されないと調査ができないため
現時点ではご案内できません。

実装後でも、禁止タグ使用方法が
見つからない可能性がありますので
ご了承くださいませ。

詳しくは、下記ページのまとめをご参照くださいませ。
https://club.ec-masters.net/index.php?ecm-errcheck


= この下の行から ====================

/* 縦軸１つ目・横軸１つ目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before {
background-image: url(画像URL);
}

/* 縦軸１つ目・横軸２つ目 */
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(2):before {
background-image: url(画像URL);
}

/* 縦軸２つ目・横軸１つ目 */
.itemSelectPopUp dl:nth-of-type(2) dd:nth-of-type(1):before {
background-image: url(画像URL);
}

/* 縦軸３つ目・横軸１つ目 */
.itemSelectPopUp dl:nth-of-type(3) dd:nth-of-type(1):before {
background-image: url(画像URL);
}

/* 
以下略。項目を増やす際は、複製の上、
縦軸は dl:nth-of-type(*) 
横軸は nth-of-type(*)
の数字と画像URLを修正してください。 
*/

.itemSelectPopUp dd {
height: 80px;
}

.itemSelectPopUp dd:before {
display: inline-block;
position: absolute;
content: "";
left: 0;
width: 80px;
height: 80px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.itemSelectPopUp label {
padding: 0 34px 0 0px;
}

.itemSelectPopUp dd {
min-height: 80px;
height: 80px;
text-indent: 80px;
}

body .itemSelectPopUp .itemSelectRadio {
top: 32px;
}

body .itemSelectPopUp dl .inStockMailLink {
top: 16px;
}