横に設置するバナー

Question

お世話になります。
以前にご紹介頂いていた気がするのですが、横に設置するバナーで、マウスオンでスルスルと伸びるバナーの設置方法（htmlとcss）をご教授ください。
よろしくお願いいたします。

Answer

ECマスターズの田中です。

ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）に
下記HTMLタグを挿入してご利用ください。

===== この下の行から ================

a.floating{
position: fixed;
top: 飛び出す前の画面上端からの距離px;
left: 飛び出す前の画面左端からの距離px;
background: url(バナー画像URL) no-repeat;
width: バナー画像の横幅px;
height: バナー画像の高さpx;
transition: all 0.5s;
}
a.floating:hover{
top: 飛び出した後の画面上端からの距離px;
left: 飛び出した後の画面左端からの距離px;
}


===== この上の行まで ================
※バナー画像URL、リンク先URLは、実際のURLに置き換えてください。
※飛び出す前（飛び出した後）の画面上（左）端からの距離、
　バナー画像の横幅（高さ）は、実際の半角数字に置き換えてください。
※画面下端につける場合はtopをbottomに、
　右端につける場合はleftをrightに変更してください。
※「a.floating:hover{」と「}」の中の属性は、必要な方だけご記載ください。
※文字数制限により、挿入が難しい場合は、
　外部CSSファイルにスタイルシートの内容を記載してご利用ください。
※複数設置される場合は、上記ソースをコピーして、
　クラス名（floating、３箇所に記載）を変えてご利用ください。

Answer

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