覚えておきたい！CocoonでA8.netの広告を貼る方法！

A8.netの広告素材には表示回数を計測するために、imgタグが使われています。

このimgがあるため改行がうまく機能せず、広告リンクがうまく表示されないことがあります。

WordPressのテーマ「Cocoon」を使っている方であれば表示を崩さず、ボタンリンクも簡単に設置することが可能です。

今回はテーマ「Cocoon」を使っている方に向けて、A8.netの広告の貼り方について解説していきます。

初心者でも安心のサポート！アフィリエイトを始めるならA8.net

A8.netのHTMLタグ形式について

まずA8.netのHTMLタグについて知っておきましょう。

A8.netの広告にはaタグの後に、縦横1pxのimgタグが付いています。

このimgタグはトラッキングの役割を持っており、管理画面で広告を何回表示したかなどカウントしてくれるものです。

<a href="https://px.a8.net/svt/xxxxxxxxxxxxxxx" rel="nofollow">テキスト</a>
<img border="0" width="1" height="1" src="https://xxxxxxxxxxxxxxxxxx" alt="">

このimgタグがあるため、改行がうまく機能せず表示が崩れてしまうことがあります。

またHTMLタグの改変は禁止となっているため、imgタグの削除はできません。

基本的なA8.netの広告の貼り方

ブロックエディターであればカスタムHTMLのブロック、クラシックエディターであればHTML挿入からHTMLタグを入力できます。

ブロックエディターの場合

ブロックを追加からカスタムHTMLを選択、または段落に「/カスタムHTML」と入力してブロックを挿入します。

HTMLタグが記入できるボックスが表示されるので、A8.netの広告タグを貼り付けます。

クラシックエディターの場合

クラシックエディターはツールバーのHTML挿入からHTMLタグを入力できます。

テキストボックスが表示されるので、そこにA8.netのHTMLタグを入力し、OKをクリックします。

Pタグを使ってA8.netの広告を貼る方法

カスタムHTMLでそのまま入力したものにはPタグが付いていないため、リンク下のテキストがくっついたように表示されてしまいます。

エディターの画面ではブロックごとに改行を入れていますが、右の画像がプレビューの画面では改行が機能していません。

これはHTMLタグの前後にPタグを加えることで、解決ができます。

<p><a href="https://px.a8.net/svt/xxxxxxxxxxxxxxx" rel="nofollow">テキスト</a>
<img border="0" width="1" height="1" src="https://xxxxxxxxxxxxxxxxxx" alt=""></p>

Pタグを入れて表示すれば、綺麗にリンクを貼ることが可能です。

なおクラシックエディターの場合は自動的にPタグがつくため、手動で入れる必要はありません。

ボタンでA8.netの広告を貼る方法

デフォルトのテキストリンクではなく、装飾したボタンなどを使って広告を貼りたい方も多いと思います。

Cocoonのテーマを使っている方であれば、ボタンを簡単に実装することが可能です。

ブロックエディターの方はブロックの挿入から囲みボタンと検索、または段落に「/囲みボタン」と入力してブロックを追加してください。

囲みボタンを選択すると、右側の設定画面に「リンクタグ・ショートコード」を入力するテキストボックスが表示されます。

ここにA8.netのHTMLタグを貼り付けます。

デフォルトだとこのように表示されます。

下のオプションでサイズや色を変更することが可能です。

クラシックエディターの方はHTML挿入からA8.netのHTMLタグを貼り付けます。

リンクを全選択します。

この状態でスタイルから囲みボタンへ進み、好きなデザインを選びましょう。

レッド(大)で表示するとこのようになります。

CocoonでA8.netの広告を貼る方法まとめ

今回はCocoonでA8.netの広告を貼る方法について解説しました。

Cocoonを使っている方であれば、A8.netの広告を綺麗に貼ることができます。

難しい操作はなく誰でも簡単に実装できるので、是非試してみてください！