ヘルプ
追従するフローティングバナーの作り方(コード記載!コピペOK)

追従するフローティングバナーの作り方(コード記載!コピペOK)

最終更新日時

フローティングバナーとは画面下部に表示され、スクロールに追従するバナーのことです。

常にユーザーの目に留まるのでクーポンや宣伝したい情報を見せるのに非常に有効なバナーになります。

今回はそのフローティングバナーの作り方を解説します。

フローティングバナーの作り方

以下の画像でフローティングバナーを作ってみます。

html

以下のコードを<body> タグ内に設置します。

画像は実際に表示したいバナーに差し替えてください

<body>
  <div class="floating-banner">
    <img src="https://xs695757.xsrv.jp/wp-content/uploads/2021/10/300x280.png"/>
  </div>
</body>

 

CSS

.floating-banner {
  position: fixed;
  z-index: 999;
  bottom: 16px;
  right: 16px;
}
そして、このCSSをコピペすればOKです。

 

バナーに影をつけたい

CSSにbox-shadowを設定しましょう

.floating-banner {
  position: fixed;
  z-index: 999;
  bottom: 16px;
  right: 16px;
  box-shadow: 003pxrgba(0, 0, 0, 0.9); // この1行を追加
}

 

バナーに非表示にするボタンを付ける

ユーザーがバナーをいつでも非表示にできるように非表示ボタンを付けてみましょう

html

<div class="floating-banner">
  <button class="banner-close">×</button>
  <img src="https://xs695757.xsrv.jp/wp-content/uploads/2021/10/300x280.png" />
</div>
<script>
  const el = document.querySelector(".banner-close");
  el.addEventListener("click", (e) => {
    e.target.parentElement.style.display="none";
  });
</script>

 

scriptタグを追加して、ボタンをクリックした時に display: none させています。

CSS

.banner-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 8px;
  border: none;
  background-color: #fff;
  cursor: pointer;
}

これで非表示にすることができました。

 

さて、これで一通りフローティングバナーの作成方法を解説しました。

実はこれをタグ一個追加するだけで簡単にサイトに設置するツールを作ってしまいました。

BannerKit(バナーキット)

こちらのツールを使えばCSSもjavascriptも書かなくてOK。サイトにタグを一個追加するだけでバナーが表示せることができちゃいます!

今なら無料で利用できるのでぜひ使ってみてください!

関連:バナー作成サービスBannerKit(バナーキット)をリリースしました

関連記事