売れる!通販デザイン

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

スマホでOK!

楽天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でスマホの追従バナーを設置する方法でした。

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

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

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。
ABOUT ME
ヤマダカイト
都内メーカーでweb・グラフィックデザイナーとして働きながら、リンカイ-デザインという屋号でデザインしたりブログ書いています。デザインを使って何ができるのか、を考えるのが得意です。 将来は複業家として東京×長崎の二拠点生活をします。 詳しいプロフィールはこちら
中途未経験からデザイナーを目指すなら
中途未経験かでデザイナーになる方法まとめ

中途未経験からデザイナーを目指すのは、かなり茨の道です。低収入・残業多い・新卒が後ろから迫ってくる。フリーランスでやるにしても相当の覚悟が必要になります。

それでも「俺は!私は!デザイナーを目指すんだ!」というあなたに。

27歳 中途未経験の元・文系学生がデザイナーになった方法

POSTED COMMENT

  1. くろけん より:

    始めまして。ツィッターフォローさせていただきました。
    楽天で追従バナーを設置させていいただいておりました。
    しかし現在チャット機能が追加されそこに重なってしまっております。
    bottomを変更したり、z-index: -1にしたりと色々試しましたが一向に変わりません。
    ご教授いただけると幸いです。

    • ヤマダカイト より:

      くろけんさん
      ご覧頂きましてありがとうございます!またツイッターのフォローもありがとうございます。
      ご質問の件ですが、.bnr_leftのbottomの値(90pxのところ)を120pxにしてみると画像が上に移動します。
      もしくは、.bnr_leftにright:0px;を入れると右側に寄るのでチャット機能のバナーには重ならなくなると思います。試してみてください!

  2. じゅん より:

    はじめまして。画像はどこに貼るのでしょうか?

    • ヤマダカイト より:

      じゅんさん
      ご覧頂きましてありがとうございます。
      画像ですが、に貼っていただければ大丈夫です。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です