PR

【WordPressテーマCocoon】アフィリエイトリンクの設定と使い方

「アフィリエイト広告の貼り方がよくわからない。」

「ブログに一体どうやって貼ったらいいの?」

初心者にとってアフィリエイト広告の貼り方は、以外とつまづきやすいポイントです。

今回は、CocoonでASP(a8.netやもしも等)のアフィリエイト広告の貼り方についてお伝えします。Cocoonはアフィリエイト広告が、とてもあつかいやすいテーマです。

A8.netのアフィリエイトリンクから次に示すようなバナー広告、テキスト広告、広告ボタンの貼り付け方を具体的に解説します。

バナー広告
WordPress Coconn アフィリエイトリンクのバナー広告例
テキスト広告
WordPress Cocoon アフィリエイトリンクのテキスト広告例
広告ボタン
WordPress Cocoon アフィリエイトリンクの広告ボタン例
広告の装飾
WordPress Cocoon アフィリエイトリンクの装飾テキスト広告例
スポンサーリンク

Cocoonアフィリエイト広告の貼り方(動画)

「Cocoonアフィリエイトリンクの設定と使い方(動画)」は、こちら

スポンサーリンク

Cocoon バナー広告の貼り付け方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

バナー広告の選択

参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(バナーリンク)を取得します。

A8.netのバナーリングの取得

「素材をコピーする」をクリック

A8.netのリンクのコピー

Cocoonのブログの投稿画面に移動します。

アフィリエイトリンクの貼り付け

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

WordPress Cocoon ブロックの追加

「カスタムHTML」ブロックの選択

WordPress Cocoon ブロックの選択

バナー広告の貼り付け

取得したアフィリエイトリンクを貼り付けます。

WordPress Cocoon アフィリエイトリンクの貼り付け

バナー広告の確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

WordPress Cocoon 表示されたバナー広告

バナー広告が表示されました。

Cocoon テキスト広告の貼り付け方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

テキスト広告の選択

参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(テキストリンク)を取得します。

A8.netのテキスト広告の選択

「素材をコピーする」をクリック

A8.netのリンクのコピー

Cocoonのブログの投稿画面に移動します。

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン ・・・880円/月額

キャンペーン期間:2024年7月4日(木)12:00 ~ 2024年8月6日(火)17:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを2つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー

 

アフィリエイトリンクの貼り付け

ブロックの追加

テキスト広告を貼りたい場所で「+」ボタンをクリックします。

WordPress Cocoon ブロックの追加

「カスタムHTML」ブロックの選択

WordPress Cocoon ブロックの選択

テキスト広告の貼り付け

WordPress Cocoon リンクの貼り付け

テキスト広告の確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

WordPress Cocoon 表示されたテキスト広告

テキスト広告が表示されました。

Cocoon アフィリエイト広告ボタンの貼り方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

テキスト広告の選択

参加中プログラムの中から「レンタルサーバー[エックスサーバー]」のアフィリエイトリンク(テキストリンク)を取得します。

A8,netのテキスト広告の選択

「素材をコピーする」をクリック

A8.netのリンクのコピー

Cocoonのブログの投稿画面に移動します。

アフィリエイトリンクの貼り付け

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

WordPress Cocoon ブロックの追加

「囲みボタン」ブロックの選択

WordPress Cocoon ブロックの選択

アフィリエイトリンクの貼り付け

右側に「囲みボタン」の設定画面が表示されますので、「リンクタグ・ショートコード」にアフィリエイトリンクを貼り付けます。

WordPress Cocoon リンクの貼り付け

ボタンの調整

ボタンの大きさや色を調整します。

サイズを「中」、背景色を紺にします。
WordPress Cocoon アフィリエイトリンクのサイズ、色の調整
円形にして、光らせます。
WordPress Cocoon アフィリエイトリンクの円形にして光らせる
配置を中央にします。
WordPress Cocoon アフィリエイトリンクの配置の調整

囲みボタンの確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

WordPress Cocoon アフィリエイトリンクの表示された広告ボタン

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン ・・・880円/月額

キャンペーン期間:2024年7月4日(木)12:00 ~ 2024年8月6日(火)17:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを2つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー

 

Cocoonのアフィリエイトタグとテンプレート

Cocoonには、任意の内容をショートコードとして貼り付ける機能(アフィリエイトタグ、テンプレートの管理機能)があります。

アフィリエイトタグ

例えば、ASPでアフィリエイトしていた商品が終了することもあります。キャンペーンが終われば、リンクを差し替えなければならないこともあります。いくつもの記事に商品のリンクを貼っていれば、全て修正しなければなりません。そこで便利なのがアフィリエイトタグです。
Cocoonでは、アフィリエイトタグを一元管理できる機能があり、アフィリエイトタグに登録しておくことで、いくつもの記事へのリンクが簡単に貼れます。

