コピペで使える楽天市場デザイン【縦&フローティングバナー】

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

楽天サイトのページで欠かせない要素となっているバナー!
セール時に縦にずっとスクロールしても繰り返し続いているのが、いわゆる「縦バナー」と呼ばれるバナーです。
スクロールすると端っこでちらちら。気になる存在。
今回はそのちらちら気になる縦バナーと、縦バナーはちょっと…という方におすすめのフローティングバナーをコピペで簡単に設置できる方法をご紹介いたします。

縦バナー

まずは楽天バナーの王道、縦バナーの設置方法からご紹介。

画像の準備

まずは画像の準備を!
今回は横90px、高さ520pxで準備しました!

用意した画像を、R-cabinetまたは楽天GOLDのimgフォルダにアップして画像の準備は完了です。

htmlコードをコピペしよう!

楽天GOLDのindex.htmlに下のコードをコピペしてみましょう!

bnrLeftに左縦バナーのリンク先のURLを、bnrRightに右縦バナーのリンク先のURLを入れてください。
同じようにRMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、ヘッダーナビの編集欄へコピペします。
これでトップページ以外にも縦バナーを置く準備ができました。

cssコードをコピペしよう!

次はcssファイルに以下のコードををコピペしてください。

【css】

青字部分に左縦バナーURLをを、赤字部分に右縦バナーURLを入れてください。

するとこんな感じに縦バナーが並びます。


一番下の
@media screen and (max-width: 1180px) {
.tateBnr {display:none}
}
を入れることによって幅が狭くなった際に縦バナーは消えるようになります。

右側だけ使う場合は <p class=”bnrLeft”>~</p>部分を、
左側だけ使う場合は <p class=”bnrRight”>~</p>部分を、
消しすとどちらか片側のみとなります。

今回ご紹介した縦バナーは高さを固定しているので、
短すぎるページだと余計な余白が出来てしまいます。
なので主要なページに合わせて高さを調節するといいようです。

フローティングバナー

縦バナーがちょっと自分のサイトに合わない。
または、両側に置くとうるさすぎるかも・・・!
という方におすすめなのはフローティングバナーです。

ページの片側でペタッと引っ付いて動かないバナーのことです。
クーポンバナーを置いてみたり、新商品が出たお知らせなど活用いただけます。

htmlコードをコピペしよう!

画像は先ほどの縦バナーと同じ要領でご用意ください。
今回は横130px、高さ130pxで用意しました。

【html】
下のコードをコピペしてください。

バナー数だけ<li></li>を変化させて活用ください。

cssコードをコピペしよう!

【css】

左右の設置場所の変更は赤字部分で調整してみてください。
設置してみるとこんな感じになります。

 

 

フローティングバナー、縦バナーの併用も可能です。

 

 

今回は楽天の王道バナーを簡単に設置できる方法をご紹介いたしました。
少しでも楽天サイトでのお役に立てれば幸いです!

しかし、ネット通販の施策を行おうとしても
・他の業務と兼任で時間がなかったり、
・そもそもECの経験がなかったり
で、難しい部分もあるでしょう。

当社はそんなネット通販のお悩みを「トータルでまるっと解決」します!

楽天代行でもAmazon代行でも全部丸投げしてください。
あれもこれも全部やります!

まずは下記フォームからお気軽にご相談ください。

今すぐ問い合わせる

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す