画面の右横にフローティングバナーを設置する方法

1 画面の右横にフローティングバナーを設置する方法

この記事では、画面の右端に常に表示される「フローティングバナー」をHTML＋CSSで設置する方法を解説します。
スクロールしても消えないため、お問い合わせ・LINE登録・キャンペーンバナーなどに最適です。

※使用するバナーはご自身で作ってみてください。

2 HTML構造を追加する

まずは、フローティングさせたいバナー部分のHTMLを追加します。
ウィジェットや固定ページに直接貼り付けてもOKです。

<!-- フローティングバナー -->
<div class="floating-banner">
  <a href="https://example.com/contact/">
    <img src="https://example.com/wp-content/uploads/banner.png" alt="お問い合わせはこちら">
  </a>
</div>

3 汎用CSS

次に、CSSで画面の右端に固定するスタイルを追加します。
テーマの追加CSSや style.css に追記してください。

/* -----------------------------
 * フローティングバナー
----------------------------- */
.floating-banner {
  position: fixed;        /* 画面に固定 */
  right: 15px;            /* 右端からの距離 */
  bottom: 280px;          /* 下端からの距離 */
  z-index: 9999;          /* 最前面に表示 */
  width: 160px;           /* バナーサイズ */
}

.floating-banner img {
  width: 100%;           /* 画像を親要素（バナー枠）の幅いっぱいに表示 */
  height: auto;          /* 画像の縦横比を保ったまま自動調整 */
  border-radius: 10px;   /* 角を10pxの半径で丸くする */
}

.floating-banner img:hover {
  transform: scale(1.02); /* ホバーで少し拡大 */
}

/* -----------------------------
 * 画面幅1280px以下では非表示
 * （小型PC・タブレット・スマホ向け）
----------------------------- */
@media only screen and (max-width: 1280px) {   
  .floating-banner {
    display: none;       /* バナーを非表示にする */
  }
}

4 完成イメージ

4.1 Lightningテーマのウィジェット

Lightningテーマの場合は、「フッター上部」ウィジェットにHTMLを貼り付ければ表示されます。

• 汎用テーマの場合は、フッターウィジェットにHTMLを貼り付けて試してください。
• Cocoonテーマはウィジェットや固定ページにHTMLを貼っても右横には表示されませんので注意してください。

右側に次のようなバナーが表示されます。
PC・スマホ両方で位置が固定され、ページをスクロールしても常に見える形になります。

5 まとめ

• HTML＋CSSだけで簡単に右側固定のフローティングバナーを作成できる
• 画面幅1281px以上のPCで表示され、1280px以下（小型PC・タブレット・スマホ）では自動的に非表示になるよう設定している

ちょっとした工夫で、問い合わせ率やクリック率がアップします。
ぜひあなたのサイトでも試してみてください。