【Cocoon】ボタンのカスタマイズ方法｜アフィリエイトリンク作成で収益化を目指せ！

「ボタンの作り方は？」

「ボタンをカスタマイズしたい」

「ボタンを横並びにできる？」

この記事では、そんな方に向けて、Cocoonでボタンの作り方やカスタマイズする方法を解説します。

この記事を読めば、ボタンのカスタマイズはもちろん

• ボタンを横並びにする方法
• アフィリエイトリンクボタンを作る注意点
• ボタンのクリック率を上げる施策

をかんたんに理解できるようになります。

私もアフィリエイトを始めたきっかけで、今では本記事の方法でパパッとボタンを作れるようになりました。

どこよりも分かりやすく書いている自信がありますので、ぜひ最後まで読んでマスターしてください！

また以下の記事では、Cocoonの使い方や設定方法をブログ運営歴・公開した記事数別でまとめて紹介しています。

さっそく本題に入りましょう。

Cocoon 2種類あるボタンの前提知識

Cocoonでは、2種類のボタンがあります。

それぞれ詳しく解説します。

「ボタン」について

ボタンとは、内部リンクや外部リンクをボタン化させる機能のことです。

内部リンクとは…自サイト内にある記事リンク
外部リンクとは…自サイト外にある記事リンク

Cocoonのボタン以外に

• テキスト
• ブログカード

にもリンクを貼ることができますが、

ボタンリンクは1番カスタマイズ性が高いです。

以下は、ボタン・テキストリンク・ブログカードの表示です。

ボタン

テキストリンク

当ブログのプロフィール

ブログカード

Cocoonでブログカードの使い方を知りたい場合は、下の記事を参考にしてください。

「囲みボタン」について

囲みボタンとは、アフィリエイトリンクをボタン化させる機能のことです。

アフィリアエイトリンクとは…ASPが発行する広告コード

Cocoonの囲みボタン以外に

• テキストリンク
• バナーリンク

などがありますが、ボタンと同様

囲みボタンリンクは1番カスタマイズ性が高いです。

以下は、囲みボタン・テキストリンク・バナーリンクの表示です。

囲みボタン

テキストリンク

A8.net

バナーリンク

「ボタン」と「囲みボタン」の違い

つまり、Cocoonの「ボタン」と「囲みボタン」では、挿入するリンクの種類が違います。

ボタン：内部・外部リンク
囲みボタン：アフィリエイトリンク

Cocoon(囲み)ボタンをカスタマイズする方法

Cocoonでボタンをカスタマイズする方法は、下記の通りです。

(囲み)ボタンでカスタマイズできる項目は、7〜8つあります。

それぞれ詳しく解説します。

URL・コードを入力する

ボタンでは、「URL」に

• 内部リンク
• 外部リンク

囲みボタンでは、「リンクタグ・ショートコード」に

• アフィリエイトリンク

を入力します。

リンクの開き方を決める

ボタンでは、「リンクの開き方」を

• 現在のタブで開く
• 新しいタブで開く

の2つから選べます。

_{＼クリックで試す／}

サイズを決める

(囲み)ボタンでは、「サイズ」を

• 小
• 中
• 大

の3つから選べます。

ボタンを円形にする

(囲み)ボタンを

• 円形にするかどうか

選べます。

ボタンを光らせる

(囲み)ボタンを

• 光らせるかどうか

選べます。

幅を決める

(囲み)ボタンでは、「幅設定」を

• 25%
• 50%
• 75%
• 100%

の4つから選べます。

文字サイズを決める

(囲み)ボタンでは、「文字サイズ」を

• S
• M
• L
• XL

の4つから選べます。

ボタンの色を設定する

(囲み)ボタンでは、「色設定」で

• 背景色
• 文字色
• ボーダー色

の3ヵ所を変更できます。

使いたい色がない場合は、「No color selected」をクリックし、さらに細かく色を指定できます。

「ネットなどで見つけた、あの色が使いたい！」と思った場合は、スポイト/カラーピッカーでカラーコードを調べて同じ色を使うことができます。

スポイト/カラーピッカーでカラーコードを調べる方法は、下の記事を参考にしてください。

Cocoonボタンを横並びにする方法

Cocoonでボタンを横並びにする方法は、下記の通りです。

スマホでもボタンを横並びにする

Cocoonでスマホでもボタンを横並びにするには、

1. 先ほど挿入したカラムブロックをクリック
2. 画面下にある一番左のカラムをクリック

3. 設定をクリック
4. 「モバイルでは縦に並べる」をクリック

以上より、Cocoonでスマホでもボタンを横並びにできます。

Cocoonアフィリエイトリンクボタンを作るときの注意点

Cocoonでアフィリエイトリンクボタンを作るときは、下記2つを徹底しましょう。

それぞれ解説します。

広告コードを改変しない

ASPでは、広告コードを改変することを禁止しています。

ただ、「改変」の定義がASPごとに異なるので、問題のない範囲でアフィリエイトリンクボタンを作りましょう。

各種ASPの利用規約を読む

Cocoonでは、アフィリエイトリンクをボタン化させる「囲みボタン」があります。

広告コードをボタン化することが改変に当たるかどうか、各種ASPの利用規約を読みましょう。

Cocoonボタンの横並びでABテスト【クリック率UP】

Cocoonでボタンのクリック率を上げるために、ボタンを横並びにしてABテストを行います。

ボタンのクリック率を上げるための4つの施策として、

が考えられます。

例えば、文言が違う2つのボタンを横並びで、3か月後にどちらのボタンでクリック数が多いか検証する。

クリック数が多かった文言を残し、次に色を変えたボタンを横並びでクリック数を検証する。

3か月後、クリック数が多かった色を残し、次にボタンを光らせてクリック数を検証する。

3か月後、クリック数が多かったボタンを残し、次にマイクロテキストを入れてクリック数を検証する。

このようにボタンを横並びにしてABテストを行い、クリック率が高いボタンを見つけていきましょう。

当ブログ愛用「SWELL」のボタンはデータ計測機能付き！

当ブログでは、2024年4月からWordPressテーマ「SWELL」を使っています。

SWELLのボタンでは、以下5つのデータを計測できます。

このデータ計測機能をうまく使えば、

• ボタンをクリックしてもらえるような施策
• ボタンまで読んでもらえるような施策
• そもそものPV数を増やすための施策

を立てることができます。

あなたがアフィリエイトをしている、もしくはこれからする予定の人には、データ計測できるSWELLをおすすめできそうです。

まとめ：Cocoon囲みボタンで収益化へ一歩前進

今回は、Cocoonでボタンの作り方やカスタマイズする方法を紹介しました。

収益化をするには、主にアフィリエイトとGoogleアドセンスの2択！

アフィリエイトを始めるにはASPへの無料会員登録が必須です。

ASPの登録がまだの人は、収益化のチャンスを逃していますよ…

ASPに登録済みだがアフィリエイトで収益化できていない人は、Googleアドセンスも併用して稼ぐのもアリです。

以下の記事では、Googleアドセンス審査に合格するためのコツをまとめているので、ぜひご覧ください。

また以下の記事では、ボタン以外のカスタマイズ方法も紹介しています。