- 楽天
- Yahoo!
【楽天スーパーSALE対策】商品一覧の全画像に「スーパーSALE対象」ラベルを自動でつけるTips

りんごジュースって、たまに麦茶みたいなのありませんか?オガリア中村です。
本日は6月17日。という事は、明日18日~は楽天の「スーパーSALE」が開催されます!私は午前中にさくらんぼ狩りに行く予定なので、帰ってきてからSALEに参戦予定です。
スーパーSALE対策の悩み事と言えば、『今買わなきゃ絶対損』『他ショップよりこっちの方が絶対お得』な事をどうやってとことんアピールするか…!が挙がると思います。そこでご提案!楽天ショップページ内のあらゆる「商品画像」に、スーパーSALE用の「ラベル」をつけてみませんか!?
デモ

一覧で並んでいる商品画像の端に、「スーパーSALE対象」とかのひと言をつけ加える事が出来ます(PCのみ)。
▼つけられる場所
・カテゴリページ内の商品一覧
・「この商品を見てる人はこんな商品も…」のレコメント部
・お買い物かごボタン横の商品画像1枚目
破壊力がありそうなキーワードは…
- スーパSALE対象!
(※もちろん全品対象なんですが、あえて書く事でお客様に安心感を与えられるかと。) - ポイント10倍確定!
- ただ今全品送料無料!
とかがオススメです。それでは早速設置方法をご案内しますー!
CSSをコピーする
まずはラベルを貼りたい場所に合わせて、CSSをコピーしましょう!
コピーができたら、CSS内の赤文字(“スーパーSALE対象”の文言)部分を、ラベルとして表示したい文言に変更します。全角8文字以内がオススメ。
カテゴリ一覧の画像にラベルをつけるCSS

<style type="text/css">
<!--
/* カテゴリページ内商品画像にラベルをつける */
div#risFil table tr:nth-child(odd) a {
display: inline-block !important;
position: relative !important;
}
div#risFil table tr:nth-child(odd) a:after {
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;
}
div#risFil .risfClfx a:after {
content: none !important;
}
-->
</style>
レコメンド内商品画像にラベルをつける

<style type="text/css">
<!--
#rakutenLimitedId_inshop_recommend li.pageRecoThumb a {
display: inline-block !important;
position: relative !important;
}
#rakutenLimitedId_inshop_recommend li.pageRecoThumb a:after {
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;
}
-->
</style>
お買い物かごボタン横の商品画像にラベルをつける

<style type="text/css">
<!--
/* 商品画像にラベル */
a.rakutenLimitedId_ImageMain1-3:first-child {
display: inline-block !important;
position: relative !important;
}
a.rakutenLimitedId_ImageMain1-3:first-child:after {
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;
}
-->
</style>
全部まとめたcss
三箇所全部に貼りたい!という方へは、文字数を削減したまとめバージョンをご用意しました(ogaRiaフルバージョンプランご利用店舗様のみ)。
CSSを見に行く(ogaRiaフルバージョンプラン会員様限定)CSSを貼る
用意したCSSを、次のどこかに貼り付けます。全ページに反映される箇所であれば、どこでもOKです。
- RMSメインメニュー > デザイン設定 > ヘッダー・フッター・レフトナビ
- RMSメインメニュー > デザイン設定 > 共通説明文(大)
以上で完了!どうでしょう?ラベル出ました!?
検索結果の画像にもラベルをつけたい!

楽天市場内で商品検索をした際の、商品画像にもラベルをつけたくありませんか?他社商品と画像が並んだ際に、少しでも差別化したいですよね。
だけど…検索結果画面にはCSSを貼る事ができないため、そもそもの「商品画像自体」にラベルをつけて、画像を上書きするしかありません。スーパーSALE前に全商品画像を編集するのって、現実的ではないですよね・・・。
そこで便利なのが「イメージデコ」です!
イメージデコは現在の商品画像を自動で取り込み、ラベル画像を商品画像に重ねた状態で画像を出力し直します。一度に20商品ずつ処理できるから、大量の商品画像も一気に作れますよ!

コメント
2 件のコメント
いつも参考にさせていただいております。
ありがとうございます。
本日、タグを設置してみたのですが、「カテゴリ一覧」にラベルをつけるタグを設置したところ、
カテゴリー一覧ページ下部の、2ページめ、3ぺージめへ飛ぶ数字にまでラベルがついてしまっています。
この数字部分にはラベルをつけないようにしたいのですが、方法はありますか?
お問合せありがとうございます!こちらこそご欄頂きありがとうございます。
ページャーへもラベルがついてしまうとの事、大変失礼致しました…!
解消するため、CSSの内容を修正させて頂きました。お手数ですが、再度CSSをお貼り替え頂けますでしょうか。
解消されない場合はご連絡くださいませ^^