楽天のラベル

Question

スーパーセール対象　というラベルを　画像を作り直さずにラベルを貼る　ことが出来る案内があります。
ヘッダー・フッター・レフトナビまたは共通説明文（大）
にこれからご案内するCSSをコピーして貼り付けていただくことで
指定の場所にラベルをつけることができます。とありますが
画像を作って貼る場合どこに貼り付ければいいか分からないので教えて下さい。

Accepted Answer

ECマスターズの伊藤です。

>画像を作って貼る場合どこに貼り付ければいいか分からないので教えて下さい。

デザインレシピ「スーパーSALE対策！PCページの商品画像にラベルをつける」
https://club.ec-masters.net/index.php?design_page15
こちらのテキストの代わりに画像を使用したい、ということでお間違いないでしょうか。

上記ページ内で提供しておりますCSSの

＝＝＝＝＝＝＝
{
content: "スーパーSALE対象"; /*ラベル内の文言*/
color: #fff;
background: #bf0000;
font-size: 10px;
font-family: メイリオ;
letter-spacing: 0;
display: inline-block;
padding: 2px;
position: absolute;
top: 0;
left: 0;
}
＝＝＝＝＝＝＝

を下記に修正をお願いいたします。

＝＝＝＝＝＝＝
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(画像URL);
  width: 画像幅px;
  height: 画像高さpx;
}
＝＝＝＝＝＝＝
※画像URL、画像幅、画像高さの３箇所の修正をお願いいたします。

例[2：カテゴリ一覧の商品画像にラベルをつける]の場合は、下記の通りとなります。
＝＝＝＝＝＝＝
div#risFil table tr:nth-child(odd) a:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background: url(https://wwww.sample.jpg);
  width: 50px;
  height: 50px;
}
＝＝＝＝＝＝＝

うまく表示されないなど、ご不明な点がございましたら、ご相談くださいませ。

Answer

上手く表示されません。
ちなみにPCページの商品画像にラベルをつけるですがスマホに同じようなことはできないんですか？

Answer

すみません。
大丈夫でした！
スマホページにも反映するやりかたあったら教えてください。

Answer

ECマスターズの伊藤です。


PC版でうまく表示されたようで安心致しました。

> スマホページにも反映するやりかたあったら教えてください。
スマホページで表示させる方法ですが、下記の通り、修正をお願いいたします。

なお、下記の方法は、楽天のバグを利用しているため、楽天の仕様変更により、表示ができなくなる場合や、レイアウトが崩れる可能性がございますので、あらかじめご了承ください。


■カテゴリページ
商品一覧に表示
----
店舗設定 ＞ デザイン設定 ＞ スマートフォン デザイン設定 → カテゴリページ設定 → カテゴリページ共通パーツ設定
カテゴリページ共通説明文
----
＝＝＝＝＝



＝＝＝＝＝＝

■商品詳細ページ
商品画像1枚目に表示
----
店舗設定 ＞ デザイン設定 ＞ スマートフォン デザイン設定 → 商品ページ設定 → 商品ページ共通パーツ設定
商品ページ共通説明文
----
に以下のCSSを追加。
＝＝＝＝＝＝

  

＝＝＝＝＝＝