楽天ページ「買い物かごに入れる」ボタンの真上にバナーを差し込む方法

1.以下のCSSを用意します。

<style type="text/css">

<!--

span.unit { background: url(画像URL) no-repeat left top; text-indent:

-9999; display: block; width: 400; height: 100; margin:15px 0; }

-->

</style>

※”画像URL”の欄は、予めサーバにアップした画像のURLを差し込みます。
※width:400; height:100;　←画像の大きさに合わせて適宜変更してください。

2.上記のCSSを、商品ページのHTML編集欄へ貼り付け、更新します。
※RMS内「デザイン設定」の、「共通説明文（大）」へ貼り付ければ
　全商品へ反映させる事ができる。

楽天ページに、スクロール追従バナーを設置する方法

1.バナー画像を作ります。

推奨サイズ…幅87px（内、マウスオーバーで出現する部分は10px20px）×縦200px
作った画像は、サーバーへアップします。

2.以下の内容で、CSSファイルを作成します。（例：exsample.css)
（画像の横幅…87px　画像の縦幅…200px　マウスオーバーで出現する部分の幅…20px　とします。）

/* right fixd */
* html body { background: url(null) fixed; }

* html div#rc_rightArea{
	position:absolute !important;
	top: expression((documentElement.scrollTop || document.body.scrollTop) + 100 + 'px');/*ページトップからの距離*/
	left: expression((documentElement.scrollLeft || document.body.scrollLeft) + document.body.clientWidth - 87 + 'px');/* 画像の横幅 */
}

/* right bannar */
div#rc_rightArea{
	width: 87px;/* 画像の横幅 */
	height: 200px;/* 画像の縦幅 */
	position: fixed;
	top: 100px;/*バナーの上下位置指定*/
	right: 0px;
	text-indent:-9993px;
	display:block;
}

div#rc_rightArea:after{
	content: "."; 
	display: block; 
	height: 0; 
	font-size:0;	
	clear: both; 
	visibility:hidden;
}

div#rc_rightArea {
	display: inline-block;
} 

/* Hides from IE Mac */
* html div#rc_rightArea {
	height: 1%;
}

div#rc_rightArea {
	display:block;
}
/* End Hack */

div#rc_rightArea .rc_right {
	outline:none;
	display: block;
	background: url("バナーのURL") no-repeat scroll 20px 0 transparent; /* マウスオーバーで出現する部分の幅 */
	position: relative;
	width:87px;/* 画像の横幅 */
	height:200px;/* 画像の縦幅 */
	left:0px;
	z-index:9998px;
}

div#rc_rightArea .rc_right:hover{ background-position:0px 0px;  }

※バナーのURL箇所は、1.でアップした画像のURLに書き換えます。

3.作成したCSSファイルを、サーバ内にアップします。

4.以下のHTMLソースを、RMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、ヘッダーの編集欄へ貼り付けます。

<link href="(①先程アップしたCSSデータのURL)" rel="stylesheet" type="text/css">

  <div id="rc_rightArea">  <a href="(②バナーのリンク先URL)" class="rc_right">スクロール追従バナーです</a>  </div>

※上記ソース内、①と②の箇所を適宜書き換える。

以上で設置完了です。

楽天商品ページの左右に縦帯バナーを入れ、更にリンクを貼る

1.以下のソースを、用意します。

#tate_left { left: 0px; }

#tate_right { right: 0px; }

#tate_left a,

#tate_right a {

display: block;

min-height: 100%;

width: 90px; 　　　　　　/* 画像の横幅 */

visibility: visible;

height: 7000px;

text-indent:-9999px;

}

#tate_left,

#tate_right {

position: absolute;

width: 90px; 　　　　　 /* 画像の横幅 */

min-height:100%;

visibility: visible;

display: block;

}

/***********************

左縦帯バナー設定

************************/

.tateobi1 {

background: url(左縦バナーの画像URL) repeat-y scroll;

min-height: 100%;

height: 7000px;

top: 75px;

z-index: auto;

visibility: visible;

}

/***********************

右縦帯バナー設定

************************/

.tateobi2 {

background: url(右縦バナーの画像URL) repeat-y scroll;

min-height: 100%;

height: 7000px;

top: 75px;

z-index: auto;

visibility: visible;

}

@media screen and (max-width: 1220px) {

#tate_left, #tate_right {

visibility: hidden;

}

</style>

<li class="tateobi2" id="tate_right"><a href="リンク先URLを入力"></a></li>

</ul>

※画像のURL、リンク先のURLを適宜書き換えます。

2.上記のソースを、RMS内「ヘッダー・フッター・レフトナビのテンプレート設定」から、レフトナビの編集欄へ貼り付けます。
以上にて完了。

上記でご案内した方法を利用すると、
「縦帯バナーの長さ(高さ)だけ、画面が長くなる」というリスクがあります。

よって、短い商品ページへ長い縦帯バナーを設置すると
商品ページの下部に不自然な空欄が出来てしまいます。
1ページのみへの設置であれば、縦帯バナーの高さを調整する事で回避出来ますが、
全ページへ反映させる場合は上記についてご留意ください。

その替わり、縦帯バナーへリンクをつけられるというメリットがある。

WEB MEMO

HTML・js・css 等、WEB知識に関する忘備録です。

楽天ページ「買い物かごに入れる」ボタンの真上にバナーを差し込む方法

楽天ページに、スクロール追従バナーを設置する方法

楽天商品ページの左右に縦帯バナーを入れ、更にリンクを貼る