【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

Cocoonアフィリエイト広告貼り方Cocoon
  • A8.netやもしもアフィリエイト、バリューコマースなどのASPと提携したけど、自分のブログにどうやって広告を貼ればいいかわからない
  • コードをコピーしてブログに貼り付けるとはどういうことだ?

私もブログを立ち上げた当初、もう収益が欲しくていきなりアフィリンクを記事に貼ってやろう!と意気込んでいたのですが、やり方がま~よくわからない。

ここも初心者ブロガーつまづきポイントの一つですよね。

ASPのページにも一応広告の貼り方の解説記事はあるんですけどね、一般的すぎてちょっと初心者にはついていけないんですよね。
解説ページの例>>A8サポートガイド操作マニュアル

ということで、本記事ではWordPressテーマCocoonを使っている方へ向けて、アフィリエイトリンクの貼り方を始めから丁寧に解説していきます。

ブロックエディタ(Gutenberg)使用者向けの記事になります。クラシックエディタは解説しておりません。

こういうヤツができるようになります
①バナー広告

②テキスト広告

登録はこちら>>もしもアフィリエイト

③ボタン広告
ボタンを2つや3つ横並びにする方法も解説
④ショートコードで表示

本文に[affi id=○○数字]と書くと…

⑤リストに広告
⑥テーブルに広告
A8
もしも
バリュコマ

あなたのパソコンスキルによってはとても難しく感じる人もいるでしょうし、簡単に感じる人もいるでしょう。

ただ、スキルに関係なく本記事はブログ収益化にとっては非常に大切な内容になりますので、あきらめることなく最後まで読んでいただきたいと思います。

また、グーグルアドセンスやAmazon・楽天のアフィリエイト広告の貼り方は本記事では詳しく紹介していきません。

別の記事にて解説していますので、詳しく知りたい方は下のリンクから見ていただければと思います。
関連記事【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
関連記事ヤフーショッピングをブログでアフィリエイトしよう!商品リンクのやり方から料率まで詳しく解説します

それでは順番に見ていきましょう!

Cocoonアフィリエイト広告の貼り方【基礎編】

まずは基礎編として、

  • バナー広告の貼り方
  • テキスト広告の貼り方
  • アフィリエイトボタンの作り方

を見ていくことにします。画像付きで丁寧にやっていくので、あなたも自分のパソコンでやりながら進めていきましょう。

既にASP各社には提携済みという前提でお話ししていきます。まだASPと提携していないという方は下のリンクから各所へ提携お願いいたします。

登録無料で審査もないので、誰でも簡単にできます。

まだASP各社に登録していない方はこちら

提携が完了したらどのASPでもいいので、プログラム申請および提携を完了し、広告リンク作成画面までいきましょう。

▼例:A8.net▼
参加中プログラム押す
▼広告リンク押す▼

バナー広告用のコードやテキスト広告用のコードが表示されますので、あなたの都合に合わせてコードを選択していきましょう。

次の項目へ続きます

バナー広告の貼り方

ASPの広告作成画面にて、バナー広告のコードをコピーします。

▼表示されているコードをコピー▼

コピーしたら、WordPressの投稿画面を開きましょう。投稿画面を開いたら空白の段落ブロックを選択し、ツールバーのからHTMLとして編集を選択します。

しっかり注意書きと画像を追っていけばわかるので、集中して読んでくださいね。

▼空白の段落ブロックで左クリック▼
→HTMLとして編集▼
︙ボタンがない人は次の緑のところに注目です

投稿画面のトップにツールバーを表示させます。下の画像を参考にして操作しましょう。

投稿画面右上の歯車マーク(⚙)の右となりのからトップツールバーをチェックです。

これで投稿画面トップに常時ツールバーが表示されました。改めてツールバーからHTMLへ編集を押しましょう。

つづいて表示された<p>と</p>の間にコピーしたコードを貼り付けます。

▼<p>と</p>の間にコードを貼り付け▼
▼貼り付けた後▼

これでコードの貼り付けが完了しました。プレビュー画面で見てみるとちゃんとバナーが表示されています。

