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

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

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

本記事の索引 -INDEX-

1. コピペするコードの紹介
2. まとめ

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>
<!-- //追従バナー ここまで-->

<!--

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>

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

スマホ用コード

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

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

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

</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;
}

@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のファイルをアップロードしましたので、
ご自由にお使いください。

【スマホ用】楽天追従バナー用外部スタイルシート (275 downloads)

まとめ

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

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

この記事を書いた人

しゃちょー

代表取締役の徳増です。
WEB制作、運営、人事など業務全般に携わっています。
中学時代から自分は社長になると思い込んでいました。現在、社長です。
元々美術関係やゲームが好きで、「ゲーム作ろっと！」と思い立ち、
高校卒業後に親の反対を振り切って単身東京のプログラミング専門学校へ。
卒業し、第一志望のSEGAは一次試験であっさり落ちてしまい、
内定していた第二志望の某ゲーム会社の通知をムシャっとしてクシャる。
情報処理の会社に入社し4年間倉庫管理システム構築業務に従事。
2007年、帰郷し独立。2013年8月法人化。