【コピペでできる】楽天市場の帯バナー

楽天スーパーセールやポイントアップキャンペーンのとき、お店の賑わい感を出すことができるバナーといえば何でしょうか？

特に販促効果が高いバナーといえば上下に伸びる帯バナーです。

本記事では楽天市場の商品ページ、カテゴリページに設置できる帯バナーの設置方法を紹介します。

この記事の目次

楽天市場に帯バナーを設置する方法

RMSのヘッダースペースに帯バナーのHTMLを記述していきます。

ここがポイント！

左と右で別々のバナー画像、リンク先ページを設定できます。

CSSは楽天GOLDから<linkタグ>で読み込む、または<styleタグ>内に記述して前述のHTMLに追記しましょう。

.bandbnr-ltは左帯バナー、.bandbnr-rtは右帯バナーの画像を設定する箇所です。

画面幅の狭いデバイスでは帯バナーが商品ページ閲覧の邪魔をしてしまいます。

したがって、指定した画面幅以下では非表示になるようCSSで指定します。

※自店舗のサイト幅にあわせて@media screen and (max-width:1380px)の値を変更してお使いください。

ここがポイント！

画面幅の狭いデバイスではバナーを非表示にします。

帯バナーの幅を変えたいときはどうすればいい？

.bandbnr-lt a, .bandbnr-rt aのwidthの値を変更することでバナーの幅を変更します。

/* 幅120pxのバナーにしたい場合 */
.bandbnr-lt a,
.bandbnr-rt a {
  width: 120px;
}

左右で別々のバナー画像を表示させたいときは？

.bandbnr-lt 、.bandbnr-rtそれぞれにbackground-image: url()を指定してください。

/* 左帯バナー */
.bandbnr-lt {
  background-image: url(img/banner-1.jpg);
}
/* 右帯バナー */
.bandbnr-rt {
  background-image: url(img/banner-2.jpg);
}

前述したHTMLとCSSをまとめたデモです。ご確認ください。

応用として期間限定セールで使える帯バナーを紹介します。

セールの開催期間中のみ表示されます。

HTMLを下のように書き換えます（CSSは前述した内容と同じでOK）。

<bodyタグ>のonpageshow属性を使って表示させたい期間を設定します。

詳しい記述方法については下の記事を参考にしてください。

スクロールしても常に表示される帯バナーはお客様の目に留まりやすいバナーです。

常に表示してお店の賑わい感を演出する使い方も有効ですが、ここぞというセールで設置するとさらに効果的です。

帯バナーを設置してセールページや目玉アイテムへお客様を誘導しましょう。