楽天市場店舗用 縦帯設置と縦帯にリンクを設定する方法
こんにちは。
体がどんどんたるんできて、いい加減何とかしなければ！と思いつつも毎日3食とおやつを欠かさず美味しく食べている鷲尾です。
実家暮らしだと、何時に帰っても美味しいご飯が待っているのでついついしっかり食べてしまいます。
さて、今回は今や楽天市場の店舗ページには無くてはならない告知ツール！縦帯バナーを設置する方法をご紹介します。
おすすめ商品への誘導やイベントの紹介など、サイトに縦帯を設定するだけで華やかになり、訪問されたお客さんの興味を惹くきっかけになるかもしれません。
そんな縦帯が簡単に設置出来るので、是非参考にしてください。
画像を準備する
最初に、縦帯となる画像を準備してください。
特にどのくらいのサイズがいいということはありませんが、当社のお客様で言うとだいたい横80ピクセル～150ピクセル・縦500ピクセル～800ピクセルといったところが多いです。
伝えたい情報が簡潔に詰め込まれていて、トップページや商品ページの内容に被らない横幅と、スクロールしなくても見える縦幅がよいかなと思います。
スタイルの記述のみで縦帯を設置する
ここからが縦帯設置のソースの準備ですが、まずは簡単なスタイルの追記だけで店舗ページの左右のどちらか、または両側へ縦帯を設置する方法をご紹介します。
左側への設置方法
下記のスタイルを書き込むだけです。
<style>
body {
background-image: url( 画像URL );
background-repeat: repeat-y; /* Y軸（縦）方向に繰り返す */
background-position: top left; /* 左端に画像を設置する */
}
</style>
背景に用意した縦帯画像を指定し、画像の繰り返しを [ repeat-y ] でY軸（縦）方向にのみ行い、[ top ] でウィンドウの上端から [ left ] でウィンドウの左端から表示するよう指示しています。
書き込む場所は、<head>～</head>内です。
楽天RMSで言うと、ヘッダー・フッター・レフトナビのヘッダーコンテンツに追記してください。
右側への設置方法
右側のみへ設置する方法ですが、左側への設置ソースを少し書き換えるだけでOKです。
<style>
body {
background-image: url( 画像URL );
background-repeat: repeat-y; /* Y軸（縦）方向に繰り返す */
background-position: top right; /* 右端に画像を設置する */
}
</style>
[ left ] でウィンドウの左端から表示するようにしていたのを、[ right ] でウィンドウ右端から表示するよう変更しただけです。
左右両側への設置方法
左側、右側両方へ縦帯を設置したい！という時は、以下のスタイルを使用してください。
<style>
body {
background-image: url( 左側に設置する画像URL ),url( 右側に設置する画像URL );
background-repeat: repeat-y; /* Y軸（縦）方向に繰り返す */
background-position: left, right; /* 左端と右端に画像を設置する */
}
</style>
以上、左右への縦帯の設置はこれだけの簡単なソースで実装できるので、是非試してみてください。
ただし、サイトの背景にすでに画像を指定している場合、表示崩れてしまうため注意してください。
設置する縦帯にリンクも設定する方法
次に、リンクを設定出来る縦帯の設置方法をご紹介します。
縦帯で目立たせたい商品の商品ページやカテゴリーページなどへのリンクを設定出来ると、お客さんに買ってもらいたい商品への誘導にもなり便利ですよね。
スタイルの記述
まずは、<head>～</head>内に記述するスタイルです。
<style>
/* 左側へ設置する縦帯 */
.vban li.vleft {
background-attachment: fixed;
background-image: url(img/obi150125.jpg);
background-repeat: repeat-y;
display: block;
height: 100%; /* ページの高さに合わせる */
left: 0; /* 左端に寄せる */
list-style: none;
min-height: 100%;
position: fixed; /* 画像を固定表示 */
top: 0; /* 上からの距離 */
width: 80px; /* 縦帯の幅に合わせる */
}
.vban li.vleft a {
display: block;
width: 100%;
min-height: 100%;
}
/* 右側へ設置する縦帯 */
.vban li.vright {
background-attachment: scroll;
background-image: url(img/obi150125.jpg);
background-repeat: repeat-y;
display: block;
height: 100%; /* ウィンドウの高さに合わせる */
list-style: none;
min-height: 100%;
position: fixed; /* 画像を固定表示 */
right: 0; /* 右端からの距離 */
top: 0; /* 上からの距離 */
width: 80px; /* 縦帯の幅に合わせる */
}
.vban li.vright a {
display: block;
width: 100%;
min-height: 100%;
}
body > .vban li {
height: auto;
}
</style>
さらに、<body>～>/body>内に下記を記述します。
楽天で言うとヘッダー・フッター・レフトナビのヘッダーコンテンツ内です。
<ul class="vban">
<li class="vleft"><a href=" リンク先URL "></a></li> <!-- 右側のみに設置したい時は削除する -->
<li class="vright"><a href=" リンク先URL "></a></li> <!-- 右側のみに設置したい時は削除する -->
</ul>
私は、ページをスクロールさせても縦帯が固定されて付いてくるように設定しています。
固定ではなく画像が繰り返し表示されるようにしたい方は、画像を固定表示させている [ position: fixed; ] を [ position: absolute; ] に変更し、ページの高さに合わせて[ height: ○○px ] としてください。
ただ、これだとページ毎に高さを指定しなければならないので、私は固定表示の方が気に入っています。
また、楽天の店舗では楽天市場のヘッダーメニューが表示されて縦帯と被ってしまうので、上からの距離を56px程に設定すると被らず綺麗に表示出来ます。
リンク付きの縦帯も意外と簡単に設置出来るので是非活用してみてください！
オールラウンダーなスーパーマンを目指してます。社長と目でバトル（会話）するのが日課です。
この記事へのコメントはありません。