[楽天RMS]スマホページ「お気に入り登録ボタン」カスタマイズ裏技

今回も楽天ECサイト運営者必見です。前回の記事で紹介したCSSとiframeと使えるバグを使って、スマホの各商品ページについてる「お気に入り登録ボタン」のカスタマイズ方法をご紹介したいと思います。スマホ商品ページの右側に固定で表示されるタブバナーの作り方になります。

■前回記事
楽天RMSのスマホデザインをカスタマイズ！CSSとiframeが使える裏技

ほぼコピペで簡単に使えるので、ぜひ活用してみて下さい。

まずはRMSの管理画面から以下のように進んでください。
スマートフォン デザイン設定 ＞ 商品ページ設定の「商品ページ 共通パーツ設定」
商品ページ設定（スマートフォン）のページまで移ったら「商品ページ共通説明文」に下記タグを入れて下さい。

HTML

<link rel="stylesheet" 　　　　　　　　　　　　　　="" href="http://www.rakuten.ne.jp/gold/店舗URL/○○○○.css">


<img 　　　　　　　　　　　　　　　　　　="" style="display:none;" src="" onerror="window.onload = function() {
item_id = document.forms['itemInqForm'].elements['item_id'].value;
target1 = document.getElementById('●●●●');
target1.innerHTML = '<a href=https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=店舗ID&panf=0&tax=0&postage=0&itype=1&svid=101&iid=' + item_id + '><img src=画像URL></a　　　　　　　　　　　　　>';
};"><!-- -->

<div　　　　　　　　 style="text-align:center" id="●●●●"></div　　　　　　>

 
店舗IDの確認方法は、商品登録・更新 ＞ 商品一覧 ＞ 商品編集 ＞ 商品登録情報 ＞ RAC番号

RAC番号の左側数字です。
「○○○○○○（店舗ID）- ○○○○○○○（商品ID）」

「●●●●」は共通のIDを設定してください。

次に上記で設定したCSS内に下記のCSSを記述して下さい。

CSS

#任意のID {
    position: fixed !important;
    bottom: 140px !important;
    right: 6px !important;
    background-color: #cc0000 !important;
    text-align: center !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 900001 !important;
    border-radius: 3px !important;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7) !important;
}

#任意のID > a {
    opacity: 1 !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    z-index: 900001 !important;
}

#任意のID > a > img {
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
    position: relative !important;
    top: 10px !important;
    z-index: 900002 !important;
}

設定は以上になります。
あとは、CSSでデザインを変更すればオリジナルのお気に入りボタン登録の設置完了です！
ぜひ自分好みのデザインへカスタマイズを。

参考ページ

今回参考にさせていただいたページになります。

	ソファー ソファ カウチソファ 3人掛け 高級ソファー l字ソファー ローソファ コーナーソファ 応接ソファー 応接セット sofa bed cover