• 文字サイズ


解決済

楽天 右縦バナー設置について

  • 相談者:非公開
  • 2016/07/11 16:04
いつも大変お世話になっております。

楽天の縦バナー設置について質問です。
現在、左縦バナーは設置しているのですが、右にも設置したいと考えています。
こちらのフォーラムでも似たような質問があったので真似しようと思ったのですが
上手くできずにいます。

以下のスタイルシートをどのように変更すれば右縦バナーを設置できるのでしょうか。
また、もし縦バナー内で紹介している商品が自動で他商品へ変わる(スクロールなど)するようにできるのであればそちらも合わせてお教えいただきたく思います。





<!--★縦バナー★ ここから-->

<style type="text/css">
@media screen and (min-width:1300px) and (max-width:10000px){
.tban {
height:10400px;/*800の倍数で設定(縦バナーのサイズ)*/
_height:9000px; /*高さを設定*/
width: 100px; /*画像の横幅に合わせる*/
z-index: -1; /*ページの背面に廻る様に*/
list-style:none;
position: absolute;
display: block;
visibility:visible; /*消したい時はhiddenに変更*/
min-height:100%;
top:100px; /**/
}
/*画面端からの隙間を調整*/
/*左縦バナー画像*/
#t_left {
margin:10px;
left:0px;
background: url(http://image.rakuten.co.jp/SHOP-URL/cabinet/03394596/imgrc0072517243.gif) repeat-y scroll; /*hoge.jpgを画像のパスに変更*/
z-index:0;
}

div#leftbunner a {
display: block;
width: 100%;
max-width: 110px;
height: 9000px;/*画像サイズ*/
z-index:0;
}

}
@media screen and (min-width:0px) and (max-width:1300px){
.tban {
list-style:none;
position: absolute;
visibility:hidden; /*消したい時はhiddenに変更*/

}
}


html, body {
height: 100%;
margin: 0;
padding: 0;
}
.tab_ban {
width: 80px;/* 最初に表示されるバナーの幅 */
height: 200px;/* バナーの高さ */
position: fixed !important;/* バナーを固定します */
position: absolute;
right: 0;/* 右から0pxの位置に指定 */
}
.tab_ban a {/* リンクするエリアをバナー全体に広げる設定 */
display: block;
width: 100%;
height: 100%;
}
.tab_ban:hover {/* カーソルが乗った時の動きを指定 */
width: 400px;/* バナーが伸びた時の幅 */

/* 以下アニメーションの設定 */

-webkit-transition: width ease-in-out 0.5s;
-moz-transition: width ease-in-out 0.5s;
-ms-transition: width ease-in-out 0.5s;
-o-transition: width ease-in-out 0.5s;
transition: width ease-in-out 0.5s;
}
.tab_ban a:hover {
width: 200px\9;
}
#tab01 {
background: url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0068728349.jpg) 0 0 no-repeat;
bottom: 50px;
}
#tab02 {
background: url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0070825771.jpg) 0 0 no-repeat;
bottom: 250px;
}
#tab03 {
background: url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0070825553.jpg) 0 0 no-repeat;
bottom: 450px;
}
#tab04 {
background: url(http://image.rakuten.co.jp/SHOP-URL/cabinet/02384865/imgrc0070825553.jpg) 0 0 no-repeat;
bottom: 650px;
}
</style>


<ul>
<!--左縦バナーURL-->
<li class="tban" id="t_left"><div id="leftbunner"><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a></div></li>


<div id="tab01" class="tab_ban"><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a>
<!-- /#tab1.tab_ban --></div>
<div id="tab02" class="tab_ban"><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a>
<!-- /#tab2.tab_ban --></div>
<div id="tab03" class="tab_ban"><a href="http://item.rakuten.co.jp/SHOP-URL/ITEM-URL/"></a>

<!-- /#tab3.tab_ban -->


</div>


<!--★縦バナー ここまで★-->
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2016/07/11 22:40
ECマスターズの田中です。

いただいたHTMLソースの場合、
スタイルシートにある .tban への規則が、縦バナー左右共通の設定、
スタイルシートに………(省略)………
  • 返信者:非公開(質問者)
  • 2016/07/18 13:20
ありがとうございます。
早速やってみたところ、右バナーに設置はできたのですが、縦バナー1個のみ表示で左縦バナーのように
つながってきません。(repeat-………(省略)………
  • 返信者:非公開
  • 2016/07/19 10:16
ECマスターズの田中です。

>縦バナー1個のみ表示で左縦バナーのように
>つながってきません。(repeat-y scrollとついています。)

………(省略)………
このフォーラムへの質問は終了しました