![](https://gungii.com/wp/wp-content/themes/cocoon-master/images/man.png)
「アフィリエイト広告の貼り方がよくわからない。」
![](https://gungii.com/wp/wp-content/themes/cocoon-master/images/woman.png)
「ブログに一体どうやって貼ったらいいの?」
初心者にとってアフィリエイト広告の貼り方は、以外とつまづきやすいポイントです。
今回は、CocoonでASP(a8.netやもしも等)のアフィリエイト広告の貼り方についてお伝えします。Cocoonはアフィリエイト広告が、とてもあつかいやすいテーマです。
A8.netのアフィリエイトリンクから次に示すようなバナー広告、テキスト広告、広告ボタンの貼り付け方を具体的に解説します。
![WordPress Coconn アフィリエイトリンクのバナー広告例](https://gungii.com/wp/wp-content/uploads/2021/11/aflink01.jpg)
![WordPress Cocoon アフィリエイトリンクのテキスト広告例](https://gungii.com/wp/wp-content/uploads/2021/11/aflink02.jpg)
![WordPress Cocoon アフィリエイトリンクの広告ボタン例](https://gungii.com/wp/wp-content/uploads/2021/11/aflink03.jpg)
![WordPress Cocoon アフィリエイトリンクの装飾テキスト広告例](https://gungii.com/wp/wp-content/uploads/2021/11/aflink04.jpg)
Cocoonアフィリエイト広告の貼り方(動画)
「Cocoonアフィリエイトリンクの設定と使い方(動画)」は、こちら
Cocoon バナー広告の貼り付け方
アフィリエイトリンクの取得
ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。
バナー広告の選択
参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(バナーリンク)を取得します。
![A8.netのバナーリングの取得](https://gungii.com/wp/wp-content/uploads/2021/11/aflink11.jpg)
「素材をコピーする」をクリック
![A8.netのリンクのコピー](https://gungii.com/wp/wp-content/uploads/2021/11/aflink12.jpg)
Cocoonのブログの投稿画面に移動します。
アフィリエイトリンクの貼り付け
ブロックの追加
バナー広告を貼りたい場所で「+」ボタンをクリックします。
![WordPress Cocoon ブロックの追加](https://gungii.com/wp/wp-content/uploads/2021/11/aflink13.jpg)
「カスタムHTML」ブロックの選択
![WordPress Cocoon ブロックの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink14.jpg)
バナー広告の貼り付け
取得したアフィリエイトリンクを貼り付けます。
![WordPress Cocoon アフィリエイトリンクの貼り付け](https://gungii.com/wp/wp-content/uploads/2021/11/aflink15.jpg)
バナー広告の確認
「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。
![WordPress Cocoon 表示されたバナー広告](https://gungii.com/wp/wp-content/uploads/2021/11/aflink16.jpg)
バナー広告が表示されました。
Cocoon テキスト広告の貼り付け方
アフィリエイトリンクの取得
ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。
テキスト広告の選択
参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(テキストリンク)を取得します。
![A8.netのテキスト広告の選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink21.jpg)
「素材をコピーする」をクリック
![A8.netのリンクのコピー](https://gungii.com/wp/wp-content/uploads/2021/11/aflink22.jpg)
Cocoonのブログの投稿画面に移動します。
アフィリエイトリンクの貼り付け
ブロックの追加
テキスト広告を貼りたい場所で「+」ボタンをクリックします。
![WordPress Cocoon ブロックの追加](https://gungii.com/wp/wp-content/uploads/2021/11/aflink13.jpg)
「カスタムHTML」ブロックの選択
![WordPress Cocoon ブロックの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink14.jpg)
テキスト広告の貼り付け
![WordPress Cocoon リンクの貼り付け](https://gungii.com/wp/wp-content/uploads/2021/11/aflink23.jpg)
テキスト広告の確認
「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。
![WordPress Cocoon 表示されたテキスト広告](https://gungii.com/wp/wp-content/uploads/2021/11/aflink24.jpg)
テキスト広告が表示されました。
Cocoon アフィリエイト広告ボタンの貼り方
アフィリエイトリンクの取得
ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。
テキスト広告の選択
参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(テキストリンク)を取得します。
![A8,netのテキスト広告の選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink21.jpg)
「素材をコピーする」をクリック
![A8.netのリンクのコピー](https://gungii.com/wp/wp-content/uploads/2021/11/aflink22.jpg)
Cocoonのブログの投稿画面に移動します。
アフィリエイトリンクの貼り付け
ブロックの追加
バナー広告を貼りたい場所で「+」ボタンをクリックします。
![WordPress Cocoon ブロックの追加](https://gungii.com/wp/wp-content/uploads/2021/11/aflink31.jpg)
「囲みボタン」ブロックの選択
![WordPress Cocoon ブロックの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink32.jpg)
アフィリエイトリンクの貼り付け
右側に「囲みボタン」の設定画面が表示されますので、「リンクタグ・ショートコード」にアフィリエイトリンクを貼り付けます。
![WordPress Cocoon リンクの貼り付け](https://gungii.com/wp/wp-content/uploads/2021/11/aflink33.jpg)
ボタンの調整
ボタンの大きさや色を調整します。
サイズを「中」、背景色を紺にします。
![WordPress Cocoon アフィリエイトリンクのサイズ、色の調整](https://gungii.com/wp/wp-content/uploads/2021/11/aflink34.jpg)
円形にして、光らせます。
![WordPress Cocoon アフィリエイトリンクの円形にして光らせる](https://gungii.com/wp/wp-content/uploads/2021/11/aflink35.jpg)
配置を中央にします。
![WordPress Cocoon アフィリエイトリンクの配置の調整](https://gungii.com/wp/wp-content/uploads/2021/11/aflink36.jpg)
囲みボタンの確認
「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。
![WordPress Cocoon アフィリエイトリンクの表示された広告ボタン](https://gungii.com/wp/wp-content/uploads/2021/11/aflink37.jpg)
Cocoonのアフィリエイトタグとテンプレート
Cocoonには、任意の内容をショートコードとして貼り付ける機能(アフィリエイトタグ、テンプレートの管理機能)があります。
例えば、ASPでアフィリエイトしていた商品が終了することもあります。キャンペーンが終われば、リンクを差し替えなければならないこともあります。いくつもの記事に商品のリンクを貼っていれば、全て修正しなければなりません。そこで便利なのがアフィリエイトタグです。
Cocoonでは、アフィリエイトタグを一元管理できる機能があり、アフィリエイトタグに登録しておくことで、いくつもの記事へのリンクが簡単に貼れます。
アフィリエイトタグを登録すると、「ショートコード」(affi id=2等)が割り当てられます。それが、登録した広告を呼び出して表示してくれますので、1度設定すれば、ASPサイトから広告リンクをコピペしないで挿入できるようになります。
Cocoonでは、テンプレート文(定型文)を登録して何度でも利用することができる仕組み(テンプレート機能)があります。定型文を設定しておくと、ショートコードで簡単に呼び出すことのできる大変便利な機能です。
例えば、記事の冒頭や最後に、毎回決まったフレーズがあれば、テンプレートを活用したほう毎回毎回、同じ内容を入力するよりもはるかにラクです。
[ アフィリエイトタグとテンプレートのデメリット ]
テーマを変更すると、ショートコードがそのまま表示される。
Cocoonにかぎったことではなく、ショートコードそのものがテーマが変更されると、そのまま表示されてしまいます。
例えば、テーマを「cocoon」から「Twenty Twenty-One」に変更すると
<変更前>
![WordPress Cocoon アフィリエイトリンクの変更前の広告](https://gungii.com/wp/wp-content/uploads/2021/11/aflink41.jpg)
<変更後>
![WordPress Cocoon アフィリエイトリンクの変更後の広告](https://gungii.com/wp/wp-content/uploads/2021/11/aflink42.jpg)
[ 対応策 ]
テーマを変更する場合は、ショートコード対応があるテーマを選ぶことがお薦めです。
但し、その場合でもショートコード自体([ affi id=2 ])が異なりますので、文字列置換のプラグイン(SeachRegex等)で、ショートコードの文字列置換が必要です。
Cocoon アフィリエイトタグの使い方
アフィリエイトリンクの取得
ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。
広告の選択
バナー広告又は、テキスト広告のアフィリエイトリンクを取得します。
![A8.netの広告リンクの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink11.jpg)
「素材をコピーする」をクリック
![A8.netのリンクのコピー](https://gungii.com/wp/wp-content/uploads/2021/11/aflink12.jpg)
Cocoonのブログの投稿画面に移動します。
アフィリエイトタグの作成
「アフィリエイトタグ」をクリック
Cocoon設定から、アフィリエイトタグをクリックします。
![WordPress Cocoon アフィリエイトタグの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink51.jpg)
新規追加をクリック
アフィリエイトタグを新規作成します。
![WordPress Cocoon アフィリエイトタグの新規追加ボタン](https://gungii.com/wp/wp-content/uploads/2021/11/aflink52.jpg)
アフィリエイトリンクの貼り付け
タイトルを入力して、アフィリエイトリンクを貼り付けて。「保存」をクリックします。
![WordPress Cocoon アフィリエイトタグのリンクの貼り付け](https://gungii.com/wp/wp-content/uploads/2021/11/aflink53.jpg)
アフィリエイトタグの作成完了
![WordPress Cocoon アフィリエイトタグ一覧](https://gungii.com/wp/wp-content/uploads/2021/11/aflink54.jpg)
アフィリエイト広告の貼付
ブロックの追加
バナー広告を貼りたい場所で「+」ボタンをクリックします。
![WordPress Cocoon ブロックの追加](https://gungii.com/wp/wp-content/uploads/2021/11/aflink13.jpg)
「ショートコード」ブロックの選択
![WordPress Cocoon ブロックの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink55.jpg)
アフィリエイトリンクの貼り付け
![WordPress Cocoon リンクの貼り付け](https://gungii.com/wp/wp-content/uploads/2021/11/aflink56.jpg)
バナーの確認
「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。
![WordPress Cocoon アフィリエイトリンクのバナー広告](https://gungii.com/wp/wp-content/uploads/2021/11/aflink16.jpg)
バナー広告が表示されました。
Cocoon テンプレートの使い方
アフィリエイトリンクの取得
ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。
バナー広告の選択
バナー広告又は、テキスト広告のアフィリエイトリンクを取得します。
![A8.netのバナー広告の選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink11.jpg)
「素材をコピーする」をクリック
![A8.netのリンクのコピー](https://gungii.com/wp/wp-content/uploads/2021/11/aflink12.jpg)
Cocoonのブログの投稿画面に移動します。
テンプレートの作成
「テンプレート」をクリック
Cocoon設定から、テンプレートをクリックします。
![WordPress Cocoon テンプレートの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink61.jpg)
新規追加をクリック
テンプレートを新規作成します。
![WordPress Cocoon テンプレートの新規追加ボタン](https://gungii.com/wp/wp-content/uploads/2021/11/aflink62.jpg)
テンプレートの装飾
タイトルを入力して、PR文などを入力して装飾します。
![WordPress Cocoon テンプレートの装飾](https://gungii.com/wp/wp-content/uploads/2021/11/aflink63.jpg)
アフィリエイトリンクの貼り付け
テキストモードへ切り替え
アフィリエイトリンクをテキストモードから貼り付けます。
![WordPress Cocoon テンプレートのテキストモード](https://gungii.com/wp/wp-content/uploads/2021/11/aflink64.jpg)
ビジュアルモードへ切り替え
ビジュアルモードに戻して、「保存」をクリックします。
![WordPress Cocoon テインプレートのビジュアルモード](https://gungii.com/wp/wp-content/uploads/2021/11/aflink65.jpg)
テンプレートの作成完了
![WordPress Cocoon テンプレートの作成完了](https://gungii.com/wp/wp-content/uploads/2021/11/aflink66.jpg)
アフィリエイト広告の貼付
ブロックの追加
バナー広告を貼りたい場所で「+」ボタンをクリックします。
![WordPress Cocoon ブロックの追加](https://gungii.com/wp/wp-content/uploads/2021/11/aflink13.jpg)
「ショートコード」ブロックの選択
![WordPress Cocoon ブロックの選択](https://gungii.com/wp/wp-content/uploads/2021/11/aflink67.jpg)
アフィリエイトリンクの貼り付け
![WordPress Cocoon アフィリエイトリンクの貼り付け](https://gungii.com/wp/wp-content/uploads/2021/11/aflink68.jpg)
バナーの確認
「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。
![WordPress Cocoon アフィリエイトリンクのバナー広告の確認](https://gungii.com/wp/wp-content/uploads/2021/11/aflink69.jpg)
テンプレートが表示されました。