スマホ固定CTAボタンプラグイン 操作マニュアル

このプラグインは、スマートフォン表示時に画面下部へ
「HOME」「お問い合わせ」「電話」「任意ボタン」などのボタンを固定表示できるWordPressプラグインです。

ボタンの表示パターン、文字・アイコン表示、背景色、文字色、リンク先、電話番号などを管理画面から設定できます。

1. プラグインの概要

スマホ固定CTAボタンプラグインを使うと、スマートフォンでホームページを見ているユーザーに対して、
画面下部に問い合わせボタンや電話ボタンを常時表示できます。

スマホユーザーがすぐに行動できる導線を作れるため、問い合わせ、電話、予約、LINE誘導、アクセスページへの誘導などに役立ちます。

2. 主な機能

  • スマホ画面下部に固定ボタンを表示
  • HOME・お問い合わせ・電話ボタンを表示可能
  • 任意ボタンを最大5個まで追加可能
  • 表示パターンを選択可能
  • 文字のみ・アイコンのみ・アイコン＋文字の表示切り替え
  • 内蔵SVGアイコンを選択可能
  • Font Awesomeクラスの入力に対応
  • 絵文字や文字アイコンにも対応
  • ボタンごとに背景色・文字色を変更可能
  • 電話番号を入力すると、自動で電話発信用リンクに変換
  • スマートフォンのみ表示

3. インストール方法

  1. WordPress管理画面にログインします。
  2. 左メニューの「プラグイン」から「新規追加」をクリックします。
  3. 「プラグインのアップロード」をクリックします。
  4. プラグインのZIPファイルを選択し、「今すぐインストール」をクリックします。
  5. インストールが完了したら、「有効化」をクリックします。

プラグインを有効化すると、管理画面の左メニューまたは設定メニュー内に
「スマホ固定CTAボタン」の設定画面が表示されます。

4. 設定画面の開き方

WordPress管理画面から、以下の順番で設定画面を開きます。

設定 → スマホ固定CTAボタン

この画面で、表示するボタン、リンク先、電話番号、色、アイコンなどを設定できます。

5. 表示パターンの設定

表示パターンでは、スマホ下部に表示するボタンの組み合わせを選択できます。

お問い合わせ + 電話 お問い合わせボタンと電話ボタンを表示します。
HOME + お問い合わせ + 電話 HOME、お問い合わせ、電話の3つのボタンを表示します。
お問い合わせのみ お問い合わせボタンだけを表示します。
電話のみ 電話ボタンだけを表示します。
HOMEのみ HOMEボタンだけを表示します。
任意ボタンのみ 任意で追加したボタンだけを表示します。
HOME + お問い合わせ + 電話 + 任意ボタン 基本ボタンに加えて、任意ボタンも表示します。

6. 表示方法の設定

ボタンの表示方法は、以下から選択できます。

文字のみ 「HOME」「お問い合わせ」「電話」など、文字だけを表示します。
アイコンのみ アイコンだけを表示します。シンプルな見た目にしたい場合に向いています。
アイコン + 文字 アイコンと文字の両方を表示します。分かりやすさを重視する場合におすすめです。

初めて使う場合は、「アイコン + 文字」がおすすめです。
ユーザーがボタンの意味を理解しやすくなります。

7. HOMEボタンの設定

HOMEボタンでは、トップページや任意のページへ移動するリンクを設定できます。

表示名 ボタンに表示する文字を入力します。例：HOME、トップ、ホーム
URL リンク先URLを入力します。例：/ または https://example.com/
アイコン 内蔵SVG、Font Awesome、文字・絵文字から選択できます。
背景色 HOMEボタンの背景色を設定します。
文字色 HOMEボタンの文字色・アイコン色を設定します。

8. お問い合わせボタンの設定

お問い合わせボタンでは、お問い合わせフォームや予約フォームなどへのリンクを設定できます。

表示名 ボタンに表示する文字を入力します。例：お問い合わせ、相談する、予約する
URL お問い合わせページのURLを入力します。例：/contact/
アイコン 封筒、コメント、紙飛行機などのアイコンを選択できます。
背景色 お問い合わせボタンの背景色を設定します。
文字色 お問い合わせボタンの文字色・アイコン色を設定します。

9. 電話ボタンの設定

電話ボタンでは、電話番号を入力することで、スマートフォンからそのまま電話をかけられるボタンを表示できます。

表示名 ボタンに表示する文字を入力します。例：電話、今すぐ電話、TEL
電話番号 電話番号を入力します。例：03-1234-5678
アイコン 電話、スマホ、受話器などのアイコンを選択できます。
背景色 電話ボタンの背景色を設定します。
文字色 電話ボタンの文字色・アイコン色を設定します。

電話番号はハイフンありでも入力できます。
表示時には自動で電話発信用のリンクとして処理されます。

10. 任意ボタンの設定

