フローティングバナーの設置方法

楽天市場でなどでよく見るページをすスクロールしても同じ位置からまったく動かないバナーがあります。
そういったバナーをフローティングバナーと呼びます。

フローティングバナーは必ずその位置にあるという事は、
情報の見落としが少ないという事です。
大事なイベントや、お得な情報など必ず見てほしい情報は
このフローティングバナーを利用するとよいでしょう。

では、改めてそのフローティングバナーの楽天市場での設置方法を説明させていただきます。

まずフローティングバナーの設置に必要な情報は以下になります。

①バナーの画像データ
②バナーを設置するHTMLソース(ページ遷移させたい場合はリンク情報まで)
③バナー位置を設定するCSS

以上の3つがあれば設置は可能です。

まずはバナー画像を、R-Cabinetか楽天Goldに保存します。

次に画像をはるだけの簡単なHTMLのソースを書きます。

<div class=”flt_banner”>
<a href=”#”><img src=”#” /></a>
</div>

img src=”#” → 保存したバナー画像のURLを記載して下さい。
※とび先のリンクがない方はは削除して下さい。

最後にバナーを固定するシンプルなCSSを書きます。

<style>
.flt_banner{
width: 120px;
position: fixed;
right: 0;
top: 100px;
z-index: 9999;
}
.flt_banner img {
width: 100%;
}
</style>

topの数値を変更する事で、最上部から何pxの位置に表示させる設定ができます。
今回は100pxと記載してますので、最上部から100pxの位置にバナーを表示させるという事になります。

では、実際に楽天市場の店舗に表示させてみましょう。

まずは、RMSにログインし、
デザイン設定→
ヘッダー・フッター・レフトナビ→
選択されてる緑の背景の編集をクリックしてください。


HTMLタグの挿入のヘッダーコンテンツに②のHTMLと③のCSSを記載します。

これだけで、フローティングバナーの設置は完了となります。
スマホに設置する時も基本は同じなので、サイズと位置だけはちゃんと確認してから設置してみて下さい。

何か告知がある際は、このフローティングバナーを活用してみて下さい。
最後までお読みくださり、ありがとうございました。

関連記事

  1. セール企画  セールを効率よく効果的に!

  2. 動画の差し込み方法

  3. 楽天スーパーSALEで準備しないといけない事

  4. 売上を最大化させる!タスクを効率よく行うための3つのコツ

  5. 【入門編】初心者でも簡単!FTPサーバー接続方法

  6. ECモールそれぞれの特徴と出店のメリット

最新のブログ

2020年3月
« 1月    
 1
2345678
9101112131415
16171819202122
23242526272829
3031  

アーカイブ

Instagram