WEB MEMO https://ameblo.jp/kenjimemo/ HTML・js・css 等、WEB知識に関する忘備録です。 ja 楽天ページ「買い物かごに入れる」ボタンの真上にバナーを差し込む方法 

<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内「デザイン設定」の、「共通説明文（大）」へ貼り付ければ
　全商品へ反映させる事ができる。 ]]> https://ameblo.jp/kenjimemo/entry-11712634624.html Tue, 26 Nov 2013 19:01:44 +0900 楽天ページに、スクロール追従バナーを設置する方法
推奨サイズ…幅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>




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

以上で設置完了です。
]]> https://ameblo.jp/kenjimemo/entry-11712630945.html Tue, 26 Nov 2013 18:46:06 +0900 楽天商品ページの左右に縦帯バナーを入れ、更にリンクを貼る



<style type="text/css">


#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>


<ul>

<!-- 左縦帯バナー -->

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


<!-- 右縦帯バナー -->

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

</ul>






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


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


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

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

その替わり、縦帯バナーへリンクをつけられるというメリットがある。 ]]> https://ameblo.jp/kenjimemo/entry-11712621448.html Tue, 26 Nov 2013 18:28:38 +0900 ul、li タグで・(点)を非表示にする 

<ul style="list-style:none;">
<li>aaaaaa</li>
<li>bbbbbb</li>
<li>ccccccc</li>
</ul>


]]> https://ameblo.jp/kenjimemo/entry-11711982416.html Mon, 25 Nov 2013 17:52:30 +0900