【あっさり解決】楽天ショップに追従バナーを設置する方法（PC＆スマホ）

皆様どうも、こんにちは。
楽天ショップの中で、スクロールしても付いてくるバナーを見たことはありませんか？
PCだと画面の横にピタっと付いてきて、マウスをのせるとニョキっと出てくるアレです。
スマホだとスクロールしてもいつまでもついてくるアレです。

本記事ではそんな「スクロールに追従するバナーの設置方法」ついて解説していきます。

スポンサードサーチ

1. コピペするコードの紹介

コピペ用のコードを紹介いたします。
今回の記事で参考にさせていただいたブログは以下の２つです。
・オガリアさんのこちらの記事
・レジットさんのこちらの記事
※実際に検証した上で上記サイトの内容を若干変更して記載します。

PC用コード

バナーの画像は幅87px、高さは私は250pxで制作して正常に動作しました。
以下コードを「共通説明文（大）」に設置して正常動作しました。

<!-- 追従バナー ここから-->
<style type="text/css">
<!--
a#rc_rightArea {
 width: 87px; /*画像の全体幅*/
 position: fixed;
 top: 100px;
 right: -20px; /*マウスを乗せた時に出てくる幅*/
 display: inline-block;
 transition: all .2s ease;
 z-index: 9999;
}
a#rc_rightArea:hover{
 right: 0;
}
-->
</style>


<a id="rc_rightArea" href="●●●リンク先URL●●●" target="_blank">
<img src="●●●画像URL●●●" />
</a>
<!-- //追従バナー ここまで-->

●●●リンク先URL●●●　と　●●●画像URL●●●　の部分を適宜変更してください。

スマホ用コード

スマホ用のバナーは横幅616px、高さは120pxのものを設置し正常に動作しました。
※イベント時に楽天から配布されるバナーのサイズと同じです。

以下のコードをスマホ用のHTMLが使用できる箇所にコピペしてください。
私は「トップページ設定」、「商品ページ設定」、「カテゴリページ設定」 の3箇所で正常動作しました。

<!-- 追従バナー -->
<link rel="stylesheet" href="●●●スタイルシートURL●●●" 　　　　　　　　　　　　　>
<a href="●●●リンクURL●●●"><img src="●●●画像URL●●●" class="footerBanner" width="100%" 　　　　　　　　　　　　　>
</a>

以下コードでスタイルシートのファイルを作り、楽天GOLDにアップロードし、
●●●スタイルシートURL●●●　にて指定してください。

@charset "utf-8";
.footerBanner {
    width: 100%;
    display: block;
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 1000;
}
#floatingButtons .toTopButton div {
	bottom: 50px;
}

#floatingButtons #smt_rakutenLimitedId_cartParts {
	bottom: 50px;
}

正常動作したcssのファイルをアップロードしましたので、
ご自由にお使いください。
[download id=”3711″]

まとめ

上記で紹介したコードやファイルを使えば、
簡単に追従するバナーを設置することが可能です。
バナーのサイズなどは自由に変更しても構いませんが、
PC版で幅を変更する場合はstyleのwidthの部分も変更してください。
今回に鍵らず、スマホ用のバナーはwidthを100%に設定するのがキモです。
こうすることで、スマホを縦横両方の使用形態に対応できます。

何か不明点があればコメントでご質問ください( ´,_ゝ｀)