この記事では、ブロックエディタを使ったCTAボックスの作り方を紹介します。
- CTAボックスの作り方
- バナーを中央寄せにする方法
- モバイルでの表示（余白）を整える方法
- パターン（再利用ブロック）に登録して呼び出す方法（何度も使うときに便利です！）
CSSを使うのは3.余白の調整 のみで難しいことはありません
当記事の作成手順は有料公開になります。有料部分を見る
CTA（Call to Action）は、訪問者に何かしらの行動を起こすよう促すための要素や文言のこと。サイトで商品やサービスを紹介するときに活躍します。
Cocoon機能でもCTAボックスはありますが、ボタンは１カラムなのでもっと自由にいい感じにできないかな？と考えて、レイアウトは「自作」です。ボタン、評価スター等はCocoonの機能を使って簡単に作っています。
ワードプレスプラグイン／Pochipp(ポチップ)
- 商品リンク簡単作成
- セール機能表示
- らくらくデザイン
このCTAボックスは、当サイトでもレイアウトを変えて使用しています。
- 商品リンク簡単作成
- アピールできるセール情報表示
- 自由なデザインカスタマイズ
- WordPress簡単インストール
- 他社サーバーからラクラク移行
- クリックするだけの無料独自SSL
- 自動バックアップは復元も簡単！
このようなCTAボックスを使いたい！という方はぜひお試しください。
画像をたくさん準備して、誰にでも作れるように解説しています。
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- JavaScriptを勉強中
- ドメインパワー40
- 有料記事、累計230件購入いただいています、感謝！
です
CTA（Call to Action）の役割
CTAはCall to Actionの意味で、以下のような役割があります。
- 行動を促す
- 訪問者に何かしらの行動を取らせるよう促します。
- 例：「今すぐ登録する」など
- ナビゲーションの手助け
- 特定のページに訪問者を案内するのに役立ちます。
例：「公式サイトを見る」「キャンペーン情報を見る」など
- 特定のページに訪問者を案内するのに役立ちます。
- 目的の達成
- サイトの目的を達成するのに役立ちます。
例：「購入する」「申し込む」
- サイトの目的を達成するのに役立ちます。
Cocoonで作るCTAボックスの構成
レイアウト
ブロックを配置しているだけなので、レイアウトは後から自由に変更できます。
画像（バナー等）
- 商品・サービス名
- 評価スター
- 商品・サービス概要
リンクボタン
パソコンとモバイルでの表示比較
- パソコン：リンクボタンが横に３列並びます
- モバイル：リンクボタンが縦に３行並びます
一見簡単そう！に見えます。その通り、作り方としては難しくはないのですが、初期設定のままだとボタン等の要素間に余白が入って間延びしてしまうんです。（特にモバイル表示で目立ちます）
CCSに馴染みがないとこの余白を消すのも一苦労ですよね。
CTAボックスの、
- 余白の調整方法（モバイルでの余白を整える）
- バナーの中央寄せ
- 繰り返し使うときに便利なパターン登録
など、できたらいいなということも合わせて紹介します。
ボタンの色や背景色はCocoonのエディタで簡単に変更できます。カラーパレットの色を追加する場合はこちらの記事を参考にしてください。
Cocoonで作るCTAボックスの導入例
当カスタマイズを参考にしたCTAボックスの導入サイトを紹介します。
ちあログ
温泉ソムリエChiakiさんが、おすすめの宿の情報を実体験で発信している素敵なサイトです！
リンクを作成したものの、モバイルでびよーんとあいてしまう余白に悩まれていたので喜んでいただけました^^
旅行系の紹介にもぴったりですね！
ここから先は有料公開です／Cocoonで作るCTAボックスの手順
それでは作り方を解説していきます。
有料エリアの目次
- Cocoonで作るCTAボックスの作り方／外枠
- Cocoonで作るCTAボックスの作り方／コンテンツの枠
- Cocoonで作るCTAボックスの作り方／バナー
- Cocoonで作るCTAボックスの作り方／コンテンツ
- Cocoonで作るCTAボックスの作り方／リンクボタン
- Cocoonで作るCTAボックスの使い方
- Cocoonで作るCTAボックス／繰り返し使うときに便利なパターン登録
- まとめ
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 200円 |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