バナーを中央寄せにしたり投稿画面でもビジュアルを確認したい場合は、コードをコピペしたブロックを選択し、再度ツールバーのからビジュアル編集をクリックです。

▼HTML編集からビジュアル編集に戻す▼
▼バナーを中央寄せにする▼

出来上がりです。

\あなたもA8ネットでアフィリエイトしよう/

Cocoonマイクロコピーブロックのマイクロテキストを使っています。

以上がバナー広告の貼り方です

テキスト広告の貼り方

続いてテキスト広告の貼り方です。ほとんどバナー広告の貼り方と同じやり方で貼り付けることができます。

ASPの広告作成画面にて、テキスト広告のコードをコピーします。

▼テキスト広告用のコードをコピーする▼

コピーしたら、WordPressの投稿画面を開きましょう。投稿画面を開いたら空白の段落ブロックを選択し、ツールバーのからHTMLとして編集を選択します。

しっかり注意書きと画像を追っていけばわかるので、集中して読んでくださいね。

▼空白の段落ブロックで左クリック▼
→HTMLとして編集▼
︙ボタンがない人は次の緑のところに注目です

投稿画面のトップにツールバーを表示させます。下の画像を参考にして操作しましょう。

投稿画面右上の歯車マーク(⚙)右となりのからトップツールバーをチェックです。

これで投稿画面トップに常時ツールバーが表示されました。改めてツールバーからHTMLへ編集を押しましょう。

つづいて表示された<p>と</p>の間にコピーしたコードを貼り付けます。

▼<p>と</p>の間にコードを貼り付け▼
▼貼り付けた後▼

これでコードの貼り付けが完了しました。プレビュー画面で見てみるとちゃんとテキスト広告が表示されています。

テキストを中央寄せにしたり本文を追加したり、投稿画面でもビジュアルを確認したい場合は、

コードをコピペしたブロックを選択し、再度ツールバーのからビジュアル編集をクリックです。

▼HTML編集からビジュアル編集に戻す▼

登録はこちら>>A8.net みたいに自然な感じでアフィリエイトリンクを貼ることができます。

登録はこちら>>はツールバーにあるバッジの機能を使っています。マーカー引く機能などと一緒です。

  1. 普通に段落ブロックに「登録はこちら>>」と書く
  2. 書いた「登録はこちら>>」をドラッグする
  3. バッジの好きな色を選択
  4. 装飾した文字を取り消すときはもう一度文字をドラッグして装飾したバッジを押す

詳しくは関連記事【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】をご覧ください。

そしたら次はアフィボタンの作り方です。

アフィリエイトリンクボタンの作り方

アフィリエイトリンクボタンはCocoonブロックの囲みボタンで作ることができます。まずはASPの広告作成画面にて、テキスト広告のコードをコピーします。

▼テキスト広告用のコードをコピーする▼

コピーしたら、WordPressの投稿画面を開きましょう。投稿画面が開けたら、ブロックの追加(+ボタン)から囲みボタンを選択します。

▼+を押してすべて表示▼
▼だいぶスクロールすると囲みボタンがある▼
▼囲みボタンブロック▼

囲みボタンを表示できたら、囲みボタンを選択した状態で右側のサイドバーを見ましょう。囲みボタン設定リンクタグ・ショートコードにコピーしたコードを貼り付けます。

サイドバーが表示されていない、サイドバーにリンクタグ・ショートコードがないという人は画面右上の歯車(⚙)マークをカチカチした後、もう一度囲みボタンブロックを選択してみましょう。

▼コードをサイドバーのリンクタグ・ショートコードに貼り付ける▼

貼り付けたら、そのままサイドバーにてボタンの装飾をしましょう。

ボタンの文言を変更することは広告素材の改変になるのでNGです。文言を変える場合は「自由テキスト」などとなっている広告を選びましょう。

▼アフィリエイトボタンの完成です▼

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

パソコン表示の時にボタンを2つ3つと横並びにしたいときは、カラムブロックを使うとできます。※スマホ表示の時は、横幅が狭いため縦並びになります。

▼こんな感じ▼

ブロックの追加(+)のデザイン→カラムを使うか、ブロックの追加(+)のCocoonレイアウト→2カラム,3カラムを選択しましょう。

