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

楽天

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

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

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

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

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

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

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



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

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

 

1.ヘッダー・フッター・レフトナビに追加

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

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

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

 

2.バナーを貼り付ける

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

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

 

【関連記事】

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。日本語力が乏しく…社内のみんなからも指摘をされるので、ブログの執筆を通じて語彙力強化していきたいです✨ 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物がすきな皆さま、小動物トークしましょう!