コピペでOK!楽天RMSでスマホ追従バナーを設定する方法

楽天RMSの謎の仕様にイライラしがちなデザイナーの皆様どうも。

どうも！ヤマダカイト（@slash_kaito）です。

さて、難解なRMSの仕様ですが、その中でもさらに複雑なのがスマホ版です。

レスポンシブじゃないのもアレですが、さらにわかりにくい。

仕様の追加に次ぐ追加でこうなったんでしょうね。その様相は、まるで複雑怪奇な迷宮、ハウルの動く城状態。

ハウルの動く城 [DVD]

posted with カエレバ

宮崎駿 ブエナ・ビスタ・ホーム・エンターテイメント 2005-11-16

Amazonで調べる

楽天市場で調べる

入り口から入ったら出口もないし、入り口もなくなっているという。

愚痴はこの辺で。

今回はスマホの追従バナーのお話です。

スマホ追従バナーとは

こういうのです。

スクロールすると、、、、

追従します。

キャンペーンやクーポンなどのおトクなサービスで「絶対にクリックさせて、購入の最後の一押しにしてやるぜ！」的なものを入れることが多いです。

特にネットショップにおいて、スマホは入り口と出口を分けるといいらしいです。

その方が「あっ、この商品気になるかも」「あっちも」「こっちも」とついで買いをしてくれるから。

あとは純粋に商品や店舗とのとのタッチポイントが増えることで、それだけ購入に対するハードルが下がります。

来た客を、ネットショップという名の迷宮に迷い込ませるわけです。

入り口と出口が異なる様相は、まるでハウルの動く城。

くどい！

そんなわけで、ここから本題。

スマホ追従バナーの設置方法

やり方は簡単。コピペで大丈夫です。※楽天GOLDの契約が必要です。

①　ftp上の任意の場所に(cssフォルダなど)に下記のCSSを記述。

保存してUP。

CSS

②　RMSの「1-2 デザイン設定＞スマートフォンデザイン設定の商品ページ共通パーツ設定」を選択。

カテゴリページに入れたい場合は「カテゴリページ 共通パーツ設定」を選択。

③商品ページ共通説明文に下記のHTMLを記述。

ご存知の通り、divタグやcssの記述は裏技を使わないといけないので、>の前に「 =”” =””」を追記。

HTML

③　以上！

カンタンですね。

解説&補足

ざっくり解説していきます。

画像のシャドーを外す場合

立体感を出すためにシャドーをつけたりしていますが、必要なければ box-shadow: 0px 0px 20px -5px rgba(0, 0, 0, 0.8);を削除しちゃってください。

png画像がオススメ！

透過させたpng画像であれば、丸や三角など自由な形にできます。丸いいですよね。ボタンっぽいほうが押してもらえそう。

位置の変更も自由自在！

CSS内のtopとleftを変えれば、お好きな場所に設置できます。

下や右下などは、お買い物かごなどの楽天フォーマットの画像があるので、避けた方が無難です。

重なって画像が隠れちゃったりすると、規約違反で注意されます。気をつけましょう。

cssでz-index:-1;とかを指定してあげると、要素が後ろに回り込むのでいい感じになるかと。

本日のまとめ

以上、楽天RMSでスマホの追従バナーを設置する方法でした。

これを応用すれば、全ページ共通のグローバルナビなんかも設定できますので、ぜひお試しください。

ヤマダ

この記事が役に立ったら、シェアorはてブしてくれるとメッチャ喜びます！