これであなたのブログにもアフィリエイト広告が貼れるようになりました!

Cocoonアフィリエイト広告の貼り方【応用編】

続いては応用編です。基礎編で習ったことを使ってより見やすかったりクリックされやすい広告を貼れるようにしていきます。

アフィリエイトタグショートコードを使う

Cocoonにはアフィリエイトタグショートコードという機能があります。複数の記事で同じ広告を貼るときにとても威力を発揮します。

試しにやってみましょう。まずはASPのサイトから広告コードをコピーです。

▼コードをコピー▼

コピーしたら、WordPressの画面からCocoon設定→アフィリエイトタグと進みます。

▼新規追加をクリック▼
  1. あなたが区別しやすいタイトルを入力
  2. コピーしたコードを「内容」に貼り付け
  3. エディターのリストに表示にチェック
  4. 保存する

タグが登録できたので、投稿画面に移りましょう

段落ブロックを選択後、ツールバーからアフィリエイトタグを押し、先ほど登録したタグを押す

[affi id=〇〇登録番号]のショートコードが段落ブロックに貼られる、プレビューを見ると実際には登録した広告が貼られています

これでアフィリエイトタグによる広告の貼り付けが完了しました。このタグの良いところはもしも案件が停止したとき、タグ登録してある部分を修正するだけで広告を貼ってある全記事に反映されます

例えば、あなたが5記事の目次上に転職サイトの案件を貼っていたとして、その案件が停止したとします。

いちいち5記事全部別の案件に貼りなおすのはだるいですね。この時アフィリエイトタグを使っていると、登録したタグを代わりの案件のコードに直すだけで5記事とも直すことができます。

省エネで貼り替えが完了しますね

当ブログは雑記ブログなので、そこまで何記事にもわたって同じ広告を貼るっていうことはしないのですが、それでもたくさんのアフィリエイトタグを登録しています。

あなたのブログが特化になればなるほど使うべき機能だと私は思います。

リスト(箇条書き)にアフィリエイトリンクを貼る

やり方は2通りあります。

  • アフィリエイトタグを使う
  • HTMLとして編集をやる

リストの作り方がよくわからないという方は関連記事【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】

に詳しく書いていますので、そちらをご覧ください。

アフィリエイトタグを使う

アフィリエイトタグを使う場合は、まずリストに貼るテキスト広告を全部Cocoon設定のアフィリエイトタグで事前に登録します。

登録が完了したら、リストブロックにタグを貼るだけ。

▼編集画面▼
  • [affi id=1]
  • [affi id=2]
  • [affi id=3]
▼実際の画面▼

HTMLとして編集をやる

HTMLとして編集をやる場合は、広告を貼る前にリストを作成します。

▼だいたいの文字でいいのでリストを作る▼
  • A8をはる
  • もしもをはる
  • バリューコマースを貼る

次は、ASPからコードをコピーです。

▼コードをコピー▼

コピーしたらWordPressの投稿画面に戻ります。先ほど作ったリストブロックを選択し、ツールバーからHTMLとして編集です。

▼ツールバーからHTMLとして編集

投稿画面のトップにツールバーを表示させます。下の画像を参考にして操作しましょう。

投稿画面右上の歯車マーク(⚙)右となりのからトップツールバーをチェックです。

これで投稿画面トップに常時ツールバーが表示されました。改めてツールバーからHTMLへ編集を押しましょう。

貼り付けたい広告の文字部分を消して、コピーしておいたコードを貼り付けます。

▼A8のコードを貼ったところ▼

同様にもしもとバリュコマのコードもコピーしてきて貼り付けると完成します。

▼完成品▼

HTMLとして編集からビジュアル編集に戻す場合は、リストを選択して、ツールバーのからビジュアル編集をクリックしましょう。

以上がリストにアフィリエイトリンクを貼る方法です。

テーブル(表)にアフィリエイトリンクを貼る

テーブルに広告
A8
もしも
バリュコマ

リストのアフィリエイトリンク作成方法と同様です。こちらも2通りあります。

  • アフィリエイトタグを使う
  • HTMLとして編集をやる

