ブログ

アフィリエイトリンクをボタン化する方法【コピペするだけ】

アフィリエイトリンク ボタン化

アフィリエイトリンクをボタン化する方法【コピペするだけ】

アフィリエイトリンク ボタン化
ぴか
ぴか
アフィリエイトリンクをボタン化したい。
できれば、簡単な方法を知りたい。

こういった疑問を解決します。

✔︎本記事の内容

  • アフィリエイトリンクをボタン化する手順は2つだけ
  • アフィリエイトリンクをボタン化する際の注意点
  • アフィリエイトリンクをボタン化する際におすすめのASP2選

✔︎記事の信頼性

ぴかメモ 管理人情報

この記事を書いているのはブログを3つ運営して、ブログ月収6桁の副業サラリーマンです。本ブログ『ぴかメモ』も2020年4月現在、開設から3ヶ月で5桁の収益をあげています。

アフィリエイトリンクをボタン化することでCTRの向上が見込めます
とはいえ、ボタン化したいけどプログラミング知識はない・・・

本記事ではアフィリエイトリンクのボタン化をコピペのみで、できるようソースコードを提供し、具体的な手順も解説します。

ボタン化する際の注意点やボタン化に最適なASPも紹介するため、安心・安全にボタン化を行うことができますよ。

アフィリエイトリンクをボタン化する手順は2つだけ

アフィリエイトリンク ボタン化

アフィリエイトリンクをボタン化する手順は以下の2つだけ。

  • CSSをコピペ
  • リンクをボタン化する

ひとつひとつ説明していきます。

ぴか
ぴか
5分もあればできちゃうよ

アフィリエイトリンクボタン化①:CSSをコピペ(下準備)

まずはボタン化の元となるCSSをコピペします。

WordPress管理画面のメニューバーから、外観内の『カスタマイズ』➡︎『追加CSS』と遷移して下さい。

追加CSSのテキストエリアに以下のソースコードを貼り付けます。

/*リンクボタン化*/
.af_button>a{
margin: .5em .10em .5em 0;
text-decoration: none;
display: inline-block;
padding: .7em 2em;
border-radius: 3px;
box-shadow: 0 4px 4px rgba(0,0,0,.2), 0 2px 3px -2px rgba(0,0,0,.15);
background-color: #54dcef;/*背景の色*/
color: #fff;/*文字の色*/
font-weight: bold;/*文字の太さ*/
}
.af_button>a:hover{
text-decoration: none;
box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
-webkit-tap-highlight-color: transparent;
}
.af_button{
text-align:center;
}

これで下準備が完了です。

アフィリエイトリンクボタン化②:リンクをボタン化する(実装)

いよいよ、実際にボタン化を行います。

ボタン化したいリンクを以下のようにHTMLで囲むだけです。

<div class=”af_button”>ボタン化したいリンク</div>

ぴか
ぴか
あっという間にできたね!

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

注意

アフィリエイトリンクをボタン化する際は、ASPの規約に違反しないようにしましょう。

違反した場合は、ペナルティとしてアフィリエイトの成果没収提携の解除などが行われる可能性があります。

本記事で紹介した方法であれば、規約には違反しないので問題ありませんが、それ以外でボタンをカスタマイズする際はお気をつけください。

詳しくは以下の記事で解説しています。

関連記事 アフィリエイトリンクをボタン化する際の注意点(守らないとペナルティ)

ボタンのカスタマイズ入門

アフィリエイトリンク ボタン化

本記事で紹介したボタンは水色ですが、ブログの雰囲気に合わない方は色を変更しましょう。

background-color: #54dcef;/*背景の色*/

CSS内『background-color:』の先を変更することで自由にボタンの色を変更できます。

色は原色大辞典から好きな色を見つけて、カラーコードをコピペするだけ。

※リンクをクリックすると原色大辞典へ移動します

アフィリエイトリンクをボタン化する際におすすめのASP2選

アフィリエイトリンク ボタン化

実は、アフィリエイトリンクをボタン化する際には適したASPが存在します

原則、アフィリエイトコードの改変やリンクのテキスト改変はASPの規約違反となるケースが多く、危ない橋を渡ることに。

しかし、ASPから提供されているテキストとボタンで使用したいテキストは異なりますよね。

ボタンで使用するなら「●●に登録!」や「●●の無料のトライアルを体験」のようなポップなテキストを使いたいものです。

そこで、ボタン化する際は「自由テキスト」を使用できる、「もしもアフィリエイト」や「バリューコマース」が最適です。

自由テキストとは?
アフィリエイトリンクに使用するテキストを自由に設定できること

もしもアフィリエイト

運営会社株式会社もしも
会社設立年2004年
報酬支払日月末締め翌々月末払い
最低支払額1,000円以上
得意ジャンルAmazon、楽天、VOD

『もしもアフィリエイト』は振込手数料が無料、「W報酬制度」(報酬額10%上乗せ)があるASPです。

「Amazon」と「楽天」の物販ができることが最大の特徴であり、ブログで商品を紹介したい方は必ず登録しましょう。

詳しくは以下の記事で紹介しています。

関連記事 もしもアフィリエイトの評判・口コミは?メリット・デメリットも解説

\Amazon・楽天の物販ができる/
もしもアフィリエイトの申し込みページはこちら
※ボタンをクリックするともしもアフィリエイトの公式HPに移動します

バリューコマース

運営会社バリューコマース株式会社
会社設立年1996年
報酬支払日月末締め翌々月15日払い
最低支払額1,000円以上
得意ジャンルオールジャンル

「バリューコマース」も「A8.net」と同様、最大手のASPです。

広告が豊富で基本的には「A8.net」と併用することで利用したい広告のほとんどは見つけることができるでしょう。

広告リンク(アフィリエイト)リンクの文字を自由に設定できることが多いことが特徴で、記事の設計の幅が自由になるため、個人的には最もおすすめのASPです。

詳しくは以下の記事で紹介しています。

関連記事 バリューコマースは審査が厳しい?評判・メリット・デメリットを解説

\案件が豊富/
バリューコマースの申し込みページはこちら
※ボタンをクリックするともしもバリューコマースの公式HPに移動します

アフィリエイトリンクをボタン化する方法【コピペするだけ】 まとめ

まとめ

本記事の内容をまとめます。

アフィリエイトリンクをボタン化する手順は以下の通りです。

ボタン化の手順

・CSSをコピペ
・リンクをボタン化する

作業自体は5分程度しかかかりません。

本記事の手順通り、ボタン化をする場合は問題ありませんが、アフィリエイトリンクやリンクのテキスト部分を改変すると、ASPの規約違反になる可能性があるため、ご注意下さい。

自由にボタンの文字を設定したい場合は、「もしもフィリエイト」と「バリューコマース」を利用して、「自由テキスト」でアフィリエイトリンクを発行しましょう。

現代人におすすめの読書サービス知ってますか?

多忙で読書する時間がない、活字が苦手で読書ができない・・・

そんな方におすすめなのがAmazon運営の『Audible』です。
ビジネスマンの間ではスキルアップに使用している方も多くいます。

以下のリンクから申し込みをすると1ヶ月間無料です。

\今なら好きな本が1冊無料/
Amazon Audible公式HP 

クリックするとAudible公式HPに移動します
無料体験はいつ終了するかわからないのでお早めに
※30日間の無料トライアル中は一切料金がかかりません。