アフィリエイトリンクをボタン化する方法

以前コメントで質問があったので、今回は「アフィリエイトリンクをボタン化する方法」を解説してみたいと思います。注意点もあるので、一緒に解説していきます。

アフィリエイトリンクでなくて普通のリンクもボタンにする事は可能です。

アフィリエイトリンクのボタン化する手順

一般的なアフィリエイトサイトでよく見かける「公式サイトへ」みたいなボタンですね。

ボタンの画像を用意して作成する方法と、CSSで作っちゃうパターンがあるんですが、今回作成するのはこのCSSのボタンです。

アフィリエイトリンクを以下のようにボタン化する事が可能です。

もしくは2つ横並びとか。

こんな感じでリンクをボタン化できます。一応前提でWordPress。でも全部ではないですが、ほとんどの無料ブログでも多分できるかなと思います。

スタイルシートでボタン作成

まずはスタイルシート(CSS)へ次の記述を追加します。スタイルシートは下に書いた物が優先的に反映されますので、一番下に追加でOKです。

背景色や文字の色、太さなどちょっとした事でクリック率も違ってくるのでカラーや文字色、文字の大きさなどはお好みで変更してみて下さい。

ボタン単品(1つだけのやつ)

横並びボタン

一応必要な部分にコメントを入れてますので、それを見ながら背景色や文字色など変更して使えます。

数カ所「!important」というのを付けている部分があります。これを付けるとその記述が優先的に反映されますので、後で確認した時に反映されない部分がある場合にはその部分の記述に「!important」を付けてみて下さい。

上記スタイルシートを追加できたら保存します。これで準備はOKです。

記事投稿画面でボタンを呼び出す

スタイルシートの記述が保存できたら今度は記事を書く画面(投稿画面)で記事を書いていきます。アフィリエイトリンクのボタン化したい部分に次の記述をします。

単品のボタンの記述

横並びのボタン場合

という感じです。コードが面倒なのでWordPressならプラグイン「AddQuicktag」で1つボタン、2つボタンのコードをそれぞれ登録しておけば投稿画面ですぐに呼び出せます。

よく使うタグを登録し簡単に挿入できるプラグイン【AddQuicktag】

アフィリエイトリンクボタン化の注意点

今回CSSで作るボタンを紹介しましたが、2点ほど注意点があります。

CSSボタンは文字数に注意

画像のボタンと違ってCSSで作成したボタンはボタン内の文字(テキスト)を自由に変更できます。

ただCSSで作成したボタンはボタン内のテキストが長くなるとはみ出す部分が見えませんので注意。

PC、タブレット、スマホでのチェックが必要です。私もあまりチェックしてないのではみ出しているの結構あるかも?

ボタン内のリンク文言の改変に注意

アフィリエイトリンクはテキストリンクを利用するのですが、アフィリエイトリンクによっては上記のような「公式サイトへ」みたいなテキスト文言がない場合もあります。

このテキストの文言は勝手に変更はできません。ほとんどのASPではリンクの改変は基本的に認められてはいませんので、注意が必要です。

自由テキストなどが使えるといいのですが、全てのアフィリエイトリンクで「自由テキスト」が使える訳ではありません。そのため、もし文言を自由に変更できる「自由テキスト」を使いたい場合には必ずそのASPへの問い合わせをしてみて下さい。

「自由テキストは無理です」と言われる事も多いですが、ASPによっては快く自由テキストを追加してくれる場合もあります。

個人的にはafbでお願いする事が多いです。初心者に優しいASPと言われるだけあって、結構色々注文に答えてもらっており、非常にありがたいASPの1つです。

という訳なので、使いたい広告がafbにある場合には自由テキストをお願いしてみる事をおすすめします。

いつも担当の方に激しくお世話になっているので、紹介させて頂きました。

以上アフィリエイトリンクをボタン化する方法でした!もし上手く反映されない場合などありましたらコメント頂けると助かります。どうぞよろしくお願い致します。

WordPressの始め方
サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

アフィリエイトリンクをボタン化する方法”に32件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. たーちゃん

    しげぞう様 

    お礼の返信が遅くなりまして大変申し訳ございませんでした。
    この度は初心者の無礼な質問に親切・丁寧に回答をいただき本当にありがとうございます。
    教えていただいたとおりにいろいろ試してみましたら、ちゃんと表示されるようになりました。感謝でいっぱいです。
    またわからないことがでてくると思いますので、そのときには是非教えていただきたくお願い申し上げます。ありがとうございました(*^^*)

  2. しげぞう 投稿作成者

    たーちゃん様

    コメントありがとうございます。今私も同じデザインで試してみたのですが反映されました。ただ、注意点がいくつかあります。

    1.トップページでは反映されない

    トップページ(抜粋の記事一覧)が表示されるページでは記事中の装飾(CSS)が反映されません(見た目がテキストリンクのまま)。個別ページであれば反映されていると思います。

    2.設定によっては余計な改行が入る

    Enterで改行という設定にしていると余計な改行が入ってボタンの上に余計な余白ができます。これは見た目はボタンですが余計な余白が入ります。なので、divから/divまでをEnterの改行なしでつなげると余計なスペースが入りません。

    3.ブラウザにキャッシュ(以前のデータが残っている)

    これはありがちなんですが、ブラウザに以前のデータが残っててCSSが反映されない場合があります。その時はブログを表示させてリロード。もしくは一度コードを削除して保存し、再度追加して保存。また、別のブラウザで反映されていないか確認をしてみて下さい。

    上記でもし解決しない場合にはお手数ですが、ブログのURLを教えてもらえると助かります。URLはコメント公開時には削除しますのでどうぞよろしくお願い致します。