MANUAL

CTAボックス管理システム
使い方マニュアル

CTAボックス管理システムは、お問い合わせ・無料相談・資料請求・電話・メールなどの導線を、
管理画面から簡単に作成し、ショートコードで表示できるWordPressプラグインです。

01

基本的な使い方

CTAボックスは、管理画面で文章・リンク・電話番号・メールアドレス・色・デザインを設定し、
固定ページや投稿にショートコードを貼ることで表示できます。

使用するショートコード

[cta_box]

  1. 管理画面の「CTAボックス管理」を開きます。
  2. 表示デザインを選びます。
  3. CTAの文章やお問い合わせ先を入力します。
  4. 背景色・文字色・ボタン色を設定します。
  5. 設定を保存します。
  6. 固定ページや投稿に [cta_box] を貼ります。

02

表示デザインを選ぶ

CTAボックス管理システムでは、用途に合わせて5種類のデザインを選べます。
デザインは管理画面のラジオボタンから変更できます。

シンプル中央寄せ

どんなサイトにも合わせやすい、基本的なCTAです。

左テキスト＋右ボタン

法人サイトや士業サイトのサービスページ下部に使いやすいデザインです。

カード型

白いカードで整理された、相談しやすい雰囲気のCTAです。

帯型

ページ途中や記事下で目立たせやすい、横長タイプのCTAです。

電話・メール・フォーム型

電話・メール・フォームの3つの導線を分かりやすく並べられます。

03

CTAの文章を設定する

管理画面の「CTAの文章」では、公開画面に表示する見出しや説明文を自由に変更できます。
サイトの内容や業種に合わせて、自然な言葉に変更してください。

小見出し CTA上部に表示する短い案内文です。例：お気軽にご相談ください
見出し CTAの中心となる大きなタイトルです。例：まずはお問い合わせください
リード文 サービス内容や相談しやすさを伝える説明文です。
リード文ではHTMLを使用できます。
補足説明 初回相談・お見積り・資料請求などの補足を入れられます。
補足説明でもHTMLを使用できます。
フォームボタン文言 フォームへのボタンに表示する文字です。例：お問い合わせはこちら

リード文と補足説明ではHTMLが使えます。改行は <br>、太字は <strong>、
文字装飾は <span>、箇条書きは <ul> と <li> が使えます。

HTML入力例

  • 新規制作、リニューアル、修正、保守管理まで、<br>目的に合わせて分かりやすくご提案します。
  • <strong>初回相談もお気軽にどうぞ。</strong><br>現在のお悩みやご希望をお聞かせください。
  • <ul><li>ホームページ制作</li><li>リニューアル</li></ul>

04

お問い合わせ先を設定する

お問い合わせURL、電話番号、メールアドレスを入力できます。
入力した内容に応じて、電話ボタン・メールボタン・フォームボタンを表示できます。

お問い合わせURL フォームページなどのURLを入力します。例：/contact/
電話番号 電話ボタンを表示する場合に入力します。例：042-000-0000
メールアドレス メールボタンを表示する場合に入力します。例：info@example.com

電話番号やメールアドレスが未入力の場合、そのボタンは表示されません。
例えば電話番号だけ入力している場合は、電話ボタンのみ表示できます。

05

表示するボタンを選ぶ

管理画面の「表示するボタン」で、CTA内に表示するボタンを選べます。
すべてのデザインで、電話・メール・フォームのボタン表示を切り替えられます。

電話ボタンを表示する

電話番号が入力されている場合に、電話ボタンを表示します。

メールボタンを表示する

メールアドレスが入力されている場合に、メールボタンを表示します。

フォームボタンを表示する

お問い合わせURLとボタン文言が入力されている場合に、フォームボタンを表示します。

06

色を変更する

管理画面の「色設定」から、CTAの背景色やボタン色を変更できます。
サイト全体の雰囲気に合わせて調整してください。

背景色
カード背景色
文字色
アクセント色
ボタン背景色
ボタン文字色

色を変更したあと、公開ページの表示が変わらない場合は、ブラウザやキャッシュ系プラグインのキャッシュを削除して確認してください。

07

見本文言を反映する

管理画面の「見本を反映」ボタンを使うと、業種別の見本文言を入力欄に反映できます。
文章を最初から考えるのが難しい場合に便利です。

会社サイト向け
士業向け
整体院・店舗向け
採用向け
資料請求向け

見本を反映しただけでは保存されません。内容を確認したあと、必ず「設定を保存」ボタンを押してください。

08

固定ページに表示する

設定が完了したら、CTAを表示したい固定ページや投稿にショートコードを貼ります。
サービスページの下部、記事の最後、料金表の下、プロフィールページの下などに設置すると効果的です。

固定ページに貼るショートコード

[cta_box]

おすすめの設置場所

  • サービス紹介ページの最後
  • 料金表ページの下
  • プロフィール・会社概要ページの下
  • ブログ記事の最後
  • 採用ページや資料請求ページの下

09

よくある質問

ショートコードがそのまま表示されます。

プラグインが有効化されているか確認してください。
また、ショートコードは半角で [cta_box] と入力してください。

電話ボタンが表示されません。

電話番号が入力されているか、「電話ボタンを表示する」にチェックが入っているか確認してください。

メールボタンが表示されません。

メールアドレスが入力されているか、「メールボタンを表示する」にチェックが入っているか確認してください。

フォームボタンが表示されません。

お問い合わせURLとフォームボタン文言が入力されているか、「フォームボタンを表示する」にチェックが入っているか確認してください。

色を変更しても反映されません。

設定を保存したあと、ブラウザの再読み込みを行ってください。
キャッシュ系プラグインを使用している場合は、キャッシュ削除もお試しください。

SHORTCODE

CTAを表示したい場所に、ショートコードを貼り付けてください。

[cta_box]