こんにちは、朝方の血圧が低すぎて、朝から死にたくなります。オガリア中村です。
不定期どころかいっそ徹底して記事をアップしなかったこの間、ささっと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年は東京オリンピック！

最強のチラリズムボタン

いっそお買物かごボタンを隠してしまいましょう。
隠されているからこそ、その先に何があるのか気になってしまう・・・。人間の心理をたくみに利用しているボタンです。

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

関連記事

【コピペで完了】楽天GOLDで作るスマフォページに「検索窓」を設置する方法 【ネットショップで使えるCSSコピペ】左側にスクロール追従バナーを複数設置する方法 楽天の検索フォーム設置時、デフォルトを「在庫有り」検索にする方法 【ネットショップ出店ビギナー必見！】お買物かご付近のスペック表テンプレート３デザイン