追従CTAボタンの設定方法
追従CTAボタンの設定方法
> 設定場所: 外観 → カスタマイズ → 「ページ下の追従CTAボタン」
> カスタマイザーで開く: 追従CTAパネルを開く
> このページのURL: https://lite-word.com/manual/follow-cta/
ページ下部に固定表示される追従型CTAボタン。スクロールしても画面下に追従し、お問い合わせや申し込みへの導線として機能する。パターン選択・ページタイプ別の出し分け・ページ単位での上書きが可能。
設定手順
追従CTAボタンを設置する
- 外観 → カスタマイズ を開く
- 「ページ下の追従CTAボタン」 パネルを開く
- 「パターンの選択」 で表示パターンを選ぶ（全ページ共通、またはページタイプ別）
- 選んだパターンのセクション（例：「 - パターン１の設定」）を開く
- CTAボタンのテキスト・URL・色などを設定する
- 「公開」 をクリックして保存
特定のページだけ表示/非表示にする
- 該当ページの編集画面を開く
- 「ページ独自のデザイン設定」 メタボックスを探す
- 「追従CTAボタン」（
follow_bottom_cta_ptn）でパターンを選択する - 「非表示」を選べば、そのページだけCTAを非表示にできる
- ページを更新して保存
パターン選択
| 選択肢 | 説明 |
|---|---|
| パターン1（ptn_1） | CTAボタンデザイン1 |
| パターン2（ptn_2） | CTAボタンデザイン2 |
| 非表示（none） | 追従CTAを表示しない |
ページタイプ別の設定
カスタマイザーの「パターンの選択」では、以下のページタイプごとに異なるパターンを指定できる。
| ページタイプ | 説明 |
|---|---|
| 全ページ共通 | サイト全体のデフォルト設定 |
| 固定ページ | 固定ページのみに適用 |
| 投稿ページ | 投稿（ブログ記事）のみに適用 |
| アーカイブページ | カテゴリ一覧・タグ一覧などに適用 |
> 優先順位: ページ単位の設定（メタボックス） ＞ ページタイプ別設定 ＞ 全ページ共通設定
パターン1の設定項目
リンクボタン（最大2つ）
各ボタンに以下の設定がある：
| 設定名 | 型 | 説明 |
|---|---|---|
| 表示切替 | radio | 表示する / 表示しない |
| 表示テキスト | text | ボタンに表示する文字（例：「お問い合わせ」） |
| アイコン | select | ボタンのアイコン |
| リンク先URL | text | クリック先のURL |
| 背景色 | color | ボタンの背景カラー |
| 文字の色 | color | ボタンの文字色 |
レスポンシブ設定
| 設定名 | 選択肢 | 説明 |
|---|---|---|
| 表示デバイス | スマホとPCの両方で表示 | デフォルト。全デバイスで表示 |
| スマホの時のみ表示 | 画面幅1080px以下でのみ表示 | |
| PCの時のみ表示 | 画面幅1081px以上でのみ表示 |
デザイン共通設定
| 設定名 | 型 | 説明 |
|---|---|---|
| フォントの種類 | select | フォントファミリー |
| フォントの太さ | select | フォントウェイト |
| 背景の色 | color | CTA帯全体の背景色 |
| 背景の透明度 | range | 背景の透過率 |
| リンクボタンの角丸 | range | ボタンの角丸（px） |
スマホだけに表示する方法
パターン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-15 10:00