ショートコードの「ボタン」にアフィリエイトリンクを貼り付けるという情弱さを発揮

どうも、元国家公務員ブロガーの相原 ユーキです。

ブログを開設してから1年以上経ちますが、恐ろしく初歩的なミスをし続けていた可能性が浮上しました。ブロガーの皆さんは大丈夫ですよね・・・?


Ads by Google

結論:リンクの貼り方をずーっと間違えていたみたい

違和感はずっとあったんですが、アフィリエイトリンクの貼り方が間違っていることを昨晩確信しました・・・。

自分の備忘録、自戒、そして新人ブロガーさんへのアドバイスも兼ねて記事にしておきます。

 

ASPのアフィリエイトリンクの構成

テキスト文言 (押しても無効です)

アフィリンク(HTML)
<a href="//ck.jp.ap.valuecommerce.com/servlet/referral?sid=●●●" target="_blank" rel="nofollow">

<img src="//ad.jp.ap.valuecommerce.com/servlet/gifbanner?sid=●●●" height="1" width="1" border="0">テキスト文言</a>

例えば、ValueCommerceのアフィリエイトリンク(テキスト)って、上のような作りになっていますよね。

MEMO
A8では「テキスト文言」の入る位置が微妙に違いますが、<a>と<img>の二つから構成されているという点では同じです。
 

リンクは「丸々」貼り付けないといけない

今までぼくは、上段の <a href> の部分だけをコピーしてきて、ショートコードボタンのURL部分に差しこんでいました。が、これが決定的に間違っていたようです。

一見意味不明な、下段のコード <img scr> も必要だったんですね。知らなかったーー

MEMO
下段のコードは、1ピクセル四方の、めちゃめちゃ小さい「画像」を描写するためのものなんですが、これは広告のインプレッション数やクリック数を正確に計測するために必要なのだそう。

だから、下段も忘れずに「丸ごと」コピーしなきゃいけないんです。

 

ブログテーマに標準搭載されている「ショートコード」の「ボタン機能」は使えない

ということは、ブログテーマに標準搭載されているショートコードの「ボタン機能」からアフィリエイト案件に飛ばすことは難しくなるんですね。

ショートコードのボタンには上のようなHTMLコードを記述することができないので。


Ads by Google

ではどうするか? HTMLとCSSで解決できるようです

とは言っても、無機質でダサいボタンデザインは嫌ですよね・・・。

上のような、ホバー時に浮き出すようなオシャレなボタンの中にアフィリエイトリンクを仕込むには、どうすれば良いのでしょうか?

 

『節約生活』さんで紹介されていた方法が良さげです

対策として、『節約生活』というブログで紹介されていた方法が良さげだったので、ぼくのブログでも紹介させていただくことにしました。

アフィリエイトリンク(HTML)を <div> タグで囲んで、クラス名をつけて、CSSで見た目を整形してやるのが良いです。

 

アフィリエイトリンクの正しい貼り方(HTML)

HTML
<div class="btn_link">ここにアフィリエイトリンク</div>

「ここにアフィリエイトリンク」という部分に、ASPのアフィリンクを「丸ごと」コピーします。そして、ボタンを配置したい場所に、上記のHTMLをそのまま置いておきます。

MEMO
アフィリンク中の「テキスト文言」を変更したい場合は、このタイミングで変えましょう。
注意
Wordpressの執筆画面の「テキスト」タブから記事を執筆しましょう。
 

CSSでボタンの見た目を作る

上の <div>タグ には「btn_link」というクラス名が付いているので、CSSでは「.btn_link」に対して見た目を整形していきます。

HTML
/*アフィリエイト用ボタンリンク*/
.btn_link{
text-align:center;/*中央寄せ*/
}
.btn_link>a{
    margin: .5em .5em .5em 0;
    text-decoration: none;
    display: inline-block;
    padding: .4em 1.3em;
    border-radius: 3px;
    box-shadow: 0 2px 3px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
    background-color: #4fc3f7;/*背景色*/
    color: #fff;/*文字色*/
    font-weight: bold;/*文字の太さ*/
}
.btn_link>a:hover{
    text-decoration: none;
    box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
    -webkit-tap-highlight-color: transparent;
}
注意
「btn」の前のピリオド(.)を忘れずに!

以上をコピペすれば、オシャレなボタンが完成。ショートコード経由で作ったボタンではないので、ASPのHTMLコードがしっかりと含まれている完全なリンクになっています。

MEMO
確認すればわかりますが、<img>タグの情報もしっかりと入っているので、インプレッション数やクリック数が正しく反映されるはず。

いやー、これ知らずに1年間ブログ運営してきたのはヤバイですねw

Ads by Google