スマホ商品ページにお気に入りボタンを作成したい

Question

http://item.rakuten.co.jp/e-zakkamania/70133-9080599/

こちらのスマホ商品ページのように右側にお気に入りボタンを設定したいのですが、
現在画像のみ準備しただけで設置に悩んでおります。

現在、スマホ商品共通ページにはアイフレームで
GOLDにページを作成したもの（フローティングヘッダーとバナーを並べただけの状態の商品共通ページ）を入れ込んでいます。

お時間頂き誠に恐縮ですが、ご教授をお願いします。

Answer

ECマスターズの田中です。

※楽天RMSの、禁止タグを入力できるバグを利用する方法ですので、
　今後、RMSの改修により、使用できなくなる可能性があります。

最初に、お気に入りボタンとして表示させる
画像ファイルをご用意いただき、
R-CabinetもしくはGOLDにアップロードしてください。

次に、下記の内容をメモ帳に貼り付け、
ファイル名の末尾を「.css」にして保存していただき、
GOLD内にアップロードしてください。

===== この下の行から ================
#spFixedBookmark {
display: block;
position: fixed;
top: 画面上端からの距離px;
right: 画面右端からの距離px;
width: お気に入りボタン画像の表示横幅px;
height: お気に入りボタン画像の表示縦幅px;
z-index: 100000;
background: url(お気に入りボタン用画像URL) no-repeat center 0;
text-indent: -100%;
overflow: hidden;
background-size: contain;
}
===== この上の行まで ================
※画面上（右）端からの距離、お気に入りボタン画像の表示横（縦）幅は、
　実際の半角数字にご変更ください。
※topをbottomに変更することで下端から、
　rightをleftに変更することで左端からの距離で
　位置を指定することができます。
※お気に入りボタン用画像URLは、実際のURLにご変更ください。

続いて、下記の内容をメモ帳に貼り付け、
ファイル名の末尾を「.js」にして保存していただき、
GOLD内にアップロードしてください。

===== この下の行から ================
jQuery(function($){
  $('#spFixedBookmark').attr('href',
    'https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=ショップID&panf=0&tax=0&postage=0&itype=1&svid=101&iid=' + $('input[name=item_id]').eq(0).val()
  );
});
===== この上の行まで ================
※ショップIDの部分は、ショップ内検索のURLに含まれる６桁の数字、
　またはRAC番号の上６桁にご変更ください。

最後に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
お気に入りボタンを設置することができます。

===== この下の行から ================


　
===== この上の行まで ================
※外部CSSファイルのURL、外部JSファイルのURLは、実際のURLにご変更ください。

Answer

ありがとうございます。
おかげ様で無事設置することができました。
位置の変化で様々なことに応用できそうなので、また別に挑戦してみます。