マニュアル

---------------------------------------------------------
本CSSはシステムサポート範囲外になります。
（とは言うものの、なにかありましたら企画部までご相談ください。）
---------------------------------------------------------

PCの縦帯バナー、固定タブバナー設置CSS（脱初心者～中級者向け）


１）画像はR-cabinetに先にアップロードしておきます。
　　（FTP転送が分かる方はGOLDでももちろんOKです）


２）以下のcssをコピーしてRMSでヘッダーかフッター、レフトナビに貼り付けします。

以下の4か所に１）でアップした画像URL、および特集ページのリンク先URLを入れます。

「ここにキャビネット等で登録した「縦帯バナー」画像URLを入れる。カッコは消さない」
「ここにキャビネット等で登録した「固定タブバナー」画像URLを入れる。カッコは消さない」
「ここに特集ページへのリンクURLを入れる」
「ここに特集ページへのリンクURLを入れる」






<style>
<!--
/* 左縦帯バナー */

#leftobi {
background: url(ここにキャビネット等で登録した「縦帯バナー」画像URLを入れる。カッコは消さない) repeat-y scroll;
position: absolute;
width: 140px;
top: 0px;
left: 0px;
min-height: 100%;
z-index: 0;
height: 5000px;　/*商品ページの長さに合わせて調整する*/
visibility: visible;
}

#leftobi a {
display: block;
width: 100%;
height: 100%;
left: 0;
top: 0;
}

/*1200px以下になったら消える*/
@media screen and (max-width: 1200px) {
#leftobi {
visibility: hidden;
}
}


/* 右固定バナー */

#rightbn{
position: fixed; 
top: 100px;
right: 0px;
text-indent:-9999px;
display:block;
background-color: transparent;
}

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

#rightbn {
display:block;
}

#rightbn a{
outline:none;
display: block;
width:100px;
height:180px;
}

#rightbn a:hover{
outline:none;
display: block;
width:130px;    
height:180px;
}

#rightbn a ,#rightbn a:hover{
background: url(ここにキャビネット等で登録した「固定タブバナー」画像URLを入れる。カッコは消さない) no-repeat scroll 0px 0 transparent;
}

//-->
</style>


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

<div id="leftobi"><a href="ここに特集ページへのリンクURLを入れる" target="_top"></a></div>

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



<!--  ▼右固定バナー▼  -->

<div id="rightbn"><a href="ここに特集ページへのリンクURLを入れる" target="_top"></a></div>

<!--  ▲右固定バナー▲  -->