この記事では、ワードプレステーマ「Cocoon」を使ったCTAボックスの作成手順と活用法を解説します。誰でも簡単に作成でき、アフィリエイトリンクを効果的に配置できます。
- CTAボックスの作成手順
- ボタン間余白を調整する方法 POINT
手順の中でCSSが必要なのは「余白調整」のみです。
About me
この記事を書いた人
- ブログ好きな40代主婦
- CocoonサイトをCSSでカスタマイズ
- 2020年1月1日ブログ開設
- ドメインパワー40
- 2023年～有料記事公開
- →累計370件（月間約20件）購入いただいています
CTAボックスとは？効果と活用方法
CTA（Call to Action）とは、読者に特定の行動を促す要素やメッセージのことです。例えば、以下のようなものがあります。
- 「今すぐ登録」：登録フォームやボタン
- 「詳しくはこちら」：関連商品のページに誘導
- 「購入する」：購入ページに誘導
特にアフィリエイトやコンバージョンを重視するサイト運営では魅力的かつ目を引くCTAボックスが成果を左右します。
CocoonのCTAボックス機能の特徴
Cocoonテーマには、標準のCTAボックス機能が搭載されています。
実際に表示したCocoon機能のCTAボックスです。
以下のようなメリットがあります。
しかし、以下のような制限があります。
これらの制限を克服するために、自作のCTAボックスを作成する方法をご紹介します。
自作CTAボックスの基本構成
レイアウト例
以下のようなデザインが作成可能です。
Cocoon風デザイン（ボタン２カラム）
背景色を暗くし、文字色を白に変えることでCocoonのCTAボックス風になります。
以下はボタンを２カラム配置にした例です。
自作したCTAボックス
Ccooonのデザイン風に自作したCTAボックスです。
サンプルデザイン（ボタン３カラム）
ユーザーに複数の選択肢を提供する、ボタン３カラム配置デザインです。
ワードプレスプラグイン／Pochipp
- 商品リンク簡単作成
- セール機能表示
- らくらくデザイン
今回は、このレイアウトで作成します。
基本構成
自作CTAボックスの基本構成は以下の通りです。
- 外枠
- Cocoonの「白抜きボックス」を使用。
- 背景色や枠線をブロック設定でカスタマイズ可能。
- 画像（バナー）
- 商品やサービスの魅力を伝えるために画像やバナーを配置。
- デバイスに応じたサイズを考慮。
- コンテンツ
- 商品やサービスの内容を簡潔に伝える。
- ユーザーが得られるメリットを明示。
- リンクボタン
- 「詳細を見る」「今すぐ購入」などのアクションを促すボタンを配置。
- 目立つデザインでコンバージョン率を向上。
Cocoonのブロックエディタを使えば、レイアウトやデザインの変更が柔軟に対応でき、さまざまなニーズに合ったCTAボックスを作成することが可能です。
デバイス別の調整
パソコンとモバイルで見栄えが異なるため、それぞれ適したデザイン調整が必要です。
パソコン表示
- リンクボタンを横に配置してコンパクトかつ整然としたデザインに仕上げます。
モバイル表示
- ボタンを縦に並べることで視認性を高めます。
- 縦に並べた際に行間余白が広がることがあります。この余白は設定では変更できないため、CSSを使用して余白を調整します。具体的なコードを掲載します。
CTAボックス導入事例
当カスタマイズを参考にCTAボックスを導入した事例をご紹介します。
サイト名： ちあログ
コンセプト：おすすめの宿泊情報を実体験と自ら撮影した写真でお伝えする旅行ブログ
温泉ソムリエとして活動するChiakiさんが運営するサイトです。実際に訪れた宿泊先の体験をもとにおすすめの宿情報を発信しています。旅行好きの方々にとって貴重な情報源となっています。
Chiakiさんは、以下のようなポイントでCTAボックスを導入されました。
- 宿泊プランや施設予約へのリンクを配置
宿泊プランの予約リンクをCTAボックス内に配置し、訪問者がすぐに行動できる設計に。 - 旅行系コンテンツに適したデザイン
温泉や宿泊といった旅行ジャンルに合う落ち着いた配色と、シンプルで直感的なボタンデザインを採用。
Chiakiさんの感想
ちあログの事例を参考に、自分のサイトでもCTAボックスを有効活用してみましょう！
Cocoonで自作CTAボックスを作る方法
それでは、実際に作っていきます。
| 特定商取引法に基づく表記 | |
|---|---|
| サイト名 | Turicco |
| サイトURL | https://turicco.com/ |
| お問い合わせ | https://turicco.com/contact/ |
| 購入方法 | コンテンツ販売サービス、codoc(コードク)を利用しています。 詳しくは購入者向けFAQをご覧ください。 |
| 納品方法 | 記事公開 |
| 販売価格 | 200円 |
| お支払い 方法 | クレジットカード、デビットカード、プリペイド型クレジットカード、Apple Pay、Google Pay、コンビニ決済 |
| ※クレジットカード情報はSSLで暗号化され、決済システムサービスを提供するStripe社に直接送信されます。管理人が知ることはありませんのでご安心ください。 | |
| 返金・キャンセルについて | codoc株式会社利用規約 第10条（返金）に基づき、原則として購入いただいた記事のキャンセル、返金等を受けられないことを了承ください。 |
Comment コメントはこちらへ