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

「ボタンの作り方は?」

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

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

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

かめコンパス

こんにちは、かめコンパスです!

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

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

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

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

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

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

目次

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

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

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

「ボタン」について

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

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

Cocoonのボタン以外に

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

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

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

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

ボタン

テキストリンク

当ブログのプロフィール

ブログカード

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

「囲みボタン」について

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

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

Cocoonの囲みボタン以外に

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

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

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

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

囲みボタン

テキストリンク

バナーリンク

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

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

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

かめコンパス

ボタンにアフィリエイトリンクを挿入しないよう気をつけてね

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

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

STEP

記事編集画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

(囲み)ボタンをクリックする

「(囲み)ボタン」がある場所
STEP

ページに挿入された(囲み)ボタンブロックをクリックし、設定をクリックする

「設定」がある場所
STEP

表示されたページでカスタマイズする

表示されたページでカスタマイズしている様子

Cocoonで(囲み)ボタンのカスタマイズ完了!

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

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

URL・コードを入力する

ボタンでは、「URL」に

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

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

  • アフィリエイトリンク

を入力します。

かめコンパス

改変防止のため、コピペしようね

リンクの開き方を決める

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

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

の2つから選べます。

\クリックで試す/

かめコンパス

内部リンクは「現在のタブ」、外部リンクは「新しいタブ」がおすすめだよ

サイズを決める

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

の3つから選べます。

かめコンパス

目立たせるように「大」がおすすめ

ボタンを円形にする

(囲み)ボタンを

  • 円形にするかどうか

選べます。

かめコンパス

円形だと柔らかい印象を与えるね

ボタンを光らせる

(囲み)ボタンを

  • 光らせるかどうか

選べます。

かめコンパス

注意を引きたいときは光らせよう

幅を決める

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

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

の4つから選べます。

かめコンパス

目立たせるよう「100%」がおすすめ

文字サイズを決める

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

  • S
  • M
  • L
  • XL

の4つから選べます。

かめコンパス

デフォルトのままでいいかな

ボタンの色を設定する

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

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

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

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

「No color selected」とカラーコードを入力する場所

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

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

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

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

STEP

記事編集画面で、+をクリックする

「ブロック挿入ツールを切り替え」がある場所
STEP

カラムをクリックする

「カラム」がある場所
STEP

「50/50」を選ぶ

「50/50」がある場所
STEP
  1. 挿入されたカラムブロックの+をクリック
  2. (囲み)ボタンをクリックする
「+」、「(囲み)ボタン」がある場所

片方にボタンの挿入完了!

STEP

もう片方もstep4と同じ手順をふむ

STEP

Cocoonでボタンを横並びにできた!

スマホでは横並びになりません

かめコンパス

挿入したボタンはカスタマイズしようね

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

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

  1. 先ほど挿入したカラムブロックをクリック
  2. 画面下にある一番左のカラムをクリック
画面下にある一番左のカラムがある場所
  1. 設定をクリック
  2. 「モバイルでは縦に並べる」をクリック
「設定」、「モバイルでは縦に並べる」がある場所

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

かめコンパス

スマホは画面が小さいから、文言は短めでボタン化してね

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

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

それぞれ解説します。

広告コードを改変しない

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

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

かめコンパス

規約違反すると、提携解除になるリスクもあるので注意!

各種ASPの利用規約を読む

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

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

かめコンパス

分からなければ、ASP側に質問しようね

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

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

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

  • 文言を変える
  • 色を変える
  • 光らせる
  • マイクロテキストを入れる

が考えられます。

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

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

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

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

\当ブログ直伝/

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

かめコンパス

クリック率が高い=PV数・収益UPにつながるよ

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

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

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

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

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

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

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

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

かめコンパス

ためになったという人は“コメント”してくれると嬉しいです!

Cocoonでボタンをカスタマイズする方法の記事

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次