フローティングボタンで常時表示されるCTA（お問い合わせ）を設置する方法

この記事では、スクロールに応じて表示されるフローティングCTAボタン（お問い合わせ・予約）を設置する方法を紹介します。

1 実装のポイント

Lightningテーマのフッター上部のウィジェットにHTMLを貼り付けCSSで指定すればフローティングボタンが画面右下に固定されます。スマホ（768px以下）では非表示にしています。

2 HTMLコード

<div class="floating-cta-wrapper">
  <a href="https://wordpress-tips.net/contact" class="floating-cta">お問い合わせ</a>
</div>
  

（例）

3 CSSコード

/* -------------------------
* フローティングCTA（画面に固定されるお問い合わせボタン）
---------------------------- */

/* CTA全体のラッパー（ボタンの位置を固定） */
.floating-cta-wrapper {
    position: fixed;   /* 画面に固定表示 */
    bottom: 30px;      /* 下から30pxの位置 */
    left: 30px;        /* 左から30pxの位置 */
    z-index: 9999;     /* 他の要素より前面に表示 */
}

/* 実際のボタンデザイン */
.floating-cta {
    background-color: #00aaff;             /* ボタン背景色 */
    color: #fff;                            /* 文字色を白に */
    padding: 15px 25px;                     /* ボタン内の余白（上下15px 左右25px） */
    border-radius: 50px;                    /* 丸みのあるボタン */
    text-decoration: none;                  /* リンクの下線を消す */
    font-weight: bold;                      /* 文字を太字に */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* 影を付けて浮き上がらせる */
}

/* ホバー時（マウスオーバー） */
.floating-cta:hover {
    background-color: #08cc; /* 背景色を少し変化 */
    color: #fff;              /* 文字色は白のまま */
}

/* -------------------------
* スマホ対応（768px以下）
* 画面幅が狭い場合はボタンを非表示
---------------------------- */
@media screen and (max-width: 768px) {
    .floating-cta-wrapper {
        display: none; /* ボタンを非表示にする */
    }
}
  

4 完成イメージ

Windowsの固定フッターバーの上にあるCTAボタン

5 まとめ

このコードを使えば、ユーザーがどのスクロール位置にいても、お問い合わせ・予約のCTAを常時表示できます。