デザインレシピ　商品画像にラベルをつけるについて

Question

ECマスターズ　ご担当者様

デザインレシピ　商品画像にラベルをつけるについて質問です。
こちらのCSSをスマホの商品ページ共通パーツ設定に入れてみました。

今確認したところ
この商品を買った人はこれもの箇所には表示されましたが
カテゴリーページ、商品ページには表示されません。

これはスマホでは使用はできないのでしょうか？
以下商品ページ共通パーツ設定に記載したCSSです。

お忙しい中恐縮ですが、ご回答よろしくお願いします。

サイトURL  https://www.rakuten.co.jp/orlo/




div#risFil table tr:nth-child(odd) a,#allShopsRecommendWidget li.r-slideshow-item a:first-of-type,a.rakutenLimitedId_ImageMain1-3:first-child {
display: inline-block !important;
position: relative !important;
}
div#risFil table tr:nth-child(odd) a:after,#allShopsRecommendWidget li.r-slideshow-item a:first-of-type:after,a.rakutenLimitedId_ImageMain1-3:first-child:after {
content: "ポイント10倍確定！"; /*ラベル内の文言*/
color: #fff;
background: #bf0000;
font-size: 10px;
font-family: メイリオ;
letter-spacing: 0;
display: inline-block;
padding: 2px;
position: absolute;
top: 0;
left: 0;
}
div#risFil .risfClfx a:after {
content: none !important;
}

Accepted Answer

ECマスターズの田中です。

PC用ページとスマートフォン用ページでは、
ページの構造が異なるため、
それに合わせてスタイルシートの記述も変える必要がございます。

１・３つ目の規則を削除し、
２つ目のセレクタを、スマートフォン用ページの商品画像１枚目に適用させた、
下記のタグの記述をお試しいただけますでしょうか。


#itemImageSlider li:first-child .imgWrap:after,#allShopsRecommendWidget li.r-slideshow-item a:first-of-type:after {
content: "ポイント10倍確定！"; /*ラベル内の文言*/
color: #fff;
background: #bf0000;
font-size: 10px;
font-family: メイリオ;
letter-spacing: 0;
display: inline-block;
padding: 2px;
position: absolute;
top: 0;
left: 0;
}

Answer

ECマスターズの清水です。

https://club.ec-masters.net/index.php?design_page15

こちらの記事は、記載の通りPC用となっておりますので、
スマートフォンでの表示は確認できておりません。

休み明けにスマートフォンでも対応可能か確認させていただき、
回答させていただきますね。しばらくお待ちくださいませ。

Answer

ECマスターズ 清水様

お世話になります。

>休み明けにスマートフォンでも対応可能か確認させていただき、
>回答させていただきますね。しばらくお待ちくださいませ。

了解致しました。
お返事お待ちしております。

Answer

ECマスターズ　田中様

ご回答ありがとうございます。
さっそく試してみました！

商品ページ
商品写真１枚目に反映されました！

カテゴリーページには反映されませんでしたが
スマホなので仕方がないのでしょうか？

以上ご確認宜しくお願い致します。
お返事お待ちしております。

Answer

ECマスターズの田中です。

カテゴリページの場合、
個別のスマートフォン用カテゴリ説明文には記載できず、
カテゴリページ共通説明文にのみ記載可能となっているため、
ショップ内の全商品に対して表示が行われますことを
予めお含みおきください。

先程ご案内差し上げた、商品ページ用のソースにある
#itemImageSlider li:first-child .imgWrap:after,#allShopsRecommendWidget li.r-slideshow-item a:first-of-type:after
を
.sCSLBox01 .inLeft:after,.sCSLBox02 .inLeft:after
に修正して、
カテゴリページ共通説明文にご記載いただきますようお願いします。

Answer

ECマスターズ　田中様

ご回答ありがとうございます。

＞ショップ内の全商品に対して表示が行われますことを
＞予めお含みおきください。

了解致しました。
全てに適用されるんですね。

とりあえず、現状は商品ページ1枚目
この商品を買った人はこれも

上記2箇所の表示で試してみます。

ありがとうございます！

デザインレシピ 商品画像にラベルをつけるについて

デザインレシピ　商品画像にラベルをつけるについて