【楽天】「買い物かごへジャンプ」ボタンをオリジナル画像に変更する方法

楽天
Yahoo!

【楽天】「買い物かごへジャンプ」ボタンをオリジナル画像に変更する方法

2016/02/17

お気に入りに追加する

この記事は過去に書かれた「ogaRia繁盛レシピ」を再掲載しています。予めご了承くださいませ。

アイキャッチ

こんにちははじめまして！ogaRiaサポートSです。
今回から私Sも現場で使えるノウハウを提供させていただきます！
CSSカスタムや作業効率UPなどコンテンツ構築面でお力になれればと思います！

よろしくお願いしますm(_ _)m

前回ご紹介しました「お買い物かごボタン」を画像に差し替えるテクニックに続きまして、
最近商品ページにフワっと現れる「買い物かごへボタン」をオリジナルの画像にする方法をご案内します！

画像に「全品送料無料」「期間限定価格」などスポット的に画像を
差し替えるなんて使い方もよいですね！

1. まずはオリジナルの「買い物かごへボタン」を作りましょう

もともと表示されるボタンと入れ替えるオリジナルのボタン画像を用意しましょう。

※推奨サイズ
幅～80px
縦～100px

※サンプル画像

　　参考イメージ

2. 用意した画像をR-Cabinetに登録

参考イメージ

作成した画像は、RMSのR−Cabinetの中に登録します。
登録できると画像のURLが生成されるので、これをコピーします。

ワンポイントアドバイス
楽天GOLDをご契約していて背景透過画像を使う場合はGOLDへ画像を保存して使うと透過画像を使うことができます。

3. CSSを「全ページ共通説明文(大)」に貼り付けます

以下が、お買物かごを画像に差替えるCSSです。
前回ご紹介しました「お買い物かごボタン画像化」をチャレンジした方なら簡単ですね！

・CSS内『画像URL(赤字の部分)』を、先ほどコピーしたR-CabinetのURLに書き換えます
・CSS内『表示位置調整(緑字の部分)』を、下、右からどれぐらい隙間を空けるかの
指定です。ともに5pxぐらいがバランスがよく綺麗です。
・CSS内『画像サイズ(青字の部分)』を、幅(width)、高さ(height)を指定します。

<style type="text/css">
<!--
#scrollUp{
border:none!important;
bottom:5px;
right:5px;
}
#scrollUp img{
display:none;
}
#scrollUp .nearCart{
background:url(http://image.rakuten.co.jp/ogaria/cabinet/btn.jpg) no-repeat 0 0;
}
#scrollUp,#scrollUp .nearCart{
width: 60px !important;
height: 60px !important;
}
-->
</style>

その後CSSをコピーし、RMSの「全ページ共通説明文(大)」に貼り付けます。