
Cocoonでアフィリエイトブログを始めました!アフィリエイトリンクをボタン表示したいけど方法が分かりません泣。CSSとかよくわからない初心者でも理解できるように教えてください!
今回はこんなお悩みを解決していきます。
✓本記事の内容
・アフィリエイトリンクはボタン表示が良い理由
・Cocoon版アフィリエイトリンクをボタン表示する方法(Gutenbergバージョン)
有名ブロガーさんの記事を読んでいると、アフィリエイトリンクがボタン表示になっているのをよく見かけます。

カスタマイズがたくさんできる有料テーマだからできるデザインなんじゃないの?無料テーマのぼくにはできないんでしょ・・・
と諦めかけているあなた。全然そんなことはありません!
今回は最強無料テーマ『Cocoon』内で、アフィリエイトリンクをボタン表示させる方法を解説します。
CSSなど難しい知識はなしで簡単にリンク作成できますよ。
アフィリエイトリンクはボタン表示の方が良い理由
はじめに、ボタン表示をするメリットについてお話します。
ASP各社にはテキストとバナー2種類の広告が用意されているので、わざわざアフィリエイトリンクをボタン表示しなくても良いのではないかという方もいるかと思います。
たしかにその通りなのですが、アフィリエイトリンクはボタン表示をすることをおすすめします。
理由はシンプルで、CTR(クリック率)が上がるからです。
バナーリンクだと記事中で広告を目立たせることはできますが、その広告っぽさが出てしまうのでクリックされる確率が下がってしまいます。
実際に各ASPサイトでテキストとバナーのクリック率を見てみるとバナーの方が圧倒的に低いです。
一方、テキストリンクはクリック率こそ上げることはできますが記事中での存在感を持たせることが難しいです。できても文字サイズを大きくして太字にしてマーカーを引くくらいなので、スルーされる可能性も高まってしまいます。

この2つをちょうどよく組み合わせたのがボタン表示ということです!
アフィリエイトで稼ぐ黄金法則は『PV(アクセス数)×CTR(クリック数)×CVR(成約数)』と言われているので、クリック数を上げることはかなり重要と言えます。
有名ブロガーさんがボタン表示をしていることを考慮すれば、その使いやすさと実績は見て取れますよね。
では、アフィリエイトリンクをボタン表示するにはどうすればよいのでしょうか。
アフィリエイトリンクをボタン表示する3ステップ

ステップは下の通りです。
✓アフィリエイトリンクをボタン表示する3ステップ
Step1.囲みボタンを選択する
Step2.アフィリエイトリンクのURL(テキスト)をコピペする
Step3.色や形を調整する
Step①囲みボタンを選択する

ちなみに、アフィリエイトリンクではなく単純に記事やサイトのURLをボタン表示したい場合は、囲みボタンではなく『ボタン』を選択します。
Step②アフィリエイトリンクのURL(テキスト)をコピペする
囲みボタンをクリックすると下のような画面へと移ります。

挿入したいアフィリエイトリンク(テキスト)をリンクタグの部分にコピペします。これだけで下のようなリンクボタンが登場します。

テキスト部分(今回でいうと「A8.netの申し込みページはこちら」)を変更したい場合は、リンクタグ部分から直接編集すればOKです。
Step③色や形を調整する
あとは自分のすきなようにボタンの色や形を調整するだけです。
・サイズ
・円形にする
・光らせる
・文字サイズ
・色設定(背景色、文字色)
Cocoonでは有料テーマによくある光るボタンなども簡単に作ることができます。一気にブログがプロっぽくなるのでおすすめです。
✓デザイン例
ちなみに、一番クリックされやすい色・サイズ・デザインは『オレンジ×サイズ大×四角』だそうです。Amazonと似ているため安心感が増すのかもしれません。
まとめ
今回は無料テーマCocoonでアフィリエイトリンクをボタン表示する方法についてご紹介しました。
✓アフィリエイトリンクをボタン表示する3ステップ
Step1.囲みボタンを選択する
Step2.アフィリエイトリンクのURL(テキスト)をコピペする
Step3.色や形を調整する
クリック数は、リンクの形式だけでなく色や大きさ・位置などによっても大きく変わると言われています。
たかがボタン、されどボタン。
アフィリエイトで稼ぎたい!という方はぜひ取り入れてみて下さい。
コメント