公開日: 更新日:

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

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

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

どうも!ヤマダカイト(@slash_kaito)です。

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

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

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

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

愚痴はこの辺で。

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

この方法は、正規の楽天RMSの使用方法と異なります。

楽天のシステム変更により使用できなくなったり、規約違反になる可能性もありますのでご注意ください。

スマホ追従バナーとは

こういうのです。

追従バナー

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

追従バナーgif

追従します。

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

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

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

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

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

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

くどい!

 

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

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

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

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

保存してUP。

CSS

 

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

rms

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

 

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

rms2ご存知の通り、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でスマホの追従バナーを設置する方法でした。

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

楽天上位店舗・EC業界への転職ならウェブタントがおすすめ

ウェブタントは普通の求人サイトでは出回らないような、ECサイトのwebデザイナー、コーダー、ネットショップ店長などの求人を多数ご用意。

なぜならweb/ECに特化した求人サイトだから。

今なら会員登録で、実践力アップセミナーのお試し無料クーポンや、適性診断(CUBIC)が無料で受けられる特典付き。キャリアアップ相談会も随時開催中!

無料の会員登録はこちらのバナーを今すぐクリック!↓

楽天RMSの攻略法カテゴリの最新記事