CTAボタンの設定方法
最終更新: 2026-03-15
CTAボタンの設定方法
> 設定場所: 外観 → カスタマイズ → 「デザイン設定 - ヘッダー」→ 該当パターンのセクション →「アクションボタン」
> カスタマイザーで開く: パターン1のCTA設定を開く
> このページのURL: https://lite-word.com/manual/header-cta/
ヘッダー右側に表示するコンバージョン用ボタン（お問い合わせ・予約・資料請求など）を設定する。パターン1〜4, 6で使用可能（パターン5はピックアップメニューで代替）。
設定手順
- 外観 → カスタマイズ を開く
- 「デザイン設定 - ヘッダー」 → 使用中パターンのセクションを開く
- 「アクションボタン」 を見つける
- 表示切替を 「ON」 にする
- 「テキスト」 にボタンの文字を入力（例：「お問い合わせ」「資料請求」）
- 「リンク（URL）」 にクリック先のページURLを入力
- 必要に応じて色・角丸・外枠を調整
- 「公開」 で保存
設定項目一覧
| ラベル | 型 | デフォルト | 説明 |
|---|---|---|---|
| 表示切替 | radio | パターン依存 | ON / OFF |
| テキスト | text | パターン依存 | ボタンに表示する文字 |
| リンク（URL） | text | # | クリック先のURL |
| 背景色 | color | var(--color-main) |
ボタンの背景色 |
| テキスト色 | color | #ffffff | ボタンの文字色 |
| 外枠の色 | color | var(--color-main) |
ボーダーの色 |
| 外枠の太さ | range | 0 | 0〜10px |
| 角丸の加減 | range | パターン依存 | 0〜100px（0=四角、100=丸型） |
マウスを当てた時の色
| ラベル | 型 | デフォルト | 説明 |
|---|---|---|---|
| 背景色 | color | 未指定 | ホバー時の背景色 |
| テキスト色 | color | 未指定 | ホバー時の文字色 |
| 外枠の色 | color | 未指定 | ホバー時のボーダー色 |
パターン別のデフォルト
| パターン | 表示 | テキスト | 角丸 | 外枠 |
|---|---|---|---|---|
| 1 | OFF | ご予約はこちら | 0px（四角） | 0px |
| 2 | ON | ご予約はこちら | 0px（四角） | 0px |
| 3 | ON | ご予約はこちら | 0px（四角） | 0px |
| 4 | ON | お問い合わせ | 100px（丸型） | 1px |
| 5 | — | CTAボタンなし | — | — |
| 6 | ON | 資料ダウンロード | 100px（丸型） | 0px |
よくある質問
Q: ボタンの色をページごとに変えたい
A: ページ編集画面 →「ページ独自のデザイン設定」→「CTAボタン背景色」で、そのページだけCTAの色を変更できる。
Q: スマホでCTAボタンが見えない
A: ヘッダーのCTAボタンはPC表示のみ。スマホではドロワー（ハンバーガーメニュー）内に移動する。スマホ画面で常にCTAを出したい場合は、パターン5のピックアップメニュー（レスポンシブ: スマホ+PC）を使うか、フッター固定CTAを検討する。
Q: ボタンを枠線だけのデザイン（ゴーストボタン）にしたい
A: 背景色を透明にし、外枠の太さを1〜2px、外枠の色を好みの色に設定する。テキスト色も外枠と同じ色にすると統一感が出る。
最終更新: 2026-03-15 04:30