スマホページについて

Question

ご質問を失礼いたします。
http://item.rakuten.co.jp/e-zakkamania/21184-1203741/
のスマホページで、右側に固定のお気に入りボタンが設置されているのですが、
設置方法をお教え頂いても宜しいでしょうか。

お手数をおかけしますが宜しくお願い致します。

Answer

※注意：
楽天RMSの、禁止タグを入力できるバグを利用する方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。


ECマスターズの田中です。

いただいた商品ページを確認したところ、
買い物かごボタンの下にある
「お気に入りに追加」「シェアする」「LINEで送る」「ROOMに投稿」
以上４つのボタンの、一番左のお気に入りボタンを、
スタイルシートで強引に固定させていることがわかりました。

こちらの商品ページと同じスタイルシートを利用する方法を
ご案内いたします。
元のスタイルシートと全く同じ内容ですので、
必要に応じて改変をお願いします。

最初に、お気に入りボタンとして表示させる
画像ファイルをご用意いただき、
R-CabinetもしくはGOLDにアップロードしてください。
（こちらの商品ページでは、横４６ピクセル・高さ６５ピクセルの
　画像ファイルを用意しております）

次に、下記の内容をメモ帳に貼り付け、
「画像URL」の部分を実際のURLにご変更いただいた上で
ファイル名の末尾を「.css」にして保存していただき、
GOLD内にアップロードしてください。
===== この下の行から ============
#shareButtons li:first-child {
    border-left: none;
    position: fixed;
    right: 6px;
    z-index: 9999999;
    bottom: 250px;
    background: #f6f6f6;
    width: 46px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 67px;
}
#shareButtons .iconWrap.favoriteIcon > div {
    background: transparent url("お気に入りボタン用画像URL") 0px 0px no-repeat;
    background-position: -1px 0;
    width: 46px;
    height: 65px;
    background-size: contain;
}
#shareButtons li:first-child .text {
    font-size: 10px;
    display: none;
}
===== この上の行まで ============
※お気に入りボタン用画像URLは、実際のURLにご変更ください。

最後に、スマートフォン用共通説明文に
下記のHTMLタグを貼り付けることで、
固定お気に入りボタンを設置することができます。

===== この下の行から ============

===== この上の行まで ============

Answer

有難うございますo(^-^)o