メニュー
MENU
こんにちは、
ゲスト
さん
トップ
会員サイト
新着質問
新着回答
人気の質問
解決済
受付中
未回答
質問・返信の一覧
お気に入り
ニックネーム変更
E-mailアドレス変更
パスワード変更
ECマスターズ ツール
ログイン
TOP
楽天 右縦バナー設置について
文字サイズ
変更
小
中
大
解決済
楽天 右縦バナー設置について
相談者:非公開
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とついています。)
………(省略)………
このフォーラムへの質問は終了しました
このテーマに関連する質問をする
別のテーマで新規に質問する
質問を検索する
すべて
初心者・はじめて
楽天市場
Yahoo!ショッピング
Amazon.co.jp
Qoo10
au PAY マーケット
LINE活用・LSEG
RPP運用自動化ツール「RAT」
らくらくーぽん
最強配送ラベル(配送品質向上制度)
ポンパレモール
会員専用ツール
本店サイト
共通の送料込みライン
ツール設置・利用
ECステーション
海外進出
マッチング・コラボレーション
楽天ペイ
RPP攻略ツール情報交換
商品画像登録ガイドライン
ツール改善コミュニティ
RPA
業者営業情報・相談
システム導入支援
会計・経理相談
作業効率化
EC MASTERS LABS
パソコントラブル
その他
返信も検索対象にする
カテゴリーから探す
初心者・はじめて
楽天市場
Yahoo!ショッピング
Amazon.co.jp
Qoo10
au PAY マーケット
LINE活用・LSEG
RPP運用自動化ツール「RAT」
らくらくーぽん
最強配送ラベル(配送品質向上制度)
ポンパレモール
会員専用ツール
本店サイト
共通の送料込みライン
ツール設置・利用
ECステーション
海外進出
マッチング・コラボレーション
楽天ペイ
RPP攻略ツール情報交換
商品画像登録ガイドライン
ツール改善コミュニティ
RPA
業者営業情報・相談
システム導入支援
会計・経理相談
作業効率化
EC MASTERS LABS
パソコントラブル
その他