Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】

Cocoonアフィリエイトタグ・リンク貼り方

こんにちは、とち( @blue_chikippaa )です。

赤ちゃん画像
Cocoonを使ってるけど、アフィリエイトタグの貼り方がわからない。
一応貼ってるけど、正しく貼れてるか不安でねむれない。。。

こういったCocoonユーザーの悩みを解決する記事です。

Cocoonはアフィリエイト機能が、とても使いやすいテーマです。

ただCocoonビギナーにとって、アフィリエイトタグの貼り方はつまづきポイントです。

本記事では、Cocoonでできる以下3つのアフィリエイトタグ・リンクの貼り方を解説します。

Cocoonアフィリエイトタグの貼り方3つ
  1. htmlコード直貼り
  2. 通常ボタン使用
  3. 囲みボタン使用

本記事を読めば、Cocoonでアフィリエイトは、バッチリできます。

本記事の信頼性

この記事を書いている僕はブログ歴1年、Cocoon使用歴も同じく1年。
これからご紹介するASPとアフィリエイトで、月10万円の収益を達成してます。

本題に入る前の2つの注意点

①アフィリエイトを行うにはASPへの登録が必須です。

アフィリエイトの仕組みとASPの役割

以下のASPは定番of定番なので、すべて登録しておくことをおすすめします。

■定番ASPのおすすめ7社■
A8.net→ASP最大手。通称「エーハチ」
もしもアフィリエイト→Amazon・楽天やるならマスト
afb→美容・健康系に強い
バリューコマース→ここも大手。旅行系に強い
Link-A→VODに強い ※新規受け付け停止中
アクセストレード→通信ジャンル多し
infotop→情報商材系

本記事のアフィリエイトタグ・リンクの貼り方は、ブロックエディタでご説明します。
→ Cocoonが比較的新しいテーマでブロックエディタ利用者が多い
→ クラシックエディタへのサポートが2021年末で終了する
→ アップデートでブロックエディタが使いやすく進化
この3つが理由です。

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

Cocoonアフィリエイトタグ・リンクの貼り方①:html直貼り

Cocoonアフィリエイトタグ・リンクの貼り方1:HTML直貼り

まずhtmlコードを貼って、以下のようなテキストやバナー広告を作成する方法です。

↓テキストリンク↓
レンタルサーバー Xserver ↓バナーリンク↓

本記事では大手ASPのA8.netの画面でご説明します。
※手順は、どのASPでも同じです。

テキストタイプでもバナータイプでも、貼り方は同じです。
以下テキストタイプで説明します。

STEP1:広告と表示形式(テキストorバナー)を決める

貼る広告を決めたら(※事前提携が必要)、広告リンク作成から広告表示タイプを選択します。

A8広告作成画面

STEP2:コードをコピーする

テキストタイプなら、表示したい文面のコードを取得(全コピー)します。

A8広告選択画面

ASP側の作業は終わりです。

STEP3:「カスタムHTML」に取得したコードをペースト

ここからWordPress編集画面です。

ブロックから「カスタムHTML」を選択、ASPで取得したコードをペーストします。

カスタムHTML選択画面
カスタムHTML画面
カスタムHTMLにコード入力画面

下記のように表示されているか、プレビューで確認してみましょう。

レンタルサーバー Xserver

「カスタムHTML」でなくても、そのままペーストしたら広告表示はできます。
ただこの場合、コード中の<img>タグが消える現象が起きます。

<img>はインプレッション取得のためのタグなので成果発生に影響はない、とされてますが基本的にASPはコードの改変を禁じています。不安な方は「カスタムHTML」を使用するのが無難です!

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

Cocoonアフィリエイトタグ・リンクの貼り方②:通常ボタン

Cocoonアフィリエイトタグ・リンクの貼り方2:通常ボタン

次に「Cocoonボタン」で、アフィリエイトのリンクを作成する方法です。

WordPress5.5からは、WordPressデフォルトのボタンが追加されて、選べるパターンが増えました!