アフィリエイトタグを登録すると、「ショートコード」(affi id=2等)が割り当てられます。それが、登録した広告を呼び出して表示してくれますので、1度設定すれば、ASPサイトから広告リンクをコピペしないで挿入できるようになります。

テンプレート

Cocoonでは、テンプレート文(定型文)を登録して何度でも利用することができる仕組み(テンプレート機能)があります。定型文を設定しておくと、ショートコードで簡単に呼び出すことのできる大変便利な機能です。

例えば、記事の冒頭や最後に、毎回決まったフレーズがあれば、テンプレートを活用したほう毎回毎回、同じ内容を入力するよりもはるかにラクです。

[ アフィリエイトタグとテンプレートのデメリット ]

テーマを変更すると、ショートコードがそのまま表示される。
Cocoonにかぎったことではなく、ショートコードそのものがテーマが変更されると、そのまま表示されてしまいます。
例えば、テーマを「cocoon」から「Twenty Twenty-One」に変更すると

<変更前>

WordPress Cocoon アフィリエイトリンクの変更前の広告

<変更後>

WordPress Cocoon アフィリエイトリンクの変更後の広告

[ 対応策 ]

テーマを変更する場合は、ショートコード対応があるテーマを選ぶことがお薦めです。
但し、その場合でもショートコード自体([ affi id=2 ])が異なりますので、文字列置換のプラグイン(SeachRegex等)で、ショートコードの文字列置換が必要です。

Cocoon アフィリエイトタグの使い方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

広告の選択

バナー広告又は、テキスト広告のアフィリエイトリンクを取得します。

A8.netの広告リンクの選択

「素材をコピーする」をクリック

A8.netのリンクのコピー

Cocoonのブログの投稿画面に移動します。

アフィリエイトタグの作成

「アフィリエイトタグ」をクリック

Cocoon設定から、アフィリエイトタグをクリックします。

WordPress Cocoon アフィリエイトタグの選択

新規追加をクリック

アフィリエイトタグを新規作成します。

WordPress Cocoon アフィリエイトタグの新規追加ボタン

アフィリエイトリンクの貼り付け

タイトルを入力して、アフィリエイトリンクを貼り付けて。「保存」をクリックします。

WordPress Cocoon アフィリエイトタグのリンクの貼り付け

アフィリエイトタグの作成完了

WordPress Cocoon アフィリエイトタグ一覧

アフィリエイト広告の貼付

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

WordPress Cocoon ブロックの追加

「ショートコード」ブロックの選択

WordPress Cocoon ブロックの選択

アフィリエイトリンクの貼り付け

WordPress Cocoon リンクの貼り付け

バナーの確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

WordPress Cocoon アフィリエイトリンクのバナー広告

バナー広告が表示されました。

Cocoon テンプレートの使い方

アフィリエイトリンクの取得

ASPからアフィリエイトリンクを取得します。ここでは、a8.netで取得します。

バナー広告の選択

バナー広告又は、テキスト広告のアフィリエイトリンクを取得します。

A8.netのバナー広告の選択

「素材をコピーする」をクリック

A8.netのリンクのコピー

Cocoonのブログの投稿画面に移動します。

テンプレートの作成

「テンプレート」をクリック

Cocoon設定から、テンプレートをクリックします。

WordPress Cocoon テンプレートの選択

新規追加をクリック

テンプレートを新規作成します。

WordPress Cocoon テンプレートの新規追加ボタン

テンプレートの装飾

タイトルを入力して、PR文などを入力して装飾します。

WordPress Cocoon テンプレートの装飾

アフィリエイトリンクの貼り付け

テキストモードへ切り替え

アフィリエイトリンクをテキストモードから貼り付けます。

WordPress Cocoon テンプレートのテキストモード
ビジュアルモードへ切り替え

ビジュアルモードに戻して、「保存」をクリックします。

WordPress Cocoon テインプレートのビジュアルモード

テンプレートの作成完了

WordPress Cocoon テンプレートの作成完了

アフィリエイト広告の貼付

ブロックの追加

バナー広告を貼りたい場所で「+」ボタンをクリックします。

WordPress Cocoon ブロックの追加

「ショートコード」ブロックの選択

WordPress Cocoon ブロックの選択

アフィリエイトリンクの貼り付け

WordPress Cocoon アフィリエイトリンクの貼り付け

バナーの確認

「更新」をクリックして、プレビューでアフィリエイトリンクを確認します。

WordPress Cocoon アフィリエイトリンクのバナー広告の確認

テンプレートが表示されました。

初回のご利用料金が最大30%オフ!

キャンペーン期間中に、新規にお申し込みいただいたサーバーアカウント
スタンダードプラン ・・・880円/月額

キャンペーン期間:2024年7月4日(木)12:00 ~ 2024年8月6日(火)17:00まで

プラン契約特典の「独自ドメイン永久無料特典」

サーバーご契約者様が、独自ドメインを2つ無料でご利用いただけます。
「.com」や「.net」などの人気ドメインが、サーバー契約が続く限り永久無料です。

エックスサーバー