楽天 PCページの右にスクロール追従バナーを設置するには

楽天

楽天で、左右どちらかや両方に、スクロールしてもずっと同じ位置にバナーがあるお店がありますよね?
 
 
今回は、そのバナーの設置コードをご紹介します。

セールの時などに使えるので、便利ですよ♪

 
 
 
 

動作サンプルは右側に設置してあります。

 
 

右下に設置する場合

<style>
.right_tab1 a{
	background:url("画像のURL");
	width:50px;/*画像の横幅*/
	height:100px;/*画像の高さ*/
	display:block;
	position:fixed;
	right:0px;/*画像を置く位置 右*/
	bottom:100px;/*画像を置く位置 高さ 下から100px*/
	text-indent:-9999px;
}
.right_tab1 a:hover{
	background:url("ロールオーバー時の画像のURL");
	width:150px;/*画像の横幅*/
}
</style>


<div class="right_tab1">
<a href="" title="クーポン"></a>
</div>

 
 
 
このコードを楽天RMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、フッターの編集欄へ貼り付けてください。
 
 

通常時の画像と、ロールオーバー時にもう少し詳しく見せてクリックを促すための画像の合わせて2枚を使います。
 
 
 
 

right:0px;

これを

left:0px;

にすると、左側に設置できます。
 
 
 

また、

bottom:100px;

top:100px;

に変えると、上基準で位置が決まります。
 
 
 

いろいろ試してみてください。

コメント