【コピペで簡単！】楽天で追従バナーを掲載する方法

楽天

【コピペで簡単！】楽天で追従バナーを掲載する方法

2018年09月08日 20:00　2018年09月16日

【コピペで簡単！】楽天で追従バナーを掲載する方法

こんばんは。社員Aです👩

毎日ブログ更新を目指して、仕事が終わったあとは必ず次の日のブログ記事を予約投稿するようにしています！

この前、なんとなく社長に「このブログでうまいこと収益が出たらどうしますか？」って聞いてみたんですが、「社員旅行グレードアップする」「それか事務所を移転しようかぁ」なんて言っていました。

あわよくば博多駅の一等地（LI○Eとかが入っている某ビル）とかでお仕事してみたいです。（モチベーションが上がりそうなので）

さて、本日は楽天で追従バナーを掲載する方法をご紹介します。
楽天ショップを見ているとよく見かける、スクロールするたび追跡してくるバナーです。

１．ヘッダー・フッター・レフトナビに追加
２．バナーを貼り付ける
バナーを追従させるメリット
応用編・位置をカスタマイズ

注意点ここから作業手順をご紹介しますが、カスタマイズするときは、必ずバックアップをとっておいてください。自己責任でお願いします。

１．ヘッダー・フッター・レフトナビに追加

RMSにログインしたら、店舗設定＞デザイン設定＞ヘッダー・フッター・レフトナビ へと進みます。

ヘッダー・フッター・レフトナビの編集画面が表示されましたら、どこでも良いですが、一番上に下記コードをコピペしてください。

<style>
.bnr_left {
  display: block;
  position: fixed;
  z-index:9999;
  top:10%;
  left:0;
}
.bnr_right {
  display: block;
  position: fixed;
  z-index:9999;
  top:10%;
  right:0;
}
</style>

上記CSSを貼り付けましたら、続けてバナーを貼り付けます。

２．バナーを貼り付ける

続けて、追従させたいバナーを貼り付けます。

左端に追跡させたい場合と右端に追跡させたい場合で付与するclass名が異なりますので、下記を参考にしてください！

バナーを左端に追跡させたい場合

<p class="bnr_left"><a href="＊ここにリンク先が入ります＊"><img src="＊ここにバナーURLが入ります＊"></p>

バナーを右端に追跡させたい場合

<p class="bnr_right"><a href="＊ここにリンク先が入ります＊"><img src="＊ここにバナーURLが入ります＊"></p>

下記の部分はそれぞれご自身でアップロードされた画像URLやリンク先に置き換えてください。

＊ここにリンク先が入ります＊
＊ここにバナーURLが入ります＊

バナーを追従させるメリット

バナーを追従させることで、スクロールしてもユーザーの目に留まりますので、クリック率や回遊率アップが見込めます。

さらに下記のような時期に活用することで、売上アップする可能性があります。

・スーパーSALEやお買い物マラソンなどの大型イベント
・店舗内でのポイント○倍などのイベント
・クーポンの配布
・割引・値下げアイテムの紹介

応用編・位置をカスタマイズ

さきほどコピペしていただいたCSSはざっくり言うと、画面の上部から10%の位置で追従するというコードなのですが、この部分を応用していただくと位置も変えられます。

<style>
.bnr_left {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 10%; /* 上からどれくらいの位置に表示したいか */
  left:0;  /* 左からどれくらいの位置に表示したいか */
}

.bnr_right {
  display: block;
  position: fixed;
  z-index: 9999;
  top: 10%;  /* 上からどれくらいの位置に表示したいか */
  right:0;  /* 右からどれくらいの位置に表示したいか */
}
</style>

それぞれ、top・left・rightに数値が指定してありますが、これは追従するバナーが上・左・右からどの位置に表示できるかを指定するものです。

この数値を変えることで自由な位置に表示できるようになります。

ぜひ活用してみましょう！

【関連記事】