【楽天スーパー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商品ずつ処理できるから、大量の商品画像も一気に作れますよ！

　

イメージデコを使ってみる！(ogaRia契約店舗様限定)