タグ: 設置

皆様どうも、こんにちは。 楽天ショップの中で、スクロールしても付いてくるバナーを見たことはありませんか？ PCだと画面の横にピタっと付いてきて、マウスをのせるとニョキっと出てくるアレです。 スマホだとスクロールしてもいつまでもついてくるアレです。 本記事ではそんな「スクロールに追従するバナーの設置方法」ついて解説していきます。 本記事の索引 -INDEX- 1. コピペするコードの紹介 2. まとめ 1. コピペするコードの紹介 コピペ用のコードを紹介いたします。 今回の記事で参考にさせていただいたブログは以下の２つです。 ・オガリアさんのこちらの記事 ・レジットさんのこちらの記事 ※実際に検証した上で上記サイトの内容を若干変更して記載します。 PC用コード バナーの画像は幅87px、高さは私は250pxで制作して正常に動作しました。 以下コードを「共通説明文（大）」に設置して正常動作しました。 <!-- 追従バナー ここから--> <style type="text/css"> <!-- a#rc_rightArea { width: 87px; /*画像の全体幅*/ position: fixed; top: 100px; right: -20px; /*マウスを乗せた時に出てくる幅*/ display:...