Cocoonでアフィリエイトリンクを効果的に配置！CTAボックスの作り方と活用法

CTA（Call to Action）は、訪問者に何かしらの行動を起こすよう促すための要素や文言のこと。アフィリエイトリンクやコンバージョンを高めたい場合、オリジナルのCTAボックスを活用することで商品やサービスの魅力をしっかりと伝えることができます。

この記事では、Cocoonで自作のCTAボックスを作るための基本的な構成とデザイン例を紹介します。

当記事の作成手順は有料公開になります。コンテンツを見る

自作するCTAボックスは、次のような要素で構成すると分かりやすく機能的です。

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

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

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

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

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

テーマ「Cocoon」には簡単に使えるCTAボックス機能が搭載されていますが、デフォルトのCTAボタンが１カラム固定であるため自由なレイアウトには少し制限があります。Cocoonの評価スターやボタン機能を活用しながら、独自にデザインしたCTAボックスを作りましょう。アフィリエイトリンクや商品紹介ページをより魅力的にカスタマイズしたい方におすすめの方法です。

レイアウト要素

• 外枠
  ボックス全体を囲む外枠にCocoonの「白抜きボックス」を使います。ブロック設定で枠線や背景色の設定が自由にできます。
• 画像（バナー）
  商品やサービスのイメージ画像を使用することで、視覚的に興味を引きやすくします。画像をボックス内の上段に配置するのがおすすめです。
• コンテンツの枠
  テキスト、画像、ボタンなど、さまざまな要素を配置するエリアです。枠を設定することで、内容がすっきりと整理され、見やすくなります。
• リンクボタン
  最下段には行動を促すリンクボタンを配置しましょう。「詳細を見る」「今すぐ購入」などのアクションを促すテキストを入れるとコンバージョン率を上げやすくなります。

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

パソコン・モバイル対応の表示調整

CTAボックスは、パソコン（PC）とモバイルの両方で綺麗に表示されるようにできますが、それぞれのデバイスで最適な見栄えにするためにはいくつかのポイントを押さえておく必要があります。

• パソコン表示：リンクボタンが横に3列並び、コンパクトでまとまりのあるデザインです。
• モバイル表示：リンクボタンが縦に3行並び、シンプルで視認性が高いデザインです。

作り方としては難しくはないのですが、そのままだとボタン等の要素に行間余白が入って間延びしてしまいます。特にモバイル表示で行間が広がりすぎてしまう要素の配置を調整することが重要です。

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

そこでCTAボックスを自作する際にできたらいいなということも合わせて紹介します。

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

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

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

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

ちあログ

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

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

Chiakiさんの声：Post1 Post2

実装手順／Cocoonで作るCTAボックスの手順

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

有料エリアの目次

1. 外枠／Cocoonで作るCTAボックス
   1. 白抜きボックスの選択
   2. 白抜きボックスのスタイル変更
2. コンテンツの枠／Cocoonで作るCTAボックス
3. バナー／Cocoonで作るCTAボックス
   1. バナーの貼り付け
   2. バナーを中央揃えにする方法
4. コンテンツ／Cocoonで作るCTAボックス
   1. 評価スターの設定手順
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条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。