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

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

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

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

本記事の索引 -INDEX-

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

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

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%に設定するのがキモです。
こうすることで、スマホを縦横両方の使用形態に対応できます。

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

2 replies on “【あっさり解決】楽天ショップに追従バナーを設置する方法(PC&スマホ)”

  • 株式会社ライズ 2017年12月8日 at 6:01 PM

    宜しくお願いします。
    【あっさり解決】楽天ショップに追従バナーを設置する方法(PC&スマホ)でスマホ用を指示通りGOLDにもアップし、スマホの商品ページ 共通パーツ設定の商品ページ共通説明文に、htmlに必要箇所を入れてコピペして入れたのですが、固定にしかなりませんでした。「商品ページ共通説明文」には、他のhtmlが入っているのですが、どうしたらいいですか?
    楽天のアプリにも有効ですか?

    • しゃちょー 2018年1月16日 at 1:28 PM

      コメントありがとうございます。
      そして返信が遅れてしまい申し訳ございませんでしたm(_ _)m
      楽天アプリのスマホページと、ブラウザのスマホページでは仕様が異なるので回答が難しいです。
      楽天のスマホサイトはアンドロイドとiPhoneでまた挙動が違ってくるので、
      予想としては

      ・既に記述しているHTMLや読み込んでいる外部CSSと鑑賞している
      ・楽天で仕様しているcssと鑑賞している(クラス名など)

      が考えられます。
      chromeなどでデベロッパーツールで調べてみていただけますか?

      https://saruwakakun.com/html-css/basic/chrome-dev-tool

      よろしくお願いいたします。

Leave a Reply

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

こんにちは