フローティングバナーを実装する
フローティングバナーとは？
フローティングバナーとは、ウェブサイトの特定の場所に固定され、ユーザーがページをスクロールしても表示され続けるバナーのことです。
”お問い合わせはこちら！”や”今すぐ登録！”等アピールしたい情報を常に画面上に表示させる事ができます。今回はこのフローティングバナーをページ内に実装します。
この記事の右下に実装してあります。
フローティングバナーのhtmlコードをヘッダーに追加
⚫︎ギザギザ部分とボックスを作成
この投稿記事の右下にあるようなバナーを作成してみる。ボックス左上のギザギザのオブジェクトとボックスを作成する。とりあえずギザギザをつけてみたが不要ならこのコードは省略してもOK。
<div class="giza2"><img src="画像のURL" alt="" /></div><!--ギザギザのシェイプ-->
<div class="float_banner" style="background-color: #fff; border-radius: 10px; border: 5px solid #ffd04f;"><!--ボックス-->
<p style="padding: 20px; text-align: center; margin: 0px;"><span style="font-size: 2rem; font-weight: bold; color: ##ff4425;">フローティングバナー</span>
<br />
<span style="color: #2b2b2b; font-size: 15px;">こんな感じでバナーを表示</span>
</p>
</div>各CSSのクラス”giza2”と”float_banner”はこの後設定する。
２つのCSSクラスを設定する
⚫︎前項のCSS（”giza2”と”float_banner”）クラスを作成
メニューから追加CSSへ下記のCSSを追加する。
画面上の位置調整は”right”や”bottom”で調節する。
.float_banner{
position:fixed; /*fixed指定で追従させる*/
z-index:1;//重なりを調整
right:20px;
bottom:75px;
}
.giza2{
z-index: 2;//重なりを調整
right: 262px;
bottom: 191px;
position: fixed;
width: 8%;//画像サイズは好みで調整
}