楽天のスマホ商品ページで項目選択肢に画像表示する方法

Question

いつもお世話になっております。

ただ今、弊社ではカラー20色ある商品がございまして
お客様にお買い求め頂きやすいように
スマホのカラーを選択する際、カラー名をタップした時に、
カラー別で20色分の写真を埋め込みたいと思っております。
※添付しました画像の様にしたいです。

方法がございましたらお教えください。
よろしくお願いいたします。###HR######IMG0237c4202299f1968c3d5dce77c24f232.pngIMG0###

Accepted Answer

ECマスターズの田中です。

実際に設置された様子を確認したところ、
「カラーを選択」および「ご購入手続きへ」
それぞれクリックした時に表示される選択肢の部分にて、
内部の構造に若干差があるため、
ご連絡いただいたようなズレが発生しておりました。

各項目選択肢別在庫用の画像を設定する部分にて、一番最初の
.itemSelectPopUp dl:nth-child(4) dd:before {
を
.itemSelectPopUp dl:nth-of-type(1) dd:before {
にご変更いただき、
以降も同様に、番号が 2，3…… と続くように修正していただくことで、
双方ともに正しい表示にすることができますので、
ご修正いただきますようお願いします。

Answer

ECマスターズの塚本です。

＞スマホのカラーを選択する際、カラー名をタップした時に、
＞カラー別で20色分の写真を埋め込みたいと思っております。

いただいた画像の商品は項目選択肢別在庫で
設定されていると思いますので、

項目選択肢別在庫にて画像URLを設定していただくと、
選択した種類別に画像を表示させることが可能です。

https://mainmenu.rms.rakuten.co.jp/auth/index.phtml?params=navi/item/03_076.html&s=&param2=0

※手順９ 「在庫数」を入力し、「項目選択肢別在庫を登録する」を
押すの３ 画像を登録 の部分をご確認ください。

Answer

質問がわかりずらくすいません。

スマホで商品を購入する際に使用するカラー選択のプルダウンの中に画像を埋め込みたいのです。

よろしくお願いいたします。

Answer

ECマスターズの塚本です。

＞スマホで商品を購入する際に使用するカラー選択の
＞プルダウンの中に画像を埋め込みたいのです

購入時のプルダウン選択ですね。

現在のところスタイルシートを用いての
設定になりますので、可能であれば
設定されている商品URLをご教示いただけますでしょうか。

こちらで確認、お調べいたしまして
詳しいものよりご連絡させていただきます。

Answer

ご連絡ありがとうございます。

こちらのページのスマホサイトです。
https://item.rakuten.co.jp/bunbunbee/m-trb-a01r/

よろしくお願いいたします。

Answer

ECマスターズの塚本です。

ご共有いただきまして、ありがとうございます。

こちらお調べしまして、
担当よりご連絡させていただきます。

お時間いただきますが今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。

※RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

いただいた商品ページのスマートフォン用ページでは、
商品ごとにスタイルシートファイルを用意して、（※18/11/2 リンク切れにより内容修正）
同ファイルを読み込むためのタグをスマートフォン用商品説明文に記載することで
実現しております。

クルークさんのショップでも、
同じ形式のスタイルシートファイルをご用意いただき、


※外部スタイルシートファイルのURLは、実際のURLに置き換えてご利用下さい

上記タグをスマートフォン用商品説明文にご記載いただくことで
実現することができます。

Answer

ご連絡ありがとうございます。
無事に実現する事ができました！

詳しく教えてくださってありがとうございました。

また今後ともよろしくお願いいたします。

Answer

お世話になっております。

追記で教えていただきたくご連絡申し上げます。

通常のスクロールで下部までいき
「ご希望の商品を選択してください」
の下にある「カラーを選択」から
クリックすると正しい状態の画像が表示されるのですが

楽天の商品ページの下部にある
フローティングフッターの
「ご購入手続きへ」をクリックし、
カラー選択をしようとすると
埋め込んだ写真が3カラーめから始まってしまいます。

(例)
・ブラック(写真：イエロー)
・レッド(写真：ブルー)
・イエロー(写真：なし)
・ブルー(写真：なし)

どのようにしたら正しい画像が表示されますでしょうか？

お手数おかけしますがどうぞよろしくお願いいたします。

Answer

お世話になっております。

無事修正することができました。
ありがとうございました！

Answer

田中さん
先ほどはPCページでお世話になりました。
同ページのスマホ版
https://item.rakuten.co.jp/rasbery-house/613414/
での画像埋め込み方法をご教授お願いします。

Answer

ECマスターズの田中です。

> 同ページのスマホ版
> https://item.rakuten.co.jp/rasbery-house/613414/
> での画像埋め込み方法をご教授お願いします。

下記内容をテキストエディタ（メモ帳など）に貼り付けて
ファイル名の末尾を「.css」にして、
外部CSSファイルとして保存し、
楽天GOLDにアップロードしてください。

= この下の行から ====================
/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(画像URL);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(2) dt:before {
background-image: url(画像URL);
}

/* 以下略。項目を増やす際は、複製の上、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;
}
= この上の行まで ====================

次に、下記内容を
スマートフォン用商品説明文に挿入していただくことで、
項目選択肢別在庫の縦軸に画像をご設置いただくことができます。

= この下の行から ====================

= この上の行まで ====================
※外部CSSファイルのURLは、実際のURLに置き換えてご利用ください。

Answer

田中様
ご連絡有難うございます。

添付ファイルのスクリーンショットをご覧いただければ
お分かりになると思いますが、
スマホはPCと異なりサイズ別のプルダウンに商品のデザイン・色があるので
全部入れると42枚の画像を挿入することになります。

入れる手間より見た目のうるささがきになるので
色デザインの下にサイズを配置できれば6枚の画像挿入で
見た目にも簡潔になると思います。

従って、RMSの項目選択肢在庫をいじることなく
スマホの表示では縦軸と横軸を反対にし
（即ち、色・デザインの下にサイズがくる配置）たのちに
画像挿入はできないかと思い連絡いたしました。

よろしくお願いします。###HR######IMG0c3aecf805154bc685a8517a57e2da1b7.pngIMG0######BR###

Answer

ECマスターズの田中です。

残念ながら、スマートフォン用ページにて
縦軸と横軸を入れ替える方法は
発見されておらず、
実行することはできません。

万が一、他ショップにて実施されている例がございましたら、
方法を分析しますので、
確認できるURLをお知らせいただきますようお願いします。

なお、いただいたスクリーンショットは
アプリの画面ですが、
アプリはWebページと異なる仕組みのため、
スタイルシートによる画像の設置自体もできませんことを、
何卒お含みおきいただきますようお願いします。

Answer

田中さん
お世話様です。

▼で実際にやっている店があります。
https://item.rakuten.co.jp/saisondepapillon/xya1710/

ここはどのようにやっているのでしょうか？###HR######IMG0859275f4b4b038bb5e3319b492b6dece.jpegIMG0######BR###

Answer

ECマスターズの田中です。

いただいた商品でも、
先に（2020/02/03 16:49に）ご返信差し上げたものと同等の方法で
項目選択肢別在庫の縦軸に画像を入れておりますので、
こちらの方法をお試しいただきますようお願いします。

なお、nobiさんのショップの商品も、saisondepapillonさんの商品も、
スマートフォン用ページでは縦軸（色・デザイン）が先に選択でき、
アプリでは逆に横軸（サイズ）を先に選択する形式になっており、
システムを改変して縦横を差し替えている様子はございませんでした。

また、saisondepapillonさんの商品も、
アプリでは特に改変のされていない見た目となっておりますことを
お含みおきいただきますようお願いいたします。

Answer

田中さん
お世話様です。

早速やってみましたが
画像が表示されません。

どこに問題があるでしょうか？

よろしくお願いいたします。

/* 1項目目 */
.itemSelectPopUp dl:nth-of-type(1) dt:before {
background-image: url(https://image.rakuten.co.jp/rasbery-house/cabinet/06338408/gray-color-1.jpg
);
}

/* 2項目目 */
.itemSelectPopUp dl:nth-of-type(2) dt:before {
background-image: url(https://image.rakuten.co.jp/rasbery-house/cabinet/06338408/beige-color-1.jpg
);
}

/* 3項目目 */
.itemSelectPopUp dl:nth-of-type(3) dt:before {
background-image: url(https://image.rakuten.co.jp/rasbery-house/cabinet/06338408/navy-color-1.jpg
);
}

/* 4項目目 */
.itemSelectPopUp dl:nth-of-type(4) dt:before {
background-image: url(https://image.rakuten.co.jp/rasbery-house/cabinet/06338408/613414-gr3.jpg
);
}

/* 5項目目 */
.itemSelectPopUp dl:nth-of-type(5) dt:before {
background-image: url(https://image.rakuten.co.jp/rasbery-house/cabinet/06338408/613414-be3.jpg
);
}

/* 6項目目 */
.itemSelectPopUp dl:nth-of-type(6) dt:before {
background-image: url(https://image.rakuten.co.jp/rasbery-house/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;

---------------------------------------------------------------------------------

Answer

ECマスターズの田中です。

いただいたlinkタグに記載されている
https://www.rakuten.ne.jp/gold/rasbery-house/coat/613414-select-pic.css
にアクセスすると「ファイルが見つからない」とのエラーが発生しましたので、
CSSファイルのURLを改めてご確認いただきますようお願いします。

Answer

田中さん

できました。

何度も何度もご丁寧に対応いただき
本当にありがとうございました。

Answer

お世話になっております。
当店も上記の方法（stylesheetタグ使用）でスマホの選択肢に画像を表示しております。
大変わかりやすく気に入っていたのですが、
楽天より、スマートフォン版およびアプリ版のリニューアル（2020年7月28日）
の案内がきており、stylesheetタグが対象のため、削除しなければなりません。
泣く泣く削除しておりますが、
他にスマホの選択肢に画像を表示させる方法があればお教えください。

Answer

ECマスターズの田中です。

画像を引き続き表示させたいお気持ちはお察しいたします。
また、万が一、ご案内可能な方法が見つかりましたら
会員の皆様へのお知らせをもってご案内させていただきます。

ですが、
リニューアル後の利用可能タグでは対応が不可能であること、および
https://mainmenu.rms.rakuten.co.jp/?act=supportnews&news_id=7004
の「HTMLタグの利用制限について」に記載されておりますとおり、
タグの利用制限が正しく動作することを目的としたエラーチェック強化であることを
何卒お含みおきいただきますよう、よろしくお願いいたします。