「お買物かごボタン」を画像に差替える方法 (楽天ショップ版)

楽天ショップの「お買物かごボタン」を画像に差替える方法

こんにちは、朝方の血圧が低すぎて、朝から死にたくなります。オガリア中村です。
不定期どころかいっそ徹底して記事をアップしなかったこの間、ささっと28歳になりました。母からの誕生日プレゼントは渋谷ギャルがつけてそうなジャラジャラピアスでした。お母さん、娘は戸惑っています。

本日はリクエストも多かった、楽天ショップの「お買物かごに入れる」ボタンを画像に差替える方法を投稿します。(Yahoo!ストアは方法が分からず、、、ゴメンナサイ)

まずはお買い物かごボタンの画像を用意しましょう

既存の『お買い物かに入れる』ボタンと差替える、ボタン画像を用意しましょう。
推奨サイズは【幅240px、縦50px】。
ボタン色で一番目立つのは赤ですが、警告色の為良い印象を与えない可能性もあります。赤が妙に浮いてしまう場合は、青をオススメします。

※サンプル画像
楽天ショップの「お買物かごボタン」を画像に差替える方法

先ほどの画像をR-Cabinetに登録します

作成したボタン画像は、RMSのR−Cabinetの中に登録します。登録できると画像のURLが生成されるので、これをコピーします。
楽天ショップの「お買物かごボタン」を画像に差替える方法

CSSを用意します

以下が、お買物かごを画像に差替えるCSSです。

・CSS内の『画像URL(赤字の部分)』をR-CabinetのURLに書き換えます。
・幅と高さを、画像と揃えます。

<style type="text/css">
  <!--
        #rakutenLimitedId_aroundCart input[value="買い物かごに入れる"] {
        background: url("http://image.rakuten.co.jp/ogaria/cabinet/btn.jpg") left top no-repeat;
        width: 240px; /*幅*/
        height: 50px; /*高さ*/
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        border: none;
        padding: 0;
        margin-top: 5px 0;
        cursor: pointer;
        }
  -->
</style>

CSSを”全ページ共通説明文(大)”に貼り付けます。

  1. RMSメインメニュー > 1-2 デザイン設定 > 全ページ共通説明文(大)に入ります
  2. 『自動選択』と書かれているテンプレートの、【編集】リンクをクリックします。
  3. “全ページ共通説明文(大)”編集枠内に、先ほどのCSSを貼り付けます。

以上で完了です!

ボタン画像サンプル

汎用性が高そうなボタンデザインを制作してみました。
保存の上、お好きにご利用ください。

 

お・か・い・あ・げボタン

楽天ショップの「お買物かごボタン」を画像に差替える方法
2020年は東京オリンピック!

 

最強のチラリズムボタン

楽天ショップの「お買物かごボタン」を画像に差替える方法
いっそお買物かごボタンを隠してしまいましょう。
隠されているからこそ、その先に何があるのか気になってしまう・・・。人間の心理をたくみに利用しているボタンです。

 

以上、オガリア中村でした。

    • Okei
    • 2015 5/20 4:00pm

    いつも参考にさせていただいています☆
    さっそく試してみました。

    Chromeでは表示できたのですが、firefoxではダメでした~。
    この画像が出てしまいます。
    http://image.rakuten.co.jp/com/img/rms/storefront/pc/page/btn01_212x68.gif

    うむむ。

      • ogaria
      • 2015 6/12 6:27pm

      Okei様

      コメントありがとう御座います!久々の更新、早速チェック頂き大変恐縮です、、
       
      Firefoxで表示されないとの事、ご報告ありがとうございます!
      検証してみたいのですが、私の手元で再現が出来ず><
       
      もし差し支え御座いませんでしたら、私のメールアドレス(ogaria@ogaland.com)まで該当ページのURLをご教示頂けましたら、大変幸いです!
      調査の上回答させて頂きます。

      うむむ。

    • しょぼしょぼ店長
    • 2015 5/21 3:34pm

    日中のこの時間にこちらにお邪魔できる余裕が嬉しくもあり悲しくもあります。
    ナイスなボタン、ありがたく使わせていただきます。
    あ、最強のチラリズムボタンは、また次回ということで(笑)

      • ogaria
      • 2015 6/12 6:30pm

      しょぼしょ、、、否、シャキシャキ店長様

       
      悲しい事なんてありません!!
      3時くらい、肩の力を抜いて一呼吸休憩してくださいね(^^)
       
      チラリズムボタン、著作権絶賛フリーですのでお好きにご活用くださいませ。。

    • まあ
    • 2015 5/26 1:50pm

    はじめまして。

    先ほど、記載通り編集しましたが、ボタンの画像が実際の商品ページに現れません。
    どのようにすればよろしいでしょうか。

      • ogaria
      • 2015 6/12 6:33pm

      まあ様

      はじめまして!お読み頂きありがとうございます。
      ボタンの画像が商品ページに現れないとの事、もしかすると「買い物かごに入れる」ボタンの文言が原因かもしれません。

      御社のお買物かごボタン文言が「買い物かごに入れる」と異なる場合には、CSS内にある該当記述を御社文言にお書き換えください。

      例)ボタンの文言が「買物かごへイン!」の場合↓
      #rakutenLimitedId_aroundCart input[value="買物かごへイン!"] {

      もし解消されない際には、ogaria@ogaland.comまでお問合せくださいませー!

    • juk
    • 2015 9/14 5:13pm

    はじめまして、よろしくお願い致します。

    私も先ほど、記載通り編集しましたが、ボタンの画像が実際の商品ページに現れません。
    上記に書かれたとおり、ボタンの文言も合致しております。

    • oh
    • 2016 1/15 10:46am

    はじめまして、時節にいつもお世話になってます。
    ありがとうございます。

    私も以前に実装させていただいた時は表示されていたボタンが
    本日確認したところ、通常のボタンに変わってました。

    何か仕様が変わったのでしょうか?

  1. トラックバックはまだありません。