フッターにフローティングバナーを設置する方法

スマホ画面の下部（フッター）に常に表示される「フローティングバナー」は、ユーザーがページをスクロールしても消えないため、お問い合わせボタンやメニューリンクなどを配置するのに便利です。
この記事では、WordPressテーマLightningで設置する方法も紹介します。

1 フローティングバナーのHTML構造

まず、フローティングバナーのHTML構造を作成します。
このコードは 外観 → ウィジェット の「カスタムHTML」や「フッター」ウィジェットに貼ってください。

※Cocoonはデフォルトでフローティングバナーの設置がありますので、設置不要です。

<div class="floating-footer-menu">
  <ul>
    <li><a href="#home">ホーム</a></li>
    <li><a href="#about">会社概要</a></li>
    <li><a href="#contact">お問い合わせ</a></li>
  </ul>
</div>

補足:
- ページへのアクセスだけでなく、電話番号のバナーも可能です。

<li><a href="tel:0120123456">Phone</a></li>

- メニューの文字だけでなく、アイコンも設置可能です。

<ul>
  <li><a href="tel:0120-123-456"><i class="fa-solid fa-phone"></i><span>電話</span></a></li>
  <li><a href="/contact/"><i class="fa-regular fa-envelope"></i><span>メール</span></a></li>
  <li><a href="#access"><i class="fa-solid fa-map-location-dot"></i><span>アクセス</span></a></li>
</ul>

2 Lightningでの設置場所

Lightningはフッター上部ウィジェットに配置

3 汎用CSS

スマホ下部に固定するために、CSSで位置とデザインを指定します。

/* -----------------------------
 * フッターフローティングバナー
 *----------------------------- */

/* ul, li のリセット（テーマ干渉対策） */
.floating-footer-menu ul, /** フッターメニュー内のulにリセット適用 */
.floating-footer-menu li { /** フッターメニュー内のliにリセット適用 */
  margin: 0; /** デフォルトの外側余白を消去（テーマの干渉防止） */
  padding: 0; /** デフォルトの内側余白を消去 */
  list-style: none; /** リストマーカー（・など）を非表示にする */
}

/* 画面下部に固定されるバナー全体の設定 */
.floating-footer-menu { /** フッターフローティングメニュー全体のブロック */
  position: fixed; /** スクロールしても常に画面下に固定表示 */
  bottom: 0; /** 画面の最下部に配置 */
  left: 0; /** 画面の左端に配置 */
  right: 0; /** 右端まで幅を広げる（全幅表示） */
  background: #0073aa; /** WordPress公式カラーのブルーを背景に設定 */
  box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /** 上方向に薄い影を付けて浮き上がり感を演出 */
  z-index: 9999; /** 他の要素よりも最前面に表示 */
  transition: transform 0.3s ease; /** 出入り時のアニメーションを滑らかにする準備 */
}

/* バナー内のul（リスト）全体のレイアウト設定 */
.floating-footer-menu ul { /** メニュー内のリスト全体 */
  display: flex; /** liを横並びに並べる */
  justify-content: space-around; /** ボタン同士を均等に配置する */
  align-items: center; /** 縦方向に中央揃え */
  margin: 0; /** 外側余白をなくす（レイアウトずれ防止） */
  padding: 10px 0; /** 上下に10pxの内側余白を確保（高さ調整） */
}

/* 各バナー項目(li)のレイアウト */
.floating-footer-menu ul li { /** 各メニュー項目（ボタン単位） */
  flex: 1; /** 各ボタンを均等幅で分割配置する */
  text-align: center; /** テキストとアイコンを中央寄せにする */
}

/* 各リンク(aタグ)のデザイン設定 */
.floating-footer-menu ul li a { /** 各ボタン内のリンク */
  color: #fff; /** テキストとアイコンの色を白に設定 */
  text-decoration: none; /** リンク下線を削除 */
  font-weight: 600; /** やや太字にして強調 */
  font-size: 14px; /** スマホで見やすい文字サイズに調整 */
  display: block; /** ブロック要素化でクリック範囲を広げる */
  transition: background 0.3s ease, opacity 0.3s ease; /** ホバー時の背景と透明度変化を滑らかに */
}

/* アイコンとテキストの配置 */
.floating-footer-menu ul li a i { /** Font Awesomeのアイコン部分 */
  display: block; /** ブロック化して改行（テキストの上に配置） */
  font-size: 20px; /** アイコンを大きめに表示 */
  margin-bottom: 3px; /** アイコンと文字の間に少し余白を設ける */
}

/* ホバー時（マウスオーバー時）の効果 */
.floating-footer-menu ul li a:hover { /** リンクにマウスを乗せたとき */
  background: rgba(255,255,255,0.2); /** 背景に半透明の白を重ねて押下感を出す */
  opacity: 0.9; /** 少しだけ透過してアクティブ感を出す */
}

/* PCサイズ（769px以上）の画面では非表示にする */
@media screen and (min-width: 769px) { /** レスポンシブ設定（タブレット以上） */
  .floating-footer-menu { display: none; } /** PC画面では非表示にしてスマホ限定表示 */
}

4 完成イメージ

スマホで画面下に常に表示される3ボタンバナーが完成します。
ボタンの数を増やす場合は、<li></li>を追加するだけです。

たとえば：

<ul>
  <li><a href="#news">最新情報</a></li>
  <li><a href="#service">サービス</a></li>
  <li><a href="#contact">お問い合わせ</a></li>
  <li><a href="#access">アクセス</a></li>
</ul>

5 まとめ

• HTMLをフッターまたはウィジェットに追加
• CSSで固定位置・配色を設定
• LightningやCocoonで簡単に実装可能

ユーザーがどのページにいても、すぐに「HOME」や「お問い合わせ」にアクセスできるようになります。
ぜひあなたのサイトにも導入してみてください！