【楽天】「レビューを見る」「レビューを書く」をオリジナル画像にするTips

こんにちは。刈り上げたいオガリア中村です。ただただ、どこかしらを「刈り上げたい」。この欲求が半年に一度くらいの波で訪れます。ブリトニー・スピアーズも同じ気持ちだったんだ。

本日は、買い物かご下に必ずつく、「レビューを見る」「レビューを書く」リンクをオリジナルの画像に差し替える方法についてご案内しますー！

デモ

こんな感じに。

特に「レビューを見る」リンクは、購入前のお客様が利用される頻度が高いリンクです。『生のお声をご参考ください！』や『ご愛購ありがとうございます♪』など、お客様に対してのひと言メッセージをオリジナル画像に入れておくと、より”接客”できるショップへと印象が高まると思いますー！

設定手順

1. オリジナル画像をつくる

まずは「レビューを書く」「レビューを見る」リンクの代わりに表示する、オリジナル画像を作りましょう！以下の「普通」サイズで作れば、丁度「商品をかごに追加」ボタンの幅と同じ大きさになります。

【推奨サイズ】
　・普通サイズ：幅210px × 縦40px
　・大きいサイズ：幅430px × 縦40px

ボタンの色は、赤以外の色をオススメします。(最も目立たせるべき「商品をかごに追加」ボタンと色が被ってしまうためです。)

2. オリジナル画像をR-Cabinetにアップする

作成した画像は、RMS内の「R-Cabinet」に追加しましょう！追加すると、自動で画像にURLがふられます。そのURLを次の手順で使います。

3. CSSテンプレートを貼り付ける

以下のCSSを全てコピーし、全商品ページに共通表示される箇所(ヘッダーや全ページ共通説明文)へ貼り付けます。赤文字になっている「画像URL」の箇所を先ほどR-Cabinetにアップしたオリジナル画像のURLに差し替えましょう。

<style type="text/css">
<!--

/* 「レビュー見る」のボタンを独自画像に */
#rakutenLimitedId_aroundCart .seeReview {
    border:none!important;
    border-radius:0!important;
    text-indent:-9999px;
    padding:0!important;
    margin:4px 0 0!important;
    display:block;
    min-width: 210px!important;
    min-height: 40px!important;
    background:url('画像URL') no-repeat 0 0!important;
}

/* 「レビューを書く」のリンクを独自画像に */
#rakutenLimitedId_aroundCart #serviceTableSml .review a.write{
    text-indent:-9999px;
    padding:0!important;
    display:block;
    width:210px!important;
    height:40px!important;
    background:url('画像URL') no-repeat 0 0!important;
}

-->
</style>

以上で完了です！上手くいかない場合はコメントでご質問くださいませ～！オガリア中村でした。