2021.11.24デザインTIPSCSSHTMLRMSスマホ楽天追従バナーこの記事は約3分で読めます。楽天RMSの謎の仕様にイライラしがちなデザイナーの皆様どうも。!ヤマダカイト(@slash_kaito)です。難解なRMSの仕様ですが、その中でもさらに複雑なのがスマホ版です。レスポンシブじゃないのもアレですが、さらにわかりにくい。仕様の追加に次ぐ追加でこうなったんでしょうね。その様相は、まるで複雑怪奇な迷宮、ハウルの動く城状態。2005-11-16Amazonで調べる楽天市場で調べる入り口から入ったら出口もないし、入り口もなくなっているという。今回はスマホの追従バナーのお話です。この方法は、正規の楽天RMSの使用方法と異なります。楽天のシステム変更により使用できなくなったり、規約違反になる可能性もありますのでご注意ください。画像のシャドーを外す場合png画像がオススメ!位置の変更も自由自在!本日のまとめスマホ追従バナーとはこういうのです。キャンペーンやクーポンなどのおトクなサービスで「絶対にクリックさせて、購入の最後の一押しにしてやるぜ!」的なものを入れることが多いです。ネットショップにおいて、スマホは入り口と出口を分けるといいらしいです。その方が「あっ、この商品気になるかも」「あっちも」「こっちも」とついで買いをしてくれるから。あとは純粋に商品や店舗とのとのタッチポイントが増えることで、それだけ購入に対するハードルが下がります。来た客を、ネットショップという名の迷宮に迷い込ませるわけです。入り口と出口が異なる様相は、まるでハウルの動く城。くどい!そんなわけで、ここから本題。スマホ追従バナーの設置方法やり方は簡単。※楽天GOLDの契約が必要です。ftp上の任意の場所に(cssフォルダなど)に下記のCSSを記述。デザイン設定>スマートフォンデザイン設定の商品ページ共通パーツ設定」を選択。共通パーツ設定」を選択。3商品ページ共通説明文に下記のHTMLを記述。以上!カンタンですね。解説&補足ざっくり解説していきます。0.8);を削除しちゃってください。png画像がオススメ!透過させたpng画像であれば、丸や三角など自由な形にできます。ボタンっぽいほうが押してもらえそう。位置の変更も自由自在!CSS内のtopとleftを変えれば、お好きな場所に設置できます。下や右下などは、お買い物かごなどの楽天フォーマットの画像があるので、避けた方が無難です。重なって画像が隠れちゃったりすると、規約違反で注意されます。cssでz-index:-1;とかを指定してあげると、要素が後ろに回り込むのでいい感じになるかと。本日のまとめ以上、楽天RMSでスマホの追従バナーを設置する方法でした。これを応用すれば、全ページ共通のグローバルナビなんかも設定できますので、ぜひお試しください。お願いしますシェアするツイートするTwitterでもデザインや日々のことをつぶやいています。デザイナー仕様のMac風に変更する方法。デザインTIPS広告デザインの「シーン別」参考サイトで、状況に応じたインプットをデザインTIPSまだ間に合う!2019年賀状デザインのアイデア・考え方。デザイナーの制作実例もご紹介!デザインTIPS印刷の通販®グラフィックがリニューアルして、さらに便利になったぞ!デザインTIPS楽天商品ページでも使える、マウスオーバーで「ふわっ」とへこむリッチUIなボタンの作り方。ツィッターフォローさせていただきました。楽天で追従バナーを設置させていいただいておりました。現在チャット機能が追加されそこに重なってしまっております。-1にしたりと色々試しましたが一向に変わりません。ご教授いただけると幸いです。PMくろけんさんご覧頂きましてありがとうございます!またツイッターのフォローもありがとうございます。ご質問の件ですが、.bnr_leftのbottomの値(90pxのところ)を120pxにしてみると画像が上に移動します。.bnr_leftにright:0px;を入れると右側に寄るのでチャット機能のバナーには重ならなくなると思います。PMじゅんさんご覧頂きましてありがとうございます。貼っていただければ大丈夫です。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るプロフィールヤマダカイトD2C企業のマネジャー。通販検定1級所持の元デザイナー。リンカイ-デザインという屋号でデザインしたりブログを書いています。2021年4月に東京→長崎移住しました。長崎と東京、それぞれの良いところを見つけていきたい。詳しいプロフィールはこちら。Reserved.ホーム検索シェアXFacebookはてブPocketLINEPinterestLinkedInコピーコメントトップメニュータイトルとURLをコピーしました。