WordPressのブロックエディタを使えば、以下のようなCTA（Call to Action）※ボックスを簡単に自作できます。
キャッチコピー
サブキャッチコピー
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
詳細はこちらをクリック※CTA（Call to Action）とは、「行動を促す呼びかけ」のことで、Webサイトの訪問者や読者に対して、特定の行動を取るように促すメッセージやボタンのことを指します。
例えば、「今すぐ購入」「無料で試す」「もっと詳しく知る」「サインアップする」などのフレーズがCTAにあたります。CTAはWebマーケティングにおいて非常に重要な要素であり、Webサイト訪問者を顧客やリード（見込み客）に変換するためのキーパーツです。
本記事では、WordPressのブロックエディタでCTAボックスを作成する方法を、画像やCSSのサンプルコードを交えながら、ステップバイステップで詳細に解説します。
複雑なHTMLを打ち込む必要はありません。
外部のプラグインに頼る必要もありません。
テーマ（テンプレート）の作りに依存することもありません。
基本的には、ブロック要素を組み合わせて、装飾のためのCSSを適用するだけですぐに本格的なCTAボックスが完成します。
CTAボックスの構成要素をブロックごとに作成
まずはCTAボックスの構成要素をブロックごとに作成していきます。
親カラムブロックの中に、子要素のブロックを入れ込んで構築するイメージです。
以下で、作成手順をステップバイステップで詳細に解説します。
ステップ1. 親カラムブロックの作成
まずは親カラムブロックを作成します。
ブロックを追加する「＋」をクリックして、メニューの中から「カラム」 を選択してください。
カラムパターンは、100（1カラム）を選択します。
ステップ2. 親カラムブロックに子要素を追加
親カラムブロックを作成したら、その中の「＋」 をクリックして、親カラムブロックの中に、子要素ブロックを追加していきます。
まずは「段落」 を選択してください。ここの子要素ブロックは、CTAボックスのキャッチコピーのパーツです。
ひとまず「キャッチコピー」 とテキストを入力しておきましょう。
そうしたら、2つ目の子要素を追加します。
親カラムブロックをクリックして、オプションメニューの「親ブロックを選択（カラム）」 を選択すると、ブロックを追加する「＋」が表示されるので、そちらをクリックしてください。
「＋」をクリックして、「カラム」 を選択します。
カラムパターンは、50/50（2カラム）を選択します。
ステップ3. 子要素の2カラムブロック内にコンテンツを挿入
2カラムのブロックを追加したら、左右それぞれのブロック内にコンテンツを入れていきます。
左のブロックには、「画像」 を挿入してください。
画像は解像度の高い大きめのサイズをアップロードすると、WordPress側がブロック幅に合わせて自動でリサイズして挿入してくれます。
幅と高さは「自動」 を選択。数値指定すると、タブレットやスマホなどモバイル端末で見た際に崩れる原因になります。
右側のブロックには、「段落」 を挿入します。
ここには、サブキャッチコピー（キャッチコピーの補足）とテキストを入力しておきましょう。
そうしたら、次はボタン要素を挿入します。
エンターキーを押し、段落を1つ空けて「＋」 をクリックしたら、「カスタムHTML」 を選択してください。
カスタムHTMLの中には、以下のHTMLタグを記述してください。
<a href="http://www.example.com/" class="cta-button">詳細はこちらをクリック</a>ここまでの設定が完了したら、プレビューを確認してください。
以下のような表示になるはずです。
装飾はされていませんが、CTAボックスに必要な要素が配置されています。
あとはこれを、CSS（Cascading Style Sheets）※でデザインすれば完成です。
※CSS（Cascading Style Sheets）とは、Webページのデザインやレイアウトを指定するためのスタイルシート言語です。主にHTMLの見た目を制御するために使われます。CSSを使うことで、文字の色やサイズ、要素の配置、余白の大きさ、背景の設定など、ページのスタイルを詳細に調整できます。
CSSでCTAボックスの見た目を整える
CSSでの装飾は、WordPressの追加CSS機能を使うことで簡単に行えます。
追加CSSとは、Wordpressで構築したサイトのデザインやレイアウトをカスタマイズするための便利な機能です。テーマの基本スタイルに影響を与えることなく、特定の箇所に独自のCSSルールを追加してサイトの見た目を変更できます。
各ブロックに任意のクラス名を割り当てる
追加CSSの設定では、まず、装飾を加えたい箇所に「クラス名」 を割り当てます。
その手順をご説明します（非常に簡単です）。
親カラム全体を選択した状態で、「ブロック」 →「高度な設定」 をクリックしてください。
すると、「追加CSSクラス」 の入力欄が出てくるので、任意のクラス名を指定します。
今回は「box」 というクラス名を指定しました。
CTAボックス上部の子要素（キャッチコピー）にもクラスを指定します。
今回は「headline」 というクラス名を指定しました。
2カラムの子要素全体にも、クラス名を付与します。
親カラム内の2カラムの子要素全体をクリックして選択した状態で、「高度な設定」 をクリックしてください。
クラス名に「box-child」 を指定します。
これで、すべての要素にクラス名を付与できました。
ボタンの箇所に関しては、既にカスタムHTML内でクラス名（cta-button）を指定済みです。
追加CSSを記述する際、上記のようなクラス名を指定することで、そのクラス名が付与されたHTMLのみに装飾を反映させることができます。
カスタマイズ画面で追加CSSを記述する
追加CSSの記述は、カスタマイズ画面から行えます。
これは、どのテーマを使っていても共通で用意されている機能です。
プレビューあるいは公開記事を開いて、上部の「カスタマイズ」 をクリックします。
カスタマイズ画面で、「追加CSS」 のメニューを開きます。こちらにCSSを記述します。
追加CSSの記述欄に、以下のCSSを貼り付けてみてください。
/* ボックスの外枠 */
.box {
background-color: #f6f6f6;
}
/* ボックスの子要素 */
.box-child{
padding: 0 20px 20px 20px;
}
/* ボックスの上要素定義 */
.headline {
background-color: #20282f;
color: #ffffff;
padding-top: 10px; /* 上側の余白 */
padding-bottom: 10px; /* 下側の余白 */
}
/* ボタンデザイン1 */
.cta-button {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 80%;
margin-left: auto; /* 左のマージンを自動に */
margin-right: auto; /* 右のマージンも自動に */
padding: 0.5rem 0.5rem;
font-weight: bold;
border-radius: 0.3rem;
border-bottom: 7px solid #E67E22;
background: #FFA500;
color: #ffffff !important;
}
.cta-button:hover {
background-color: #FFA500; /* 同じオレンジ色 */
opacity: 0.7; /* 透明度を下げる */
}
すると、以下のように、CSSの装飾が反映されるはずです。
あとは細部を調整します。
キャッチコピーを中央配置にして、太字に。
文字サイズも大きくします。文字サイズはタイポグラフィの設定項目から、カスタムサイズで任意のサイズを指定可能です。
サブキャッチコピーも同様に、太字にして、タイポグラフィで文字サイズを調整します。
これで、冒頭に示したサンプルと同様のCTAが完成するはずです。
CTAボックス作成に使用したCSSの内容補足
ちなみに、今回設定したCSSの内容について、補足説明をします。
ボックスの外枠（box）
.box {
background-color: #f6f6f6;
}こちらのCSSは、boxクラスを持つブロックに背景色を付けるために設定しています。
この設定を行うことで、boxクラスが適用されたHTML要素の背景全体が、指定された色（明るいグレー色）になります。CTAボックスは、コンテンツの他の要素とは明確に差別化されたデザインにしたいため、このようなCSSを設定しました。
ボックスの上要素（headline）
.headline {
background-color: #20282f;
color: #ffffff;
padding-top: 10px; /* 上側の余白 */
padding-bottom: 10px; /* 下側の余白 */
}こちらのCSSは、headlineクラスを持つ要素に対して複数のスタイルを設定しています。具体的には以下のようなものです。
- 背景色：#20282fを指定しています。非常に濃いグレーがかった青色で、シックでプロフェッショナルな印象を与える色です。
- テキスト色：暗い背景色の上で読みやすい#ffffff（白色）を指定しています。
- 上側の余白（padding-top）：padding（内側の余白）として、10pxを指定しています。キャッチコピーのテキストとその上部の境界が窮屈にならないように、10pxのスペースを作り出しています。
- 下側の余白（padding-bottom）：こちらも同様の理由で10pxを指定しています。
親要素の中の子要素（box-child）
.box-child{
padding: 0 20px 20px 20px;
}こちらCSSは、box-childクラスが適用された要素に対するpaddingを指定しています。具体的には、以下のような余白設定です。
- 上（Top）：0（余白なし）
- 右（Right）：20px
- 下（Bottom）：20px
- 左（Left）：20px
右側、下側、左側にそれぞれ20pxの余白が設定されています。要素の内容とその境界の間に一定のスペースを確保し、見た目を整えることができます。
.cta-button {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 80%;
margin-left: auto; /* 左のマージンを自動に / margin-right: auto; / 右のマージンも自動に */
padding: 0.5rem 0.5rem;
font-weight: bold;
border-radius: 0.3rem;
border-bottom: 7px solid #E67E22;
background: #FFA500;
color: #ffffff !important;
}こちらのCSSは、cta-buttonクラスを持つ要素に対して、ボタンのデザインを適用するためのスタイルを定義しています。これにより、以下のような特徴を持つボタンデザインが作成されます。
- 表示方法：display: block;により、ボタンがブロックレベル要素として表示されます。display: block;を指定しないと、幅と高さの指定が効かなくなり、特定のサイズを持つボタンを作れなくなるため、記述しています。
- テキスト配置：text-align: center;でテキストが中央揃えに、vertical-align: middle;で垂直方向の中央に配置されます。
- テキストの装飾：text-decoration: none;により、テキストの下線などのデフォルトの装飾がなくなります。
- 幅：width: 80%;で要素の幅が親要素の80%に設定されます。ボタンの横幅をこれで調整しています。
- マージン：margin-left: auto;とmargin-right: auto;を記述すると、左右のマージンが自動で設定され、ボタンが水平方向の中央に配置されます。
- パディング：padding: 0.5rem 0.5rem;でボタンの上下左右に0.5remの内側余白が設定されます。
- フォントの太さ：font-weight: bold;でテキストが太字になります。
- ボタンの丸み：border-radius: 0.3rem;でボタンの角が0.3remの半径で丸くなります。
- ボタンの影：border-bottom: 7px solid #E67E22;で下部に7ピクセルの濃いオレンジ色の実線が設定されます。これでボタンの影を表現しています。
- 背景色：background: #FFA500;で明るいオレンジ色に設定されます。
- テキストの色：color: #ffffff !important;でテキストの色が白色に設定され、!importantによりテーマ（テンプレート）のデフォルトのCSS設定による上書きを防ぎます。
これらのスタイルにより、目立つCTA（Call To Action）ボタンが作成されます。ボタンは視覚的に際立ち、ユーザーがクリックしやすいようにデザインされています。明るい背景色、太字のテキスト、そして中央揃えの配置は、ユーザーの注意を引きつけるのに効果的です。
.cta-button:hover {
background-color: #FFA500; /* 同じオレンジ色 / opacity: 0.7; / 透明度を下げる */
}こちらCSSコードは、cta-buttonクラスを持つ要素にマウスカーソルがホバーしたときのスタイルを定義しています。
- 背景色：「background-color: #FFA500;」 で背景色が明るいオレンジ色に指定されます。これはcta-buttonの元の背景色と同じ色です。
- 透明度：opacity: 0.7;で要素の透明度が下げられ、70%の不透明度になります。要素全体（背景色、テキスト色、境界線などを含む）の透明度を下げ、ボタンにマウスカーソルがホバーしていることを視覚的に示します。
このホバースタイルは、ユーザーにボタンのインタラクティブ性を示すために使われます。背景色をそのままにしつつ透明度を下げることで、ボタンがアクティブであることを示しながら、ユーザーのアクション（この場合はホバー）に応じて見た目が変わるようにしています。
ちなみに、今回記述したようなCSSは、生成AIツール「ChatGPT」 に出力してもらいました。
様々な質問に対し、回答してくれるAIツール「ChatGPT（チャットジーピーティー」。2022年11月に公開後、たった2ヶ月で月間ユーザー数1億人を突破しました。 ChatGPTは日本語にも対応しており、無料で利用できるため、幅広い分野での活用が期待されています。情報収集をはじめ、文章作成やプ...
実現したいデザインの言語化さえできれば、あとは、ChatGPTがそのためのCSSを一瞬で生成してくれます。
非デザイナーや非コーダーにとってはハードルが高いとされてきたWordpressのデザインのカスタマイズも、ChatGPTを使えばかなり楽になるはずです。
効果的なCTAボックスを作るためのポイント
効果的なCTAボックスを作成するためには、ユーザーの注意を引き、行動を促すための要素を適切に組み合わせることが重要です。
以下に、効果的なCTAボックスを作るためのポイントをいくつか紹介します。
目立つデザイン
CTAボックスはページ上で目立つようにデザインすることが重要です。
色、サイズ、フォントなど、他のコンテンツ要素とは異なるスタイルを用いて、視覚的に際立たせます。
コントラストの高い色を使用するのが一般的ですが、Webサイト全体の雰囲気やブランドイメージと極端に乖離しないよう、バランスを取る必要はあります。
ベネフィットの提示
CTAのボタンをクリックするメリットを明確にします。
- なぜ、この資料をダウンロードすべきなのか？
- なぜ、無料登録すべきなのか？
- 最終的に何が得られるのか？
- どんな課題が解決するのか？
など、ユーザーにとっての価値を前面に出すことで、行動を促すことができます。
明確なメッセージ
CTAボックス内のボタンのテキストは、具体的で簡潔なメッセージであるべきです。
何をすべきかを明確に伝え、ユーザーに行動を促します。
「無料で資料をダウンロード」「導入事例集をダウンロード」「メルマガを購読する」 など、具体的な行動を示す言葉を選びましょう。
配置の最適化
CTAは、ユーザーが自然と目を通す場所、または関連するコンテンツの近くに配置します。
多くの場合、ページの上部や、情報を読み終えた直後（コンテンツ下部）など、行動を起こしやすいタイミングで目に入る位置が効果的です。
モバイルフレンドリーなデザイン
スマートフォンやタブレットなど、さまざまなデバイスでCTAボックスが適切に表示され、使いやすいことを確認しましょう。
ボタンは十分に大きくし、タップしやすいようにします。
ボタンの横幅も、px（ピクセル）単位で数値を固定すると、モバイルデバイスで見た際に崩れる要因になりやすいです。「width: 80%;」 のような形で、親要素に対するパーセンテージでCSS指定しましょう。
まとめ
WordPressのブロックエディタとCSSを用いることで、複雑なコーディングスキルや外部のプラグインに頼ることなく、誰でも魅力的なCTAボックスを作成できます。
WordPressサイトを運用するうえで、ブロック要素やCSSに関する最低限の知識は、ぜひ押さえておきたいところです。
それらの知識があれば、マーケティングやデザインの自由度や柔軟性は大幅に向上します。今回サンプルで示したCTAボックス以外にも、様々なデザインパターンのCTAボックスを自由自在に自作できるようになるでしょう。
ちなみに、TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。
投稿や固定ページのエディタ下部にもカスタムCSSの設定項目があり、こちらに記入したCSSは、特定のページだけに反映できるため、一部のページのみスタイルを編集したいときに便利です。
TCDテーマのカスタムCSS機能の詳細は、下記の記事で解説しています。
TCDテーマをお使いの方は、ぜひ下記を参考にカスタムCSSをお試しください。
TCDテーマには、テーマファイルを編集することなく、任意のスタイルを追加できる「カスタムCSS機能」が実装されています。 当記事では、カスタムCSSの使い方について紹介していきます。 また、テーマファイルの直接編集を避けるべき理由を下記で解説しておりますので、こちらも合わせてご覧ください...
コメント