こんにちは、とち（ @tochi1203 ）です。
一応貼ってるけど、正しく貼れてるか不安でねむれない。。。
こういったCocoonユーザーの悩みを解決する記事です。
Cocoonはアフィリエイト機能が、とても使いやすいテーマです。
ただCocoonビギナーにとって、アフィリエイトタグの貼り方はつまづきポイントです。
本記事では、Cocoonでできる以下3つのアフィリエイトタグ・リンクの貼り方を解説します。
- htmlコード直貼り
- 通常ボタン使用
- 囲みボタン使用
本記事を読めば、Cocoonでアフィリエイトは、バッチリできます。
この記事を書いている僕はブログ歴1年、Cocoon使用歴も同じく1年。
これからご紹介するASPとアフィリエイトで、月10万円の収益を達成してます。
①アフィリエイトを行うにはASPへの登録が必須です。
以下のASPは定番of定番なので、すべて登録しておくことをおすすめします。
■定番ASPのおすすめ7社■① A8.net
→ASP最大手。通称「エーハチ」 ② もしもアフィリエイト
③ afb
④
⑤ Link-A→VODに強い ※新規受け付け停止中
⑥ アクセストレード
⑦ infotop→情報商材系
②本記事のアフィリエイトタグ・リンクの貼り方は、ブロックエディタでご説明します。
→ Cocoonが比較的新しいテーマでブロックエディタ利用者が多い
→ クラシックエディタへのサポートが2021年末で終了する
→ アップデートでブロックエディタが使いやすく進化
この3つが理由です。
Cocoonアフィリエイトタグ・リンクの貼り方①：html直貼り
まずhtmlコードを貼って、以下のようなテキストやバナー広告を作成する方法です。
レンタルサーバー Xserver
↓バナーリンク↓
STEP1：広告と表示形式（テキストorバナー）を決める
貼る広告を決めたら（※事前提携が必要）、広告リンク作成から広告表示タイプを選択します。
STEP2：コードをコピーする
テキストタイプなら、表示したい文面のコードを取得（全コピー）します。
ASP側の作業は終わりです。
STEP3：「カスタムHTML」に取得したコードをペースト
ここからWordPress編集画面です。
ブロックから「カスタムHTML」を選択、ASPで取得したコードをペーストします。
下記のように表示されているか、プレビューで確認してみましょう。
レンタルサーバー Xserver
Cocoonアフィリエイトタグ・リンクの貼り方②：通常ボタン
次に「Cocoonボタン」で、アフィリエイトのリンクを作成する方法です。
Cocoonボタンは、シンプルにURL（https://〜）を挿入するものです。
ASPを使う場合、単純なリンク挿入は少ないですが、海外プログラムのアフィリエイトでは多用します。
国内でもLINK-AといったASPで下記のような、URLを直接挿入するアフィリエイトができます。
STEP1：Cocoonボタンを選択
編集画面のブロックから「ボタン」を選択します。
STEP2：リンクを挿入
編集画面右の「ボタン設定」からURLを挿入します。
STEP3：ボタンのテキスト編集＆加工
リンクを挿入したら、ボタン内のテキストも記入しましょう。
（ボタンをダブルクリックでテキスト編集できます）
ボタンの表示パターンも、Cocoonは多彩です。
<サイズ>
<光らせる>
余談ですが「補色」って知ってますか？
色には下記の十二色相環というモデルがあり、「補色」とは色相環の反対にある色を指します。
マーケティング会社の研究で活発な補色を用いて購入ボタンや問い合わせボタンを作ると、クリックされやすくなる結果が出ています。
（例）当ブログのメインカラーが下記の紺系
メインカラーだ！
この紺系メインカラーに対する「補色」のボタンがこちら↓↓↓
Cocoonアフィリエイトタグ・リンクの貼り方③：囲みボタン
Cocoonでアフィリエイトボタンを作るときに通常、使用するのが「囲みボタン」です。
STEP1：広告と表示形式（テキストorバナー）を決める
コード取得までは「カスタムHTML」に貼る手順と同じです。
STEP2：コードをコピーする
表示したいテキストのコードを取得（全コピー）します。
ASP側の作業は終わりです。
STEP3：「囲みボタン」の「囲みボタン設定」にペースト
ここからWordPress編集画面です。
ブロックタイプから「囲みボタン」を選択します。
編集画面右の「囲みボタン設定」に、ASPで取得したコードをペーストします。
ボタンの表示形式は、通常ボタンと同様です。
もしもアフィリエイト
Cocoonアフィリエイトタグ・リンクの便利な貼り方
Cocoonでは、よく使うアフィリエイトタグをショートコードにして呼び出せます。
<< アフィリエイトタグ登録・挿入手順 >>
STEP1：管理画面Cocoon設定「アフィリエイトタグ」でコード入力
STEP2：「アフィリエイトタグ」でコード入力
編集画面でアフィリエイト広告を挿入したい箇所で、「＄」マーク（？）から登録したタグを呼び出します。
このようにCocoonなら、いつでもどこでも簡単にアフィリエイトタグを呼び出せます。
僕は違うWordPressテーマでもサイト運営してますが、Cocoonは有料テーマに引けを取らないアフィリエイト機能を備えてます。無料ですし、収益化向きのテーマともいえますね！
ほんと、Cocoon、神。
Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】：まとめ
Cocoonのアフィリエイトタグ・リンクの貼り方は以上になります。
手順は簡単ですが、コードを見慣れていないと不安ですもんね。
僕はASPに、問い合わせしたことがあります。
「成果発生しないけど、貼り方合ってる？」と。
結論、タグの貼り方に問題はありませんでした。
単に売れなかっただけ^^;
今回はこの辺で！
→ASP最大手。通称「エーハチ」 ② もしもアフィリエイト
③ afb
④
⑤ Link-A→VODに強い ※新規受け付け停止中
⑥ アクセストレード
⑦ infotop→情報商材系
※手順は、どのASPでも同じです。