Cocoonで作るCTAボックス／アフィリエイトリンク作成に便利

CTA（Call to Action）は、訪問者に何かしらの行動を起こすよう促すための要素や文言のこと。サイトで商品やサービスを紹介するときに活躍します。

今回は、WordPressテーマ「Cocoon」を使って、シンプルで効果的なCTAボックスを作成する方法について詳しく解説します。

当記事の作成手順は有料公開になります。有料部分を見る

Cocoon機能でもCTAボックスはありますが、ボタンは１カラムなのでもっと自由に配置できないかな？と考えてレイアウトは「自作」です。ボタン、評価スター等はCocoonの機能を使って簡単に作っています。

このCTAボックスは、当サイトでもレイアウトを変えて使用しています。

使用ページ ポチッププロの具体的な設定方法／実際に使ってみた便利機能を紹介 ほか

使用ページ エックスサーバー／サブドメイン設定で２つめのブログ（複数サイト）を作る方法　ほか

このようなCTAボックスを使いたい！という方はぜひお試しください。

画像をたくさん準備して、誰にでも作れるように解説しています。

CTA（Call to Action）の役割

CTAはCall to Actionの意味で、以下のような役割があります。

• ナビゲーションの手助け
  • 特定のページに訪問者を案内するのに役立ちます。
    例：「公式サイトを見る」「キャンペーン情報を見る」など
• 行動を促す
  • 訪問者に何かしらの行動を取らせるよう促します。
  • 例：「今すぐ登録する」など
• 目的の達成
  • サイトの目的を達成するのに役立ちます。
    例：「購入する」「申し込む」

CTAとは、ユーザーに特定の行動を促すための要素で、ボタンやバナー、リンクなどの形で配置されます。CTAが適切に設置されていれば、ユーザーが次にすべきアクションが明確になるため、コンバージョンの向上に直結します。

Cocoonで作るCTAボックスの構成

「Cocoon」テーマでは、簡単にCTAボックスを作成できます。CTAボックスの主な構成要素は以下の通りです。

レイアウト

• 外枠: ボックス全体を囲む枠線
• コンテンツの枠: テキストや画像、ボタンなどの要素を収める領域
• バナー: ビジュアル要素を引き立てるための画像
• リンクボタン: ユーザーにクリックを促すためのボタン

ブロックを配置しているだけなので、レイアウトは後から自由に変更できます。

パソコンとモバイルでの表示比較

CTAボックスは、PCとモバイル両方で綺麗に表示されるようになっています。

• パソコン：リンクボタンが横に３列並びます
• モバイル：リンクボタンが縦に３行並びます

一見簡単そう！ですよね。

その通り、作り方としては難しくはないのですが、そのままだとボタン等の要素に行間余白が入って間延びしてしまうんです。（特にモバイル表示で目立ちます）

CCSに馴染みがないとこの余白を消すのも一苦労ですよね。

そこでCTAボックスの、

• 行間余白の調整方法（モバイルでの余白を整える）
• バナーの中央寄せ
• 繰り返し使うときに便利なパターン登録

など、できたらいいなということも合わせて紹介します。

ボタンの色や背景色はCocoonのエディタで簡単に変更できます。カラーパレットの色を追加する場合はこちらの記事を参考にしてください。

Cocoonで作るCTAボックスの導入例

当カスタマイズを参考にしたCTAボックスの導入サイトを紹介します。

ちあログ

温泉ソムリエChiakiさんが、おすすめの宿の情報を実体験で発信している素敵なサイトです！

リンクを作成したものの、モバイルでびよーんとあいてしまう余白に悩まれていたので喜んでいただけました^^

Chiakiさんの声：Post1 Post2

ここから先は有料公開です／Cocoonで作るCTAボックスの手順

ここから先は具体的な手順を有料エリアで紹介します。

有料エリアの目次

1. 外枠／Cocoonで作るCTAボックス
   1. 白抜きボックスのスタイル変更
2. コンテンツの枠／Cocoonで作るCTAボックス
3. バナー／Cocoonで作るCTAボックス
   1. バナーを中央揃えにする方法
4. コンテンツ／Cocoonで作るCTAボックス
   1. 商品名・サービス名
   2. 評価スター
   3. 商品・サービスの内容
5. リンクボタン／Cocoonで作るCTAボックス
   1. ブロックの移動
   2. リンクボタンを作る手順
   3. ボタンの色を追加したいとき
   4. モバイルでの表示（余白）を整える
6. Cocoonで作るCTAボックスの使い方
   1. CTAボックス／クラスの追加方法
   2. リンクボタンだけを並べる場合／クラスの追加方法
7. 繰り返し使うときに便利なパターン登録／Cocoonで作るCTAボックス
8. まとめ

特定商取引法に基づく表記
サイト名	Turicco
サイトURL	https://turicco.com/
お問い合わせ	https://turicco.com/contact/
購入方法	コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。
納品方法	記事公開
販売価格	200円
お支払い 方法	クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済
	※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。
返金・キャンセルについて	codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。