やり方はリストからテーブルになっただけで、ほとんど同じですのでザっと簡単に説明して終わりにしたいと思います。

詳しく見たいという方は一つ手前の項目(リスト(箇条書き)にアフィリエイトリンクを貼る)をご確認ください。

そもそも表の作り方がいまいちわからないという方は関連記事を書いていますので、そちらをご覧ください。
関連記事【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)

▼アフィリエイトタグを使う▼
  1. 事前に表に入れたい広告をCocoon設定→アフィリエイトタグで登録する
  2. 投稿画面で表を作る
  3. 表のセル(マス)ひとつひとつに登録したアフィリエイトタグを入れる
  4. 完成
▼HTMLとして編集をやる▼
  1. 貼りたい広告をイメージして表を作る
  2. ASPから広告のコードをコピー
  3. 表のブロックを選択してツールバーからHTMLとして編集を選択
  4. 貼りたい広告部分の文字を消してコードを貼り付け
  5. 広告の数だけ4を繰り返す
  6. 貼り付け終わったら表ブロックを選択してツールバーよりビジュアル編集を押す
  7. 完成

じっくり読めば絶対いけます

サイドバーやヘッダー、フッターにアフィリエイトリンクを貼る

サイドバーやヘッダー、フッターなんかにアフィリエイト用のバナーを貼りたいってこともよくあると思います。

その場合は、ウィジェットで広告を貼ることができます。

サイドバーなどにアフィリエイトリンクを貼る方法
  • ステップ1
    WordPressの画面から外観ウィジェット
  • ステップ2
    利用できるウィジェットから広告を見つけましょう

    PCだけに表示させたいなら広告(PC用)、スマホだけに表示させたいなら広告(モバイル用)を選択。両方に表示なら広告を選択

  • ステップ3
    広告を選択し、貼りたい場所にチェックしてウィジェットを追加を押す

  • ステップ4
    ASPから広告コードをコピーして、追加された広告ウィジェットの広告タグのところにペースト
  • ステップ5
    保存して完了

文字で書くとざっくり上記のような感じになります。

「これではよくわからない」という場合は画像付きでサイドバーやウィジェットの設定方法を説明した記事がありますので、下のリンクから確認してもらえればと思います。
関連記事【Cocoon】サイドバーの基本的な使い方【初心者向け】

以上でアフィリエイト広告の貼り方についての紹介はすべて終了です。以降は補足や関連情報になります。

コードをそのまま段落ブロックにコピペをすすめない理由

私はブログを開設した当初、何にも知らずに広告コードをコピーし、段落ブロックにそのまま貼り付けました。

実はその方法でもリンクは作れてしまうので、それでいいと思ってました。しかし知識を得ていくにつれて、段落ブロックにそのままコード貼り付けはよくないことがわかりました。

なぜなら、コードをそのままコピペしているにも関わらず、貼り付けられたコードはコピーしたコードとは異なったものになっているからです。

理由は不明です。私は詳しくないのでよくわかりません。

ですが、ASP各社には「生成された広告コードを広告主に無断で変更することは禁止しております」といった文言が書かれています。

意図せずとも違反となってしまいますのでそのまま段落ブロックにコピペはやめる方がいいのではないかと思っています。

さらに言えば、計測のためのタグがはずれてしまうため、うまく計測もできないという事態に陥ります。

やっちまっていた方はぼちぼち修正をしていきましょう。

ほかにもやり方はあるけれど

本記事で私が紹介したやり方のほかに、アフィリエイト広告を貼り付けるやり方はあります。

少なくともあと2つは知ってます

  • カスタムHTMLブロックを使う方法
  • クラシックブロックを使う方法

いずれもコピーしたコードをそのブロックに貼り付ければ広告が完成します。

ただ、本記事で紹介していない理由があって、

  1. カスタムHTML
    • 広告の中央寄せをするのにタグを書き加える必要あり
  2. クラシック
    • ブロックエディタ使ってるのにクラシックに戻る?
  3. HTMLとして編集
    • スマートではないけど応用がきく

