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

<!-- 左帯バナー -->
<div class="bandbnr-lt">
  <a href="セールページのURL"></a>
</div>
<!-- 右帯バナー -->
<div class="bandbnr-rt">
  <a href="セールページのURL"></a>
</div>

CSS

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

.bandbnr-lt,
.bandbnr-rt {
  z-index: 200;
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  background-color: transparent;
  background-image: url(img/xxxxx.jpg);
  background-repeat: repeat-y !important
}

/* 画面幅1380px以下のときは非表示 */
@media screen and (max-width:1380px) {
  .bandbnr-lt,
  .bandbnr-rt {
    display: none;
    visibility: hidden
  }
}

.bandbnr-lt a,
.bandbnr-rt a {
  display: block;
  width: 100px;
  height: 99999px;
  height: 100%
}

/* ▼左右で別々のバナーを設置したい場合はそれぞれにbackground-imageを記述します */

/* 左帯バナー */
.bandbnr-lt {
  left: 0;
  background-position: left 0 top!important
}
/* 右帯バナー */
.bandbnr-rt {
  right: 0;
  background-position: right 0 top!important
}

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

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

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

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

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

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

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

デモ：楽天市場の帯バナー

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

See the Pen
Rakuten band banner.｜楽天市場の帯バナー by ざきひー (@zakihiii)
on CodePen.