追従CTAボタンの設定方法
追従CTAボタンの設定方法
> こんな質問に答えます:
> - 画面下にずっと表示されるボタンを設定したい
> - 追従CTAの設定方法は？
> - スマホで下に固定されるボタンはどこで設定するの？
> - 特定のページだけ追従ボタンを出したい
> 別名・よくある呼び方: 固定ボタン、下にずっと出てるボタン、スクロールしても消えないボタン、追従ボタン、フローティングCTA
> 設定場所: 外観 → カスタマイズ → 「ページ下の追従CTAボタン」
> カスタマイザーで開く: 追従CTAパネルを開く
> このページのURL: https://lite-word.com/manual/follow-cta/
ページ下部に固定表示される追従型CTAボタン。スクロールしても画面下に追従し、お問い合わせや申し込みへの導線として機能する。パターン選択・ページタイプ別の出し分け・ページ単位での上書きが可能。
設定手順
追従CTAボタンを設置する
- 外観 → カスタマイズ を開く
- 「ページ下の追従CTAボタン」 パネルを開く
- 「パターンの選択」 で表示パターンを選ぶ（全ページ共通、またはページタイプ別）
- 選んだパターンのセクション（例：「 - パターン１の設定」）を開く
- CTAボタンのテキスト・URL・色などを設定する
- 「公開」 をクリックして保存
特定のページだけ表示/非表示にする
- 該当ページの編集画面を開く
- 「ページ独自のデザイン設定」 メタボックスを探す
- 「追従CTAボタン」 でパターンを選択する
- 「非表示」を選べば、そのページだけCTAを非表示にできる
- ページを更新して保存
パターン選択
| 選択肢 | 説明 |
|---|---|
| パターン1 | シンプルな追従CTAバー。リンクボタン2つまで + レスポンシブ設定 |
| パターン2 | 情報量の多い追従CTA。PC時はロゴ + ポイント4つ + 電話番号 + ボタン。スマホ時は2ボタン構成。士業・クリニック向け |
| 非表示 | 追従CTAを表示しない |
ページタイプ別の設定
カスタマイザーの「パターンの選択」では、以下のページタイプごとに異なるパターンを指定できる。
| ページタイプ | 説明 |
|---|---|
| 全ページ共通 | サイト全体のデフォルト設定 |
| 固定ページ | 固定ページのみに適用 |
| 投稿ページ | 投稿（ブログ記事）のみに適用 |
| アーカイブページ | カテゴリ一覧・タグ一覧などに適用 |
> 優先順位: ページ単位の設定（メタボックス） ＞ ページタイプ別設定 ＞ 全ページ共通設定
パターン1の設定項目
リンクボタン（最大2つ）
各ボタンに以下の設定がある：
| 設定名 | 型 | 説明 |
|---|---|---|
| 表示切替 | radio | 表示する / 表示しない |
| 表示テキスト | text | ボタンに表示する文字（例：「お問い合わせ」） |
| アイコン | select | ボタンのアイコン |
| リンク先URL | text | クリック先のURL |
| 背景色 | color | ボタンの背景カラー |
| 文字の色 | color | ボタンの文字色 |
レスポンシブ設定
| 設定名 | 選択肢 | 説明 |
|---|---|---|
| 表示デバイス | スマホとPCの両方で表示 | デフォルト。全デバイスで表示 |
| スマホの時のみ表示 | 画面幅1080px以下でのみ表示 | |
| PCの時のみ表示 | 画面幅1081px以上でのみ表示 |
デザイン共通設定
| 設定名 | 型 | 説明 |
|---|---|---|
| フォントの種類 | select | フォントファミリー |
| フォントの太さ | select | フォントウェイト |
| 背景の色 | color | CTA帯全体の背景色 |
| 背景の透明度 | range | 背景の透過率 |
| リンクボタンの角丸 | range | ボタンの角丸（px） |
パターン2の設定項目
パターン2はPC用とスマホ用で別セクションになっている。
PC用セクション
| 設定名 | 型 | 説明 |
|---|---|---|
| ロゴ画像 | media | CTA帯に表示するロゴ |
| ポイントテキスト 1〜4 | text | ロゴ横に表示するセールスポイント（例：「年間実績500件」） |
| 電話番号 | text | 電話番号の表示 |
| 電話補足テキスト | text | 例：「受付時間 9:00〜18:00」 |
| CTAボタン | — | テキスト・URL・色の設定 |
スマホ用セクション
| 設定名 | 型 | 説明 |
|---|---|---|
| リンクボタン 1〜2 | — | パターン1と同じ構成（テキスト・アイコン・URL・色） |
> ヒント: パターン2は情報量が多いため、士業・クリニック・不動産など「信頼感の訴求」が重要な業種で効果的。
スマホだけに表示する方法
パターン1の場合: カスタマイザーの「レスポンシブ設定」→「表示デバイス」で「スマホの時のみ表示」を選ぶだけでOK。CSSの追加は不要。
パターン2の場合: パターン2はPC用とスマホ用が別セクションで設定されている。PC用のボタンテキストやURLを空にすれば、実質スマホのみ表示になる。
FAQ
Q. 追従CTAがページに表示されない
A. 「パターンの選択」で「非表示（none）」になっていないか確認する。また、ページ編集画面の「ページ独自のデザイン設定」で個別に非表示にされている可能性もある。
Q. LPだけ追従CTAを出したい
A. 全ページ共通を「非表示」にした上で、LPとして使う固定ページの編集画面 →「ページ独自のデザイン設定」→ 追従CTAのパターンを「パターン1」または「パターン2」に設定する。
Q. ボタンの色を変えたのに反映されない
A. カスタマイザーで設定後、「公開」ボタンを押して保存しているか確認する。キャッシュプラグインを使用している場合はキャッシュクリアも試す。
Q. PCでは非表示にしたい
A. パターン1の場合は「レスポンシブ設定」→「スマホの時のみ表示」を選ぶ。パターン2の場合はPC用セクションの設定を空にする。
Q. パターン1とパターン2の違いは？
A. パターン1はシンプルなボタン2つ（アイコン付き）。パターン2はロゴ+ポイントテキスト+電話番号+ボタンを含む多機能型で、PC用とスマホ用を別々にデザインできる。
関連ページ
最終更新: 2026-03-21