ということで今回は主にHTMLとして編集を使って広告を貼る方法を紹介させてもらっています。

Googleアドセンス・Amazon・楽天の広告の貼り方

本記事ではアフィリエイト広告の貼り方ということで、GoogleAdSenseの貼り方やAmazon楽天の物販系商品リンクの貼り方は扱ってきませんでした。

Googleアドセンスの貼り方や物販系商品リンクの使い方については下の関連記事に書いてありますので、そちらをご覧ください。

関連記事【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
関連記事ヤフーショッピングをブログでアフィリエイトしよう!商品リンクのやり方から料率まで詳しく解説します

アフィリエイト広告を正しく貼ろう

本記事では【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】

ということで、ブロックエディタを使用しているかたに向けてASP案件の広告の貼り方をご紹介してきました。

3記事分くらいの執筆パワーを使いました!

  • ブロックエディタでコードを正しく貼ること
  • 工夫してよりクリックされやすいように広告を貼ること

それが伝わるように全力で書いてきました。

あなたのブログで収益が1円でも増えるように祈っています。その手助けが少しできたなら私は嬉しく思います。

ブログ運営頑張っていきましょー

Cocoon関連記事

本記事以外にもCocoonに関する記事を書いています。そちらもどうぞご覧になってください。

Cocoon歴1ヶ月くらいの人向け

【Cocoon】ブログをツイッターと連携する具体的な手順
【Cocoon】ボタンの使い方が余裕でわかるようになる【ブロックエディタ】
【Cocoon】スライドショーを設定する方法まとめ
【Cocoon】アイキャッチ画像サイズを統一して揃える設定方法
【Cocoon】アフィリエイト広告の貼り方を始めから丁寧に【解説】
【Cocoon】アドセンス広告の貼り方を始めから丁寧に【解説】
Cocoonスキン一覧まとめ!カスタマイズなしでもおしゃれに決まる
【Cocoonスキン】おすすめ4選!とにかくブログをいい感じにしたい
【Cocoon】固定ページを一覧表示させる方法【ヘッダー/フッターほか】
【Cocoon】記事の書き方!投稿画面の使い方を画像たっぷり丁寧に解説【初心者向け】
【Cocoon】パンくずリストを投稿/カテゴリー/固定の各ページに設置する方法
Cocoonブロック一覧!全機能まとめ【初心者向け】
【Cocoon】お問い合わせフォームの設置方法を初心者向けに画像たっぷりで説明する
【Cocoon】目次が表示されない⁉作り方完全解説
【Cocoon】投稿画面ツールバー機能一覧|文字色・ルビほか【初心者向け】
【Cocoon】サイドバーの基本的な使い方【初心者向け】
【Cocoon】吹き出しの基本的な使い方/右に変更など【初心者向け】

Cocoon歴半年くらいの人向け

【Cocoon】おすすめカードでトップページ等をカスタマイズしよう!
【Cocoon】ショートコードの使い方!便利さをマジで知ってもらいたい
【Cocoon】Twitter(ツイッター)埋め込みは秒でできる
【Cocoon】テーブル/表を作成する方法を丁寧に解説(ブロックエディタ)
【Cocoon】行間と段落の間隔を調整する方法【初心者向け】細部にこだわろう
【Cocoon】トップページがボタン1つでサイト型にできるようになった【衝撃】
【Cocoon】カスタマイズまとめ!初心者でもわかりやすく解説
【Cocoon】リスト(箇条書き)をボックスに入れる超簡単な方法【カスタマイズ不要】
【Cocoon】ブログカードの基本的な使い方【初心者向け】
【Cocoon】サイドバーで目次をスクロール追従させる方法【初心者向け】

Cocoon歴がもっと長い人向け

【Cocoon】サイドバーカスタマイズ!カテゴリーのボックスメニューは意外と難しくない
【Cocoon】ブログカードカスタマイズ「続きを読む」を入れる/タイトルのみにする!
【Cocoon】目次カスタマイズ‼見やすくシンプルおしゃれにしよう【CSSコピペでOK】
【Cocoon】スマホ表示簡単カスタマイズ‼ハンバーガーメニューを固定追従させる

コメント