CocoonでCTAボックスを作りたいけれど、
- ボタンを複数設置したい
- レイアウトを自由に組みたい
- CSSでデザインを調整したい
と感じる場面もあります。
Cocoonには標準のCTAボックス機能がありますが、ボタンは1つのみ・レイアウト固定など制限もあります。
この記事では、ブロックエディタ＋最小限のCSSだけで、自作CTAボックスを作る方法を分かりやすく解説します。
初心者でも再現できる手順で、複数ボタン配置や余白調整のコツまで紹介します。
- 自作CTAボックスの基本構成
- 複数ボタンの配置方法
- 余白を整えてスッキリ見せるコツ
より詳しい実装手順（コピペOKのコード＆画像付き図解）は後半で公開しています。
CocoonのCTAボックスとは？標準機能と自作の違い
CocoonのCTAボックスとは？
Cocoonには標準でCTAボックス機能が用意されており、ウィジェットや記事内に簡単に設置できます。ただし、以下のような制限があります。
- ボタンは1つのみ
- レイアウトは1カラム固定
- 装飾やデザインの細かなカスタマイズが難しい
実際に表示したCocoon機能のCTAボックスです。
自作CTAボックスのメリット（比較表）
| 比較項目 | Cocoon標準機能 | 自作CTAボックス |
|---|---|---|
| ボタン数 | 1つのみ | 複数設置可能 |
| 配置 | 1カラム固定 | 自由なブロック配置 |
| デザイン | 配色のみ変更可 | 色・余白・レイアウト全カスタム |
| 拡張性 | 低 | 評価スター・セール表示など追加OK |
CTAパターン例
実際にどのようなレイアウト・訴求が可能なのか、パターン例を紹介します。
自作なら「複数ボタン＋訴求ポイント」を組み合わせ、読者の温度に合わせた導線設計が可能です。
以下は、例として商品リンク作成プラグイン「Pochipp」を使ったCTAデザインです。
WordPressプラグイン｜Pochipp
- 商品リンク簡単作成
- セール機能表示
- らくらくデザイン
以下は用途別に作成した別パターン例です（クリックで開きます）。
StudyPlus
オンライン講座サービス
- いつでも視聴できる動画講座
- 初心者向けステップ解説
- スマホ対応
RankBoost | SEO分析ツール
- 競合サイト分析
- キーワード順位自動追跡
- レポート自動出力
FitCore | フィットネスアプリ
作成したCTAボックスは WordPressのパターン登録（ブロックの再利用機能）にしておくと便利です。一度登録すれば、記事ごとにワンクリックで呼び出せるので毎回作り直す必要がありません。
詳しくは以下の記事をご覧ください。
CTAボックスの必須要素（クリック率を上げる構成）
CTAは「押す理由」を一目で伝えることが重要です。迷わせない構成がクリック率を左右します。
- 商品名／サービス名：視線を引く大きめ文字
- 画像・バナー：視覚インパクト
- 特徴・メリット：読者の利益を簡潔に
- 評価スター：信頼感の演出
これらをバランスよく配置することで、回遊率・クリック率ともに向上します。
CocoonのCTAボックス導入事例｜旅行ブログでの活用例
旅行ブログ 「ちあログ」 では、CTAボックスを導入し…
- 配色やボタンデザインを旅ジャンルに最適化
- 予約導線へ自然につながる配置
- 訪問者がアクションしたくなる流れを実現
「トマレバ」では扱えない宿も多く、以前は自己流で作っていました。余白やデザインが不格好で悩んでいたのですが、CTAボックスに変えてからとても綺麗になり感動しました。
実際の運用でも、デザイン性と使いやすさの両立が評価されています。
自作CTAボックスの作成手順（概要）
では実際に、自作CTAボックスの作り方を見ていきましょう。
以下の5ステップで進めていきます。
- 外枠の作成（CTAの基礎をつくる）
- カラム設計（レイアウトの使い分け）
- コンテンツ配置（視線設計）
- リンクボタンの設置
- CTAボックスの見た目を整える
各ステップの詳しい作り方は、このあと順番に解説します。
外枠の作成（CTAの基礎をつくる）
目的：内部コンテンツを自由に配置できる「デザイン土台」を作る
- 編集画面で「白抜きボックス」を追加
- 背景色・ボーダー色をサイドバーから設定
- 必要に応じて余白をカスタマイズ
- ブロック単位で自由に編集可能
- 背景色・ボーダー色はブランドに合わせると統一感UP
以下を子テーマのスタイルシートに追加します。
.wp-block-cocoon-blocks-blank-box-1 {
border-width: 1px; /* 線の太さ */
border-radius: 0; /* 角を四角に */
}
ここから先は、詳細手順の有料パートです。
「標準CTAでは物足りない」「もっと見栄え良く、成果につながるCTAを作りたい」――そんな方に向けて、初心者でも迷わず実践できる手順を丁寧に解説します。
- 「初心者でも迷わないテンプレ」
- 「そのまま使えるコード」
- 「失敗しない設定」
この手順をマスターすれば、記事を読んだあと自然にクリックしてもらえるCTA設計ができるようになります。
以下は有料コンテンツのご案内および特定商取引法に基づく表記です。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード ・デビットカード ・プリペイド型クレジットカード ・Apple Pay ・Google Pay ・コンビニ決済
※決済はStripeを利用（SSL暗号化）。運営者はカード情報を保持しません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
200円（税込）
Comment 記事の感想を書き込んでいただけると幸いです