任意ボタンでは、HOME・お問い合わせ・電話以外のボタンを追加できます。
最大5個まで設定できます。

例えば、以下のようなボタンを追加できます。

  • LINE
  • 予約
  • 料金表
  • アクセス
  • 資料請求
  • 採用情報
  • 営業時間
このボタンを表示する チェックを入れると、その任意ボタンが表示されます。
表示名 ボタンに表示する文字を入力します。例：LINE、予約、アクセス
URL リンク先URLを入力します。例：/access/、https://example.com/
アイコン 内蔵SVG、Font Awesome、文字・絵文字から選択できます。
背景色 任意ボタンの背景色を設定します。
文字色 任意ボタンの文字色・アイコン色を設定します。
別タブで開く 外部サイトやLINEなどへ移動する場合に使用します。

11. アイコンの設定

アイコンは、以下の3種類から選択できます。

内蔵SVG プラグインにあらかじめ用意されているアイコンを使用します。通常はこちらがおすすめです。
Font Awesome Font Awesomeのクラス名を入力してアイコンを表示します。
文字・絵文字 任意の文字や絵文字をアイコンとして表示できます。

内蔵SVGについて

内蔵SVGは、外部サービスに依存せずに表示できるアイコンです。
追加設定なしで使えるため、通常は内蔵SVGをおすすめします。

Font Awesomeを使う場合

Font Awesomeを使う場合は、アイコンのクラス名を入力します。

入力例：

  • fa-solid fa-house
  • fa-solid fa-envelope
  • fa-solid fa-phone
  • fa-solid fa-calendar-days
  • fa-solid fa-location-dot

Font Awesomeが表示されない場合は、設定画面で「Font Awesomeを読み込む」が有効になっているか確認してください。

文字・絵文字を使う場合

文字・絵文字を使う場合は、好きな記号や絵文字を入力できます。

入力例：

  • ☎
  • ✉
  • 🏠
  • 📅
  • 📍

12. 色の設定

各ボタンごとに、背景色と文字色を設定できます。

色を変更することで、サイトのデザインに合わせたスマホ固定ボタンを作成できます。

背景色 ボタンの背景色を設定します。
文字色 ボタン内の文字色とアイコン色を設定します。

おすすめは、電話ボタンを目立つ色、お問い合わせボタンをサイトのメインカラーにする設定です。

13. ボタンの表示確認

  1. 設定画面で必要な項目を入力します。
  2. 「変更を保存」をクリックします。
  3. スマートフォン、またはブラウザのスマホ表示でページを確認します。
  4. 画面下部に固定ボタンが表示されているか確認します。

このプラグインはスマートフォン向けの下部固定ボタンです。
パソコン画面では表示されない設定になっている場合があります。

14. よくある質問

Q. パソコンでボタンが表示されません。

このプラグインはスマートフォンでの表示を想定しています。
パソコンでは表示されない設定になっている場合があります。
スマートフォン実機、またはブラウザのスマホ表示で確認してください。

Q. 電話ボタンを押しても電話がかかりません。

パソコンでは電話発信できない場合があります。
スマートフォンで確認してください。
また、電話番号が正しく入力されているか確認してください。

Q. Font Awesomeのアイコンが表示されません。

Font Awesomeを使う場合は、クラス名が正しいか確認してください。
また、設定画面で「Font Awesomeを読み込む」が有効になっているか確認してください。

Q. 任意ボタンが表示されません。

任意ボタンを表示するには、「このボタンを表示する」にチェックを入れる必要があります。
また、表示名とURLが入力されているか確認してください。

Q. ボタンがフッターの内容に重なります。

スマホ下部に固定表示する仕様のため、ページ最下部の内容と重なる場合があります。
必要に応じて、テーマ側のスマホ用CSSでフッター下部に余白を追加してください。

15. おすすめの設定例

士業・行政書士サイトの場合

  • 表示パターン：HOME + お問い合わせ + 電話
  • 表示方法：アイコン + 文字
  • お問い合わせボタン：緑系
  • 電話ボタン：オレンジ系
  • HOMEボタン：青系

整体院・美容室・サロンの場合

  • 表示パターン：お問い合わせ + 電話 + 任意ボタン
  • 任意ボタン：予約、LINE、アクセス
  • 表示方法：アイコン + 文字

会社サイト・工務店サイトの場合

  • 表示パターン：HOME + お問い合わせ + 電話 + 任意ボタン
  • 任意ボタン：施工実績、資料請求、アクセス
  • 表示方法：アイコン + 文字

16. まとめ

スマホ固定CTAボタンプラグインを使うことで、スマートフォン閲覧者に対して、
電話・お問い合わせ・予約・LINE・アクセスなどの重要な導線を分かりやすく表示できます。

ホームページを見たユーザーがすぐに行動できるようになるため、
問い合わせ数の改善や予約導線の強化に役立ちます。