楽天市場の項目選択肢在庫設定に商品写真を入れる方法

Question

お世話になります、IGARASHI欧風フラワーギフト五十嵐です。
項目選択肢在庫設定に商品画像が入っている店舗さんがいらっしゃいますがどうやっていれることができるのでしょうか？
ご教授いただければと思います。###HR######IMG0410be0d16ee3181840af9c6207318480.jpegIMG0###

Accepted Answer

ECマスターズの田中です。

＞CSSが読めないので配置の仕方などの置き換え方を教えていただけますか？

CSSファイルの47行目、つまり
「.itemSelectPopUp dd:before」に対する規則までが
全項目選択肢別在庫共通の部分で、
49行目以降の規則を増やしていく形になりますが、

CSSファイルどおりの設定ですと、
縦軸ごとに同じ画像を表示させることになりますので、
項目選択肢別在庫１つずつ別の画像を表示させる場合は、
下記の法則で追加をお願いします。
（「何番目」の法則が、前回と異なり、数字通りとなりますのでご注意ください）

= この下の行から ====================
.itemSelectPopUp dl:nth-of-type(縦軸の上から何番目) dd:nth-of-type(横軸の上から何番目):before {
	background-image: url("画像URL");
}
= この上の行まで ====================
※縦軸の上から何番目、横軸の上から何番目は、半角数字に置き換えてご利用ください。
※画像URLは、実際のURLに置き換えてご利用ください。

たとえば、いただいた商品ページの場合、
４９行目以降を、下記のようにご記載いただく形になります。

= この下の行から ====================
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(1):before {
	background-image: url("Mix/白箱の画像URL");
}
.itemSelectPopUp dl:nth-of-type(1) dd:nth-of-type(2):before {
	background-image: url("Mix/ピンク箱の画像URL");
}
.itemSelectPopUp dl:nth-of-type(2) dd:nth-of-type(1):before {
	background-image: url("Red/白箱の画像URL");
}

/* 中略 */

.itemSelectPopUp dl:nth-of-type(17) dd:nth-of-type(2):before {
	background-image: url("Xmas/ピンク箱の画像URL");
}
= この上の行まで ====================

Answer

ECマスターズの田中です。

＞項目選択肢在庫設定に商品画像が入っている店舗さんがいらっしゃいますがどうやっていれることができるのでしょうか？

ご覧になられた店舗の方法とは異なる可能性がございますが、
下記のようなスタイルシートを利用することで可能となります。

PC用販売説明文などに記載したタグとタグの間に、
下記、各選択肢共通の規則１つを加えていただいた後に、

= この下の行から ====================
.floating-cart-sku-table tr .inventory:before {
    content: " ";
    display: block;
    width: 画像の高さpx;
    height: 画像の横幅px;
}
= この上の行まで ====================
※画像の高さ、画像の横幅は、半角数字に置き換えてご利用ください。

項目選択肢別在庫の選択肢１つにつき１つずつ
下記規則を加えていただく形になります。

= この下の行から ====================
.floating-cart-sku-table tr:nth-of-type(上から何番目) .inventory:nth-of-type(左から何番目):before {
    background: url(画像URL) no-repeat;
}
= この上の行まで ====================
※上から何番目、左から何番目は、半角数字に置き換えてご利用ください。
なお、各数字は２から始まります。
つまり、いただいたスクリーンショットにて、Pink/花束に画像を設定する場合は
上から何番目は4、左から何番目は3をご記入ください。
※画像URLは、実際のURLに置き換えてご利用ください。

画像ファイルの表示サイズを調整される際は、
下記URLにて返答しております、楽天の縮小機能をご利用いただくと便利です。
https://forum.ec-masters.net/post_view.php?id=5922

Answer

田中さん、ご返答ありがとうございます。
＞項目選択肢別在庫の選択肢１つにつき１つずつ
下記規則を加えていただく形になります。
が、ちょっとわからないのですが添付の写真のやり方ではないですか？

また
＞PC用販売説明文などに記載したタグとタグの間に、
下記、各選択肢共通の規則１つを加えていただいた後に、
はヘッダー・フッター・レフトナビのテンプレート設定に記入しましたがそれでも反映されるでしょうか？###HR######IMG0898190bda028617a8a74d5affe2a57fb.jpegIMG0######BR###

Answer

ECマスターズの田中です。

＞添付の写真のやり方ではないですか？

いいえ、項目選択肢別在庫の画像欄は使いません。
この欄は、各項目選択肢別在庫ごとの商品画像を
設定する画面ではございますが、
ここに設定しても商品ページには表示されないため、
別の仕組み、つまりスタイルシートで表示させる必要があります。

＞ヘッダー・フッター・レフトナビのテンプレート設定に記入しましたがそれでも反映されるでしょうか？

その場合、同じヘッダー・フッター・レフトナビを設定している
全商品に、全く同じ画像が表示されてしまいますので、
ヘッダー・フッター・レフトナビへの記入はしないようお願いします。

改めて、順を追ってご案内いたします。

手始めに、
項目選択肢別在庫に画像を表示させたい商品を
１つ選んでください。

その商品のPC用販売説明文の先頭に、
下記のタグを挿入してください。

= この下の行から ====================

.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 画像の高さpx;
height: 画像の横幅px;
}

= この上の行まで ====================
※画像の高さ、画像の横幅は、半角数字に置き換えてご利用ください。

さらに、上記タグの } と  の間に規則を加えてください。
たとえば、いただいたスクリーンショットの商品の場合、
先程のタグが、最終的に下記のような内容になります。

= この下の行から ====================

.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 画像の高さpx;
height: 画像の横幅px;
}

.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background: url(「Mix/アレンジ」用の画像URL) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(3):before {
background: url(「Mix/花束」用の画像URL) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(3) .inventory:nth-of-type(2):before {
background: url(「Red/アレンジ」用の画像URL) no-repeat;
}

/* （中略） */

.floating-cart-sku-table tr:nth-of-type(5) .inventory:nth-of-type(3):before {
background: url(「Apricot/花束」用の画像URL) no-repeat;
}


= この上の行まで ====================

この状態で、狙った通りに表示されることをご確認いただいた後、
同じ要領で、他の商品にもタグを追加していただく、という流れになります。

Answer

できました、かなりいい感じになりました、ありがとうございます。

ちなみにスマホにも同じようなことはできるのでしょうか？
また、項目選択肢在庫に画像を入れても表示されないとありましたがあそこは何に使うのでしょうか？
ここについてもご教授いただければと思います。

Answer

ECマスターズの田中です。

＞スマホにも同じようなことはできるのでしょうか？

はい、可能です。
以前、フォーラムにて回答しておりますので、
下記URLよりご参照ください。
https://forum.ec-masters.net/post_view.php?id=6097

＞項目選択肢在庫に画像を入れても表示されないとありましたがあそこは何に使うのでしょうか？

本来は、
http://rd.rakuten.co.jp/rn/support_n/1506/18/32020302/?shops-2
上記サポートニュースの通り、
カラーによる絞込検索を行った時に表示される予定ではあるのですが、

楽天内検索の動作を確認したところ、
カラーで絞り込んでも表示されていないことがわかりましたので、
現時点では特に使われていない状態のようです。

Answer

スマホのCSSを確認しました。
CSSが読めないので配置の仕方などの置き換え方を教えていただけますか？
ちなみに変更しようとしているものは下記urlとなります。
https://item.rakuten.co.jp/flower-fruit-igarashi/box-arrange01

Answer

横から失礼します。こちらをみて、当店も組み込んでみたのですが
うまくいきません・・
https://item.rakuten.co.jp/dreamhats/r15011007/
おそらく画像サイズが合っていないので、ほかの質問で画像サイズ変換コードを使って
やってみましたが、やはりうまくいきませんでした。。

とりあえずこのコードが入っております。
= この下の行から ====================

.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 80px;
height: 80px;
}

.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background: url(https://thumbnail.image.rakuten.co.jp/@0_mall/dreamhats/cabinet/folder/item/2018ss/r15011007/beigemix_black.jpg?_ex=80x80) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(3):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beigemix_navy.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(3) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beigemix_ivory.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(4) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beige_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(5) .inventory:nth-of-type(3):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beige_ivory.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(6) .inventory:nth-of-type(3):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/black_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(7) .inventory:nth-of-type(3):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/navy_black.jpg) no-repeat;
}

= この上の行まで ====================

なにが原因でしょうか・・できたらスマホも同じ要領でやっていきたいので
同じ画像で変換コードでサイズを変えていきたいです。

Answer

ECマスターズの田中です。

一番最初にある、
「ベージュミックス×ブラック」の「Mサイズ(57.5cm)」の画像は、
URLに含まれる「/folder」を削除していただくことで
正しいURLになり、表示されるようになります。

他の商品は、変換コードが使われていないことにより
元サイズの画像の、左上の空白部分が表示されておりますので、
上記と同様の法則で、変換コードをご利用いただきますようお願いします。

Answer

今やってみましたが、うまくできませんでした。

floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background: 
ここの部分もあっていますでしょうか。
今はこのコードを入れております。
M/Lサイズで画像を設定するという認識で以下のようにしてあります。


.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 80px;
height: 80px;
}

.floating-cart-sku-table tr:nth-of-type(1) .inventory:nth-of-type(1):before {
background: url(https://thumbnail.image.rakuten.co.jp/@0_mall/dreamhats/cabinet/item/2018ss/r15011007/beigemix_black.jpg?_ex=80x80) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(1) .inventory:nth-of-type(2):before {
background: url(https://thumbnail.image.rakuten.co.jp/@0_mall/dreamhats/cabinet/item/2018ss/r15011007/beigemix_black.jpg?_ex=80x80) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(1):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beigemix_navy.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beigemix_navy.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(3) .inventory:nth-of-type(1):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beigemix_ivory.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(3) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beigemix_ivory.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(4) .inventory:nth-of-type(1):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beige_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(4) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beige_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(5) .inventory:nth-of-type(1):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beige_ivory.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(5) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/beige_ivory.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(6) .inventory:nth-of-type(1):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/black_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(6) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/black_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(7) .inventory:nth-of-type(1):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/navy_black.jpg) no-repeat;
}
.floating-cart-sku-table tr:nth-of-type(7) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/dreamhats/cabinet/item/2018ss/r15011007/navy_black.jpg) no-repeat;
}

Answer

ECマスターズの田中です。

＞floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
＞background: 
＞ここの部分もあっていますでしょうか。

最初にいただいたソースでは正しかったのですが、
今回いただいたソースでは、上から何番目・左から何番目が
1から始まってしまっております。
当質問の最初の返信どおり、各数字は2から始めていただきますようお願いします。

画像URLは、最初の２つは正しくなっておりますので、
各「何番目」の数字を、2から始まるようにご修正いただくことで、
「ベージュミックス×ブラック」は綺麗に表示されます。
再度、お試しいただきますようお願いします。

Answer

無事実装できました！

Answer

お世話様です。

1.　項目選択肢在庫での画像表示では縦横２から設定と言う事ですが
左から1番目のみに表示することはできないのでしょうか？

2.　下記の設定で間違いないでしょうか？
https://item.rakuten.co.jp/rasbery-house/613414/
での表示が上手くできません。


.floating-cart-sku-table tr .inventory:before {
content: " ";
display: block;
width: 100px;
height: 66px;
}


.floating-cart-sku-table tr:nth-of-type(2) .inventory:nth-of-type(2):before {
background: url(https://image.rakuten.co.jp/rasbery-house/cabinet/06338408/gray-color.jpg?_ex=100x100
) no-repeat;
}


よろしくお願いします。

Answer

ECマスターズの田中です。

他質問への回答を誤って返信してしまい、
失礼いたしました。
誤った返信は削除させていただきました。
後ほど改めて回答いたしますので、今しばらくお待ちいただきますようお願いします。

Answer

ECマスターズの田中です。

（2/3 11:00 HTMLタグ修正）

> 2.　下記の設定で間違いないでしょうか？

私の環境では表示されておりますが、
nobiさんの環境ではうまく表示されておりませんでしょうか。

その場合は、画像URLの末尾に入れている改行が
URLの一部として誤認識され、
画像の表示ができていない可能性がございますので、
URL末尾の改行を消して、
(と)で囲まれた状態にしていただきますようお願いします。

> 左から1番目のみに表示することはできないのでしょうか？

縦軸の名前の部分に表示させたいということですね。
その場合は、ソースに変更を加える必要がございます。
PC用販売説明文の先頭に、下記タグを挿入してください。

= この下の行から ====================

.floating-cart-sku-table tr:nth-of-type(n+2) td.inventory_choice_name:before {
content: " ";
display: block;
width: 画像の高さpx;
height: 画像の横幅px;
background-repeat: no-repeat;
background-size: contain;
}

= この上の行まで ====================
※画像の高さ、画像の横幅は、半角数字に置き換えてご利用ください。

さらに、上記タグの } と  の間に、
下記のように規則を加えてください。

= この下の行から ====================
.floating-cart-sku-table tr:nth-of-type(縦軸の上から何行目) td.inventory_choice_name:before {
background-image: url(画像URL);
}
= この上の行まで ====================
※縦軸の上から何行目は、半角数字に置き換えてご利用ください。
※画像URLは、実際のURLに置き換えてご利用ください。

たとえば、いただいた商品ページの場合、
先程のタグが、最終的に下記のような内容になります。

= この下の行から ====================

.floating-cart-sku-table tr:nth-of-type(n+2) td.inventory_choice_name:before {
content: " ";
display: block;
width: 画像の高さpx;
height: 画像の横幅px;
background-repeat: no-repeat;
background-size: contain;
}

.floating-cart-sku-table tr:nth-of-type(2) td.inventory_choice_name:before {
background-image: url(「グレイ(フリンジ付)」用の画像URL);
}
.floating-cart-sku-table tr:nth-of-type(3) td.inventory_choice_name:before {
background-image: url(「ベージュ(フリンジ付)」用の画像URL);
}
.floating-cart-sku-table tr:nth-of-type(4) td.inventory_choice_name:before {
background-image: url(「ネイビー(フリンジ付)」用の画像URL);
}

/* （以下、繰り返し） */


= この上の行まで ====================

縦軸の名前は2行目から記載が始まるため、
数字も「2」から始まりますことを、予めお含みおき願います。

Answer

ECマスターズ田中様
お世話様です。
ご指示通りにやってみましたが
画像の一部のみの表示で全体が表示されません。
画像の縮小ではなく一部をカットして表示しているように見えます。

よろしくお願いいたします。###HR######IMG0ecc763a3947bf47d28c75a7853aa7d31.jpegIMG0######BR###

Answer

ECマスターズの田中です。

https://item.rakuten.co.jp/rasbery-house/613414/
を拝見したところ、
横幅100px・高さ66pxの表示枠に対して、
横幅375px・高さ250pxの画像が設定されており、
結果として、左上部分だけが表示されておりました。

大きいサイズの画像でも枠に合わせて縮小されるよう、
先の返信のソースを修正いたしましたので、
改めて設置をお試しいただきますようお願いします。

Answer

田中さん
完璧です。
有難うございました。