PC版　飛び出す？バナー掲載方法について

Question

お世話になります。
本日、楽天の担当ECから連絡が入り
現在行われているクーポンキャンペーンバナー掲載について
クリック率の高い掲載方法のアドバイスがありました。
しかし、担当ECもタグについて詳細が分からないとの事でした。

下記店舗で使用されています。（クーポン掲載　4/13　9：59まで）
http://www.rakuten.co.jp/g-click/

タグはどのように入れているか分かりますでしょうか？

Answer

ECマスターズの田中です。

例えば、画面右端に固定されており、
マウスを当てると100px分左に伸びるバナーは
下記のようなタグを、ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
挿入することで、設置することができます。

===== この下の行から ================
（バナーの内容）

#sidefixedbanner {
top: 100px; /* ←数字を増やして、上からの位置を調整できます */
right: -100px; /* 
↑画像の隠したい部分の長さを指定してください。
左端に固定する場合は、rightをleftに変更してください。 */
z-index: 10;
display: block;
width: auto;
position: fixed;
transition: 0.5s; /* ←数字を減らすと、動きが速くなります。 */
}

#sidefixedbanner:hover{
right: 0px;
transition: 0.5s; /* ←数字を減らすと、動きが速くなります。 */
}

===== この上の行まで ================

上記タグのID（sidefixedbannerの部分、計３箇所）を変えた上で、
topやrightの値を変えたり、rightをleftやbottomに変えたり、topをbottomに変えたりすることで、
位置調整や、伸縮する方向の変更を加えつつ複数設置することができます。

Answer

有難うございました。
早速使用してみます

Answer

ECマスターズの田中です。

当質問にていただいたような、
画面に固定されるバナーを簡単に設置できる
「バナー設置君」を作成いたしましたので、
全体公開前に、当質問への返信として、
先行してお知らせさせていただきます。

HTMLやスタイルシートを書くことなく、
完成したHTMLをヘッダー・フッター・レフトナビに貼り付けるだけで
固定バナーを簡単に設置することができます。

オプションを詳しく設定することで、
マウスを乗せると動いたり、半透明になったり、
IDを変えることで複数設置することも可能です。

もし、新しいバナーに入れ替える機会などありましたら、
ぜひ、下記URLより「バナー設置君」をお試しいただき、
わかりづらい点やご希望などございましたら
お知らせいただければと思います。
https://ec-masters.club/fwd3/fixedbannerkun

PC版 飛び出す？バナー掲載方法について

PC版　飛び出す？バナー掲載方法について