- 楽天
- Yahoo!
【楽天/RMSにコピペで完了!】カラーやサイズの「選択肢」に一緒に画像を表示させるTips
2016/08/19

こんにちは。お願いだから海産料理屋に水槽を置くのをやめて欲しいオガリア中村です。せめて、アレですよ、席から魚と目が合わない位置に置いて欲しいです。
楽天ショップに限らずなんですが。商品画像を見て欲しいカラーがあっても、いざお買い物かごに入れるときに「どのカラーを選べばいいのか」分からず、商品画像を見返さないといけない事ありませんか?3色程度ならいいけど、これが5色以上になるとちょっとややこしかったり。
そこで!カラーの選択肢を作る楽天市場の機能「項目選択肢別在庫」に、商品画像を一緒に載せられちゃうTipsをご紹介しますー!
デモ
「項目選択肢別在庫設定」を登録した場合、初期デザインではこのような状態になります。これだと、どの選択肢がどの商品に該当するのかここでは確認とれませんよね・・・・。

そこでこんな感じに選択肢と一緒に画像を出します。欲しい商品がどの選択肢なのか一目で分かるゥ!くぅ!分かり易いィ!

使用するCSS
画像を出したい場所に応じて、次のCSSを使っていきますよー!具体的な書き換え箇所は後述の「手順」をご確認をッ!
よこ軸の選択肢に画像を入れるCSS

<style type="text/css"> <!-- /* 選択肢名前に画像出す - 横軸専用 ---------------------------------- */ #rakutenLimitedId_aroundCart tr tr tr:first-child .inventory_choice_name span:before { content: ""; display: block; width: 100px; /*画像の幅*/ height: 100px; /*画像の高さ*/ background-size: 100px; /*画像の幅*/ margin-bottom: 4px; } /* 1項目目 */ #rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(1) span:before { background-image:url("画像URL"); } /* 2項目目 */ #rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(2) span:before { background-image:url("画像URL"); } /* 3項目目 */ #rakutenLimitedId_aroundCart .inventory_choice_name:nth-child(3) span:before { background-image:url("画像URL"); } --> </style>
たて軸の選択肢に画像を入れるCSS

<style type="text/css"> <!-- /* 選択肢名前に画像出す - 縦軸専用 ---------------------------------- */ #rakutenLimitedId_aroundCart tr tr tr:not(:first-child) .inventory_choice_name span:before { content: ""; display: block; width: 100px; /*画像の幅*/ height: 100px; /*画像の高さ*/ background-size: 100px; /*画像の幅*/ margin-bottom: 4px; } /* 1項目目 */ #rakutenLimitedId_aroundCart tr tr tr:nth-child(2) .inventory_choice_name span:before { background-image:url("画像URL"); } /* 2項目目 */ #rakutenLimitedId_aroundCart tr tr tr:nth-child(3) .inventory_choice_name span:before { background-image:url("画像URL"); } /* 3項目目 */ #rakutenLimitedId_aroundCart tr tr tr:nth-child(4) .inventory_choice_name span:before { background-image:url("画像URL"); } --> </style>
ラジオボタンと一緒に画像を入れるCSS

※こちらはogaRiaフルバージョンプランご契約者様限定の公開となります。
CSSを見る(ogaRiaフルバージョンご利用者様限定)
手順
1. 手元に画像を用意する
まずは表内に表示する画像を用意します。
・サイズはいくつでもOK!(後ほどCSS側で一括調整できます)
・できれば、カラーや模様が分かり易いアップ画像がおすすめ
・正方形がおすすめ
用意した画像は、R-Cabinetか楽天GOLDにアップロードしておきます。
2. CSSを用意する
先ほどのCSSをコピーして、メモ帳などに貼り付けましょう。次の箇所を書き換えます。
- 画像URL
先ほど登録した画像のURLに書き換えます。 - 画像のサイズ
表示させたい画像のサイズに書き換えます。画像の元サイズから自動で縮小表示されます。
3. CSSを「PC用商品説明文」に貼り付ける
作成したCSSを、画像を表示させたい商品の「PC用商品説明文」に貼り付けます(※PC用販売説明文を使っても構いません)。これで完成ー!
各商品1つ1つによって、CSSを作りなおして貼り替える必要があるので注意です!「ヘッダー」とかに貼ってしまうと、全商品の項目選択肢に同じ画像が出ちゃいます。。
それと、カテゴリページを利用して、1ページに複数「買い物かごに入れる」ボタンを出している商品も注意です。1部商品の「PC用商品説明文」にCSSを貼り付けると、同ページの他商品にも画像が適用されてしまいます。
画像はあった方が良いの?

「ここまで労力かけてまで画像を出すメリットはあるの?」というところ。私としては、「商品によってはメリットがある」と思っています。画像を出すのは「お客様が商品を選択しやすくして、お買い物の負担や誤りを減らすこと」が目的です。そのため、
- カラーバリエーション、模様などの選択肢が多い商品
- オレンジと赤、など判別が難しいカラーがある商品
など、欲しい商品の選択がややこしいものについては充分メリットがあると思います。
私はよく「ネイル」をネットで買いますが、欲しいカラーは何番の色を選べばいいのかややこしくて、、間違えずに買うのに結構気を遣います。。選択肢と一緒に画像が表示されてると、心地よく買い物できることは間違いないですね。

コメント
12 件のコメント
長山といいます。
もしかしたら、同内容のコメントが何通か行ってるかもしれません。
当店扱い商材で40品程の中から選んで頂く商品があるのですが、
※マグネットアクセサリーで40程から選んで頂く商品になります。
この数だとフルバージョンの方法でないと無理でしょうか。今日会員登録しました。
cssだと縦に40品目までは可能になりますでしょうか
コメントで
それと、カテゴリページを利用して、1ページに複数「買い物かごに入れる」ボタンを出している商品も注意です。
とありますが、複数「買い物カゴに入れる」の表示は可能なんでしょうか
A商材とB商材とを合わせて購入してほしい場合、A商品ページにB商品へのクリックしてもらい
買い物カゴに入れてもらう方法しかないと思ってましたので。。
楽天サポートにも聞きましたが、その方法しかないんです。と言われて探してみましたが
わからなかったので。
長々と書きましたが、ご連絡頂けますとありがたいです
長山様
いつもお世話になります、オーガランドの中村です。
ご質問頂きありがとうございます!
> 当店扱い商材で40品程の中から選んで頂く商品があるのですが、
まずこちらなのですが…
「項目選択肢別在庫設定」自体が、最大20個までのご登録となります。
(40個選択肢がある場合は、商品データを分ける必要があるかと存じます。)
フルバージョン限定の方法以外の方法でも、
20個までであれば画像を表示させる事は可能にございます。
> 複数「買い物カゴに入れる」の表示は可能なんでしょうか
RMS内のカテゴリページ設定にて可能なはずです!
「1ページ複数商品形式ページ」という設定だったかと存じます。
楽天さんへご確認くださいませ^^
どうぞ宜しくお願い致します。
「【楽天/RMSにコピペで完了!】カラーやサイズの「選択肢」に一緒に画像を表示させるTips」の「たて軸の選択肢に画像を入れるCSS」が、今日から突然「HTMLタグの記述に誤りがあります」と表示されRMSで使えなくなってしまいました。
この機能を今後の使っていきたいのですが、どのようにしたらよいでしょうか?
泉さま
お世話になります!ご質問いただきありがとうございます^^
RMS内でエラーになってしまうとの事、弊社RMS環境で試してみたのですが大変恐縮ながらエラーを再現できず…!
お手数ですがお手元でご作成されたHTMLを拝見しても宜しいでしょうか。
(コメント欄へそのままベタッとお貼り付け頂いて大丈夫です)
お手数をおかけ致しますが、よろしくお願い致します。
こちらです↓
泉さま
ありがとうございます!HTMLも拝見できました。
調査致しますので少々お待ちくださいませ。
泉さま
お待たせ致しました!
拝見致しましたところ、↓の記述が抜けているようです。
上記でエラーも回避されますでしょうか?
恐れ入りますが、ご確認のほど宜しくお願いいたします。
ありがとうございます。
さきほどは一部だったのですが、全体を張ります↓
商品詳細
名称
コーチ COACH 財布
スポーツ カーフ レザー コンパクト ID ウォレット
サイズ
–本体–
ヨコ:約11cm
タテ:約9cm
–パスケース–
ヨコ:約10cm
タテ:約7cm
仕様
札入れ×2
カードポケット×8
オープンポケット×2
※小銭入れはございません
素材
レザー
カラー
BLK ブラック
MAH マホガニー
CWH ダークサドル
ATL アトランティック
型番
F74991
付属品
–
上記の説明文のタグに問題があるのでしょうか?
はじめして、こんにちは、西尾と申します。
【楽天/RMSにコピペで完了!】カラーやサイズの「選択肢」に一緒に画像を表示させるTips
でスマホページにも選択肢に画像を入れることはできますか?
西尾さま
はじめまして!記事をご参照いただきありがとうございます^^
> スマホページにも選択肢に画像を
こちらなのですが、大変恐縮ながら楽天の場合は実現できないのです涙
楽天市場のスマホページは、記述できるHTMLやCSSソースが非常に制限されてまして、、、
折角お問合せ頂いたのにすいません、、
よろしくお願いします!