成果を出すサイトには欠かせないのが「CTA（Call to Action）」。「今すぐ登録」「購入する」といった行動を促すボタンやメッセージがあるだけで、読者の次の一歩は大きく変わります。
特にアフィリエイトや収益化を目指す方にとって、魅力的なCTAボックスはクリック率を左右する重要な要素。
この記事では、WordPressテーマ「Cocoon」でクリックしたくなるCTAボックスを自作する方法を解説。ブロックエディタの標準機能を使うので初心者でも安心です。
- CTAボックスの作成手順
- ブロックエディタを使った簡単な作り方を解説します。
- ボタンや余白を調整して見た目をスッキリさせるコツ
- 余白調整に数行のCSSを使いますが、初心者でも安心して実践可能。
詳細な作成手順は有料コンテンツで公開中です。アフィリエイトリンクを効果的に配置して、クリック率をアップさせましょう。
About meこの記事を書いた人
ブログ好きな40代主婦です。
2020年1月1日にWordPressを始め、
Cocoonをスキンなしでカスタマイズ。
- ドメインパワー : 40（2025年8月時点）
- 2023年より有料記事公開
累計460件（月間約20件）のご購入実績 - カスタマイズを丁寧にサポート
CocoonのCTAボックスとは？標準機能と自作の違い
Cocoonには標準で「CTAボックス」機能が用意されています。
ただし デザインや配置の自由度はやや限定的。
「もっとデザインにこだわりたい」「複数のボタンを使い分けたい」そんな方には、自作CTAボックスが断然おすすめです。
Cocoon標準CTAボックスの特徴と制限
- 構成：画像＋テキストのみ
- ボタン：1つのみ（1カラム固定）
- カスタマイズ性：配色変更は可能だが自由度は低め
実際に表示したCocoon機能のCTAボックスです。
自作CTAボックスのメリット
- 構成：画像＋商品名＋説明テキスト
- ボタン：複数設置可能（例：公式サイト・詳細・購入リンク）
- 拡張機能：セール表示、評価スターなども追加可能
- カスタマイズ性：色・レイアウト・余白など柔軟に変更できる
WordPressプラグイン｜Pochipp
- 商品リンク簡単作成
- セール機能表示
- らくらくデザイン
EduHub | オンライン学習
- いつでも学べる動画講座
- 専門家による個別指導
- 学習進捗管理ツール
FitCore | フィットネス革命
- パーソナルワークアウトプラン
- 食事管理サポート
- リアルタイム進捗追跡
ShopBoost | EC売上UP
- 売上分析ダッシュボード
- 自動マーケティング機能
- 簡単設置プラグイン
ちなみに、作成したCTAボックスは WordPressのパターン登録 にしておくと便利です。一度登録すれば、記事ごとにワンクリックで呼び出せるので毎回作り直す必要がありません。
詳しくは「WordPressパターンで楽々！再利用ブロックの使い方と同期・非同期の違い」をご覧ください。
CTAボックスのコンテンツ作成のポイント｜読者の目を引くCTAボックスとは？
CTAボックスの中身で最も大事なのは、読者の目を引き、次の行動を自然に誘導することです。
配置する主な要素（商品名・画像・特徴・評価スター）
ここでは簡単に押さえるべきポイントだけご紹介します。
これらの要素を押さえるだけでも、クリック率やコンバージョンに大きな違いが出ます。
ここで紹介したポイントをもとに、実際に画像や評価スター、複数ボタンを組み合わせたCTAボックスを作る手順は、有料コンテンツで詳しく解説しています。
「もっと見栄えの良いCTAボックスを作りたい」「ボタンの余白や配置まで細かく調整したい」という方は、ぜひ参考にしてください。
CocoonのCTAボックス導入事例｜旅行ブログ「ちあログ」
旅行ブログ 「ちあログ」 では、CTAボックスを導入することで以下のような成果を実現しています。
- 旅行ジャンルに合わせた配色＆ボタンデザイン
温泉・宿泊ジャンルにぴったりの雰囲気を演出。 - 宿泊プランの予約導線をCTAに直結
訪問者がそのまま予約に進める導線を確保。
作成手順のご案内｜Cocoon自作CTAボックス
外枠の作成（白抜きボックスの設定）
CTAボックスの土台となる外枠は、Cocoonの「白抜きボックス」を使用します。
以下を子テーマのスタイルシートに追加します。
.wp-block-cocoon-blocks-blank-box-1 {
border-width: 1px; /* 線の太さ */
border-radius: 0; /* 角を四角に */
}操作：記事作成画面で「白抜きボックス」を追加し、サイドバーの色設定から背景色・ボーダー色を調整。
ここから先は、有料コンテンツ限定の詳細手順です。
「標準CTAでは物足りない」「もっと見栄え良く、成果につながるCTAを作りたい」――そんな方に向けて、初心者でも迷わず実践できる手順を丁寧に解説します。
- 色やデザインの調整ポイントを具体的に紹介
- ボタン配置や余白調整するテクニック
- パソコン・モバイル両対応で見栄えを崩さない設定方法
この手順をマスターすれば、読者の「次の一歩」を逃さず、アフィリエイト成果やサイトのコンバージョンをぐっと高められます。
■ サイト名
Turicco
■ サイトURL
https://turicco.com/
■ 運営者情報
運営責任者：はるみ
お問い合わせ先：https://turicco.com/contact/
■ 購入方法
コンテンツ販売サービス「codoc（コードク）」を利用しています。
詳しくは codoc購入者向けFAQ をご覧ください。
■ 納品方法
購入完了後、対象の記事が閲覧可能になります。
■ お支払い方法
・クレジットカード
・デビットカード
・プリペイド型クレジットカード
・Apple Pay
・Google Pay
・コンビニ決済
※クレジットカード情報はSSLで暗号化され、決済サービス「Stripe」に直接送信されます。管理人がカード情報を取得・保管することはありません。
■ 返金・キャンセルについて
codoc株式会社の利用規約第10条（返金）に基づき、原則としてご購入後のキャンセル・返金はできません。あらかじめご了承ください。
■ 販売価格
200円（税込）
Comment 記事の感想を書き込んでいただけると幸いです