Cocoonボタンは、シンプルにURL(https://〜)を挿入するものです。

ASPを使う場合、単純なリンク挿入は少ないですが、海外プログラムのアフィリエイトでは多用します。
国内でもLINK-AといったASPで下記のような、URLを直接挿入するアフィリエイトができます。

リンクエー画面

STEP1:Cocoonボタンを選択

編集画面のブロックから「ボタン」を選択します。

ボタン選択画面

STEP2:リンクを挿入

編集画面右の「ボタン設定」からURLを挿入します。

URLを挿入

STEP3:ボタンのテキスト編集&加工

リンクを挿入したら、ボタン内のテキストも記入しましょう。
(ボタンをダブルクリックでテキスト編集できます)

ボタンの表示パターンも、Cocoonは多彩です。

<サイズ>

・小
・中
・大

<光らせる>

クリック率がアップする色がある?

余談ですが「補色」って知ってますか?
色には下記の十二色相環というモデルがあり、「補色」とは色相環の反対にある色を指します。

マーケティング会社の研究で活発な補色を用いて購入ボタンや問い合わせボタンを作ると、クリックされやすくなる結果が出ています。

(例)当ブログのメインカラーが下記の紺系

メインカラーだ!

この紺系メインカラーに対する「補色」のボタンがこちら↓↓↓

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

Cocoonアフィリエイトタグ・リンクの貼り方③:囲みボタン

Cocoonアフィリエイトタグ・リンクの貼り方3:囲みボタン

Cocoonでアフィリエイトボタンを作るときに通常、使用するのが「囲みボタン」です。

STEP1:広告と表示形式(テキストorバナー)を決める

コード取得までは「カスタムHTML」に貼る手順と同じです。

A8広告作成画面

STEP2:コードをコピーする

表示したいテキストのコードを取得(全コピー)します。

A8広告選択画面

ASP側の作業は終わりです。

STEP3:「囲みボタン」の「囲みボタン設定」にペースト

ここからWordPress編集画面です。

ブロックタイプから「囲みボタン」を選択します。

囲みボタン画面

編集画面右の「囲みボタン設定」に、ASPで取得したコードをペーストします。

囲みボタン設定画面

自由テキストの場合は、任意でボタン内のテキストを変えてください。

ボタンの表示形式は、通常ボタンと同様です。

物販リンクなら「もしも」
Amazonや楽天の商品でアフィリエイトをしたいならもしもアフィリエイトの「かんたんリンク」が超絶便利です。下記のような、商品画像付きリンクがすぐに作れます。

どれぐらい”かんたん”かは、動画でどうぞ。
もしもアフィリエイトなら物販リンクが30秒で、できることがわかります。

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

Cocoonアフィリエイトタグ・リンクの便利な貼り方

Cocoonアフィリエイトタグ・リンクの便利な貼り方

Cocoonでは、よく使うアフィリエイトタグをショートコードにして呼び出せます。

<< アフィリエイトタグ登録・挿入手順 >>

STEP1:管理画面Cocoon設定「アフィリエイトタグ」でコード入力

Cocoon設定画面

STEP2:「アフィリエイトタグ」でコード入力

編集画面でアフィリエイト広告を挿入したい箇所で、「$」マーク(?)から登録したタグを呼び出します。

アフィリエイトタグ入力画面

このようにCocoonなら、いつでもどこでも簡単にアフィリエイトタグを呼び出せます。

とち
とち

僕は違うWordPressテーマでもサイト運営してますが、Cocoonは有料テーマに引けを取らないアフィリエイト機能を備えてます。無料ですし、収益化向きのテーマともいえますね!

ほんと、Cocoon、神。

\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。

Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つき解説】:まとめ

Cocoonアフィリエイトタグ・リンクの貼り方3つ【全手順画像つきで解説】:記事まとめの画像

Cocoonのアフィリエイトタグ・リンクの貼り方は以上になります。

手順は簡単ですが、コードを見慣れていないと不安ですもんね。

僕はASPに、問い合わせしたことがあります。

「成果発生しないけど、貼り方合ってる?」と。

結論、タグの貼り方に問題はありませんでした。
単に売れなかっただけ^^;

今回はこの辺で!

登録必須のASP7社
A8.net→ASP最大手。通称「エーハチ」
もしもアフィリエイト→Amazon・楽天やるならマスト
afb→美容・健康系に強い
バリューコマース→ここも大手。旅行系に強い
Link-A→VODに強い ※新規受け付け停止中
アクセストレード→通信ジャンル多し
infotop→情報商材系
各ASPの特徴を知りたい人はこちら
\プログラミングでCocoonは10倍楽しい/
テックアカデミー〈7日間無料体験〉
※今すぐできるオンライン体験学習です。