楽天ショップでページの左右に別々の縦バナーを設置する方法

公開日:  最終更新日:2018/06/14

過去のエントリー楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻
この記事に珍しくコメントが付いたので、要望にお答えしてエントリーを追加します。

左右で違う種類の縦バナーを設置する

楽天でショップを運営していると「ポイント○倍」「送料無料」「○○%OFF!」などなど、様々なアピールポイントを訴求したいという場面が結構あります。

だけどページ内の商品を説明している部分に埋め込んじゃうと、ただでさえごちゃごちゃしたページが更にカオス状態になってしまう事も。(カオス化しているページはよく見かけますが・・・)

それらの情報を一括でかつスタイリッシュに?訴求するために「縦バナー」を設置している店舗も多いのですが、RMSにその機能は無いため、意外と難易度が高いです。

Rakuten top

このエントリーでは、WEBデザインの知識があまり無くても左右に別のデザインの「縦バナー」を設置出来るように説明します。(私自身そんなに知識は無いのでおかしな部分があるかも知れませんが・・・)

「左右別デザインの縦バナー」設置の流れ

  • バナーのデータを用意(もちろん左右別に作る)
  • ページにCSSを記載(またはGOLDにアップしたCSSを読み込む)

基本的には過去のエントリー楽天のページで縦バナーを両側に設置して、お祭り感を演出するの巻
と全くおなじ流れです。

CSSのサンプル


.tban {
  visibility:visible;             /*消したい時はhiddenに変更*/
  height:2000px;                  /*高さを設定*/
  _height:2000px;
  min-height:100%;
  width: 100px;                   /*画像の横幅に合わせる*/
  z-index: -1;                    /*ページの背面に廻る様に*/
  position: absolute;             /*位置調整用です*/
  display: block;
  top:0px;                 /**/
  list-style:none;
  }
#t_left{
   left:20px;                      /*左側に20pxの隙間を空けます*/
   background: url(画像URL) repeat-y scroll;/*左のバナー画像URL*/
        }
#t_right {
   right: 20px;                    /*右側に20pxの隙間を空けます*/
   background: url(画像URL) repeat-y scroll;/*右のバナー画像URL*/
   right: 20px;                    /*右側に20pxの隙間を空けます*/
        }
HTMLのサンプル
<ul>
<li class=&quot;tban&quot; id=&quot;t_left&quot;></li>
<li class=&quot;tban&quot; id=&quot;t_right&quot;></li>
</ul> 

一部違うのは、当然ながら右と左のバナー画像のURLを個別に指定しているところです。本職がWEBデザイナーの方であれば常識レベルなのかも知れませんが、私は過去これを実現するのに数日を要しましたw。

ちなみにHTMLもCSSもページに直接書いても構いませんが、(商品ページであれば「販売説明文」、カテゴリページであれば「カテゴリ説明文」)この「縦バナー」ってやつは、全ページに一括で反映したいと思うので、

R-Storefront >デザイン設定 >共通テンプレート設定 >ヘッダー・フッター・レフトナビ

あたりに書いて、使用するページでそのテンプレートを選んであげれば、後の管理が楽チンでおすすめです。

一括で表示・非表示の切り替え、画像変更を行うには

画像変更は、新たにバナーの画像を用意したら、R-Cabinetにアップロードして、CSSの画像指定のURL部分を書き換えればOKです。

ちなみにR-CabinetでもGOLDでも、画像の上書きは反映までにすごく時間が掛かるのでおすすめしません。別名でアップロードし直して、ソースの方を書き換えましょう。

表示・非表示の切り替えは、CSSの8行目あたりに
visibility:hidden;
の1行を追加するだけ。再度表示したい時は、hiddenをvisibleに書き換えれば簡単です。

あわせて過去記事、
楽天ショップで外部スタイルシートを利用する方法
も見てね。

2013/5/22コード記述に誤りがあったため修正

最新記事

リンクも出来る!コピペでOK!楽天ショップ用「縦バナー」最強版

こっちの方がいいかもよ

コメント

  1. 佐川 より:

    ずーっとやりたかったことが、丁寧に説明されているので、大変感激しています。
    しかし、当方、全くの初心者で、使い方がよくわかりません。両サイド同じ画像はコピペでokでした。ご教示お願いいたします。

    • hakase より:

      佐川さん
      コメントありがとうございます。
      恥ずかしながらコードにミスが有った様なので修正致しました。
      もう少しわかりやすい記事を書いてみます。

  2. 佐川 より:

    Hakaseさん
    大感謝!
    悩んだいたので助かりました。
    これからも宜しくお願いします。m(__)m

  3. 佐川 より:

    佐川です。
    またまた質問なのですが、両サイドの縦バナーで判りやすいページにすることが出来たのですが、PCの解像度と思うのですが、後ろに回り込んでうまく表示されない場合があります。
    ズーム表示で縮小すれば何とかなりますが、ズームしても間隔が変わらずに表示される店も見かけます。再度のご教示お願いいたします。

  4. ハカセ より:

    佐川さん
    コメントありがとうございます。
    背面に回り込むのはCSSで
    z-index: -1;
    という指定をしているためです。
    この一行を削除するか、-1を10など大きな数値に変えると前面に表示されます。
    しかし、PCの解像度によっては商品説明が見えなくなるなどの不具合があるため、過去にクレームになった事がありますのでご注意下さい。
    ズーム時の表示やブラウザのサイズ(解像度)によって表示方法を変えるやり方は次回記事にしたいと思いますので、少々(気長に)お待ちください。よろしくお願いします。

  5. やっと何とか より:

    両サイドに別バナーを表示させる事は、今まで、どうやってもうまくいかなかったのです。goldでデザイン作成しているところは両端に表示させていて、「いいなぁ、うちもgoldで登録してたらなぁ」と。。。あきらめておりました。それが、またチャレンジしてみようと思い、検索で貴ページに辿り着きました。書かれていたコードをコピペして、試行錯誤しながらやってましたら、ついに別バナーの表示に成功しました。ありがとうございます。

    • ハカセ より:

      やっと何とかさん
      コメントありがとうございます。私も以前はすごく苦労しました。お役に立てて何よりです。やり方はこれ以外にも色々あって、正解ってのは無いので、色々試してみて下さい。
      貴店のお客様にとって楽しくお買い物が出来る店を目指して頑張ってください。そしてお金をいっぱい稼いで私にビールを奢って下さいw

  6. 双子のパパ より:

    はじめまして!
    質問させて頂きます。
    両側に縦バナーを設置する事は出来たのですが、高さを設定すると、例えば高さを2000pxにするとスクロールさせるとすぐに縦バナーは終わりますよね?
    で10000pxとかにすると、ページの下までスクロールさせても縦バナーだけが更に下に続くと言った感じになります。
    縦に長いページもあれば短いページもありますので、それぞれのページの長さに合うようにしたいのですが、方法はありますでしょうか?
    よろしくお願いします!

    • ハカセ より:

      双子のパパ様
      コメントありがとうございます。

      ご指摘の通り、縦バナーの高さは固定になってしまいます。
      ページ全体に収まるように出来れば一番なのですが、いかんせんRMSのページに無理やり設置しているものでjavascriptも効かず、解決策が現在のところ見つかっていません。

      GOLDのページ限定でしたら、縦バナー自体とHTML body 要素のheightを100%にしてあげれば、ページサイズにきちんと収まるはずです。

      商品ページやカテゴリページと共通で使う場合は、やはり適度なサイズで調整するしかないとオモワレマス。
      お役に立てずスミマセン。

      もし解決策を発見したら、これ以上ない位のドヤ顔で記事にしたいと思いますので、たまにこのブログも覗いてみて下さい。
      よろしくお願い致します。

  7. コーダー より:

    うちだったら、縦バナーをPhotoShopで、画像サイズ1140px×800pxの背景画像に、縦バナー50pX×800pxサイズのものを2つ両端に配置して作りますけど、
    そのほうが両端に配置しやすいですし、サイトの長さも丁度よく出来るのでお勧めです。

    ちなみに
    CSS
    body{
    background-image:url(****.jpg);
    background-repeat:repeat-y;
    background-position:center;
    }

    これで縦バナーの2つは両端に表示され、しかも画像サイズ1140px×800pxの背景画像がセンタリングされるのでおすすめです。

  8. かず より:

    非常に参考になります。
    しかし、ページの長さはまちまちなので、できれば、ページ長さに関係なくリピートする方法をお教えください。

    • ハカセ より:

      かず様
      コメントありがとうございます。
      ご指摘のページの長さに関係なくリピートする方法ですが、実は現在でもまだ解決策を見いだせておらず・・・。
      RMSで作られるページのため色々と制限があり、javascriptを使う方法など色々試してみたのですが・・・。
      引き続き解決策を模索してみます。よろしくお願い致します。

  9. ラッキー より:

    楽天のスタンダードで出店してるんですが、上記のように書いても、両端に画像が固定しません。(左しか固定されない)
    初心者なので、ヘッダには、HTMLを書いているだけ(tableを並べてるだけ)なので、実際、HTMLに書くという部分をどこに書けばいいのかもわかりません。
    それと、スクロールしていくと、途中で切れるのは2000pxで高さを定義しているからだと思いますが、とりかく右下、左下に違う画像を固定したいです。

    どうすればよいのでしょうか?

佐川 へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Twitter

ページ先頭に戻る