Cocoonで自作CTAボックスを作る方法｜複数ボタンにも対応（簡単）

Cocoon標準のCTAボックスは手軽ですが、ボタンは1つだけでレイアウトも固定です。

商品紹介やアフィリエイト記事では、

• 複数の申込先を並べたい
• 商品画像も一緒に見せたい
• 特徴やメリットを分かりやすく伝えたい

という場面も少なくありません。

そんなときに便利なのが、ブロックエディタで作る自作CTAボックスです。

白抜きボックス・カラム・ボタンを組み合わせるだけで、自由度の高いCTAを作成できます。

この記事では、実際の作成手順、気になるボタン間の余白を調整する方法を紹介します。

Cocoon標準CTAと自作CTAの違い

項目	標準CTA	自作CTA
ボタン数	1つ	複数可
レイアウト	固定	自由
デザイン	制限あり	自由
拡張性	低い	高い

Before｜Cocoon標準CTAボックスの例

• ボタンは1つのみ
• レイアウトは1カラム固定
• 装飾やデザインの細かなカスタマイズが難しい

シンプルな導線で十分な場合は標準CTA、複数ボタンや比較導線を作りたい場合は自作CTAがおすすめです。

AFTER｜自作CTAボックスの作成例

例えば以下のような導線を並べられます。

このように、商品画像・特徴・CTAボタンを1つにまとめて配置できます。

標準CTAよりも情報量を増やせるため、比較記事やレビュー記事とも相性のよいレイアウトです。

自作CTAボックスの作り方

白抜きボックスを作成

CTA全体の土台（外枠）になります。

背景色や枠線を設定して見た目を整えましょう。

白抜きボックスはCTAの土台として使いやすいブロックです。デザインの種類を増やしたい方は、白抜きボックスのデザイン拡張カスタマイズもあわせて参考にしてみてください。

カラムでレイアウトを組む

カラムブロックを使って、画像と説明文を横並びにします。

• 50：50
• 40：60

これくらいで配置するとバランスがよくなります。

商品情報を配置する

以下のような情報を入れます。

• 商品・サービス名：視線を引く大きめ文字
• 商品画像・バナー：視覚インパクト
• 特徴・メリット：読者の利益を簡潔に
• 評価：信頼感の演出

情報を詰め込みすぎず、シンプルにまとめるのがポイントです。

CTAボタンを設置する

カラムブロックを利用すると、複数ボタンを横並びにできます。

例

• 詳細を見る
• 購入する

読者の検討段階に合わせて導線を用意できます。

ボタン間の余白を調整する

/* 自作CTAボックスのボタン余白調整 */
.is-layout-flex.cta-btn {
  gap: 0.5rem;
}

.cta-btn .btn-wrap a {
  margin-bottom: 0 !important;
}

続いて、ボタンを配置しているカラムブロック（またはボタングループ）の「追加CSSクラス」に cta-btn を入力します。

これでPC・スマホともにボタン間の余白を整えられます。

「追加CSSクラス」の入力場所が分からない方は、以下の記事も参考にしてください。

→ ブロックにクラス名を付けてCSSを適用する方法

パターン登録して再利用する

作成したCTAを毎回コピーして使う必要がなくなるため、まずはパターン登録しておきましょう。

一度登録しておけば、レビュー記事・比較記事・商品紹介記事などで同じCTAを何度でも再利用できます。

まとめ

Cocoon標準CTAでも十分使えますが、自由にレイアウトしたい場合はブロックエディタで自作する方法もおすすめです。

一度パターン登録しておけば、レビュー記事・比較記事・アフィリエイト記事などさまざまな場面で使い回せます。

まずは自分用のCTAテンプレートを1つ作成してみてください。