アフィリエイトリンクをボタン化する作り方、CSSを追加せずに簡単にできる方法ををご案内します。
アフィリエイトリンクの貼り方には、テキストやバナーなどの種類がありますが、ボタンは目に留まりやすいし、押すことがわかっているので、クリックされます。
読者が詳しく知りたいと興味を持った時、ボタンがあって、すぐにサイトにつながった方が親切です。
アフィリエイトリンクをボタン化したら、アフィリエイトが契約されました!
そこで、プログラミングの知識が無くても、CSSを追加しなくても、ボタン化ができる方法をまとめます。
目次
アフィリエイトリンクをボタン化する作り方!
まず、アフィリエイトリンクをボタン化した広告とは、こちら↓
[su_button url=”https://cl.link-ag.net/click_product_link/5b9851/ce6dc703?redirect_url=https://video.unext.jp/title/SID0065766″ style=”3d” background=”#1462fe” color=”#f7ffff” size=”13″ wide=”17″ center=”yes” icon_color=”#f4f3f3″ text_shadow=”1px 1px 1px #f3feff”]U-NEXTの公式サイトへ[/su_button]
記事を読んだ流れで、間違いなく目に留まって押したくなります。
CSSを追加せずにアフィリエイトリンクをボタン化するには、ショートコードのボタンモードで作ります。
ワードプレステーマには、ショートコードが元々入っているものもあります。
しかし、ショートコードが付いていないワードプレステーマを使っている場合は、プラグイン「Shortcodes Ultimate」をインストールして、ショートコードを追加して使えるようにします。
プラグイン「Shortcodes Ultimate」のインストール方法はこちら⇩
アフィリエイトリンクをボタン化するプラグインShortcodesUltimateのインストール方法!
ショートコードが使えるようになったら、アフィリエイトリンクボタンを作ります。
ASPからアフィリエイトリンクを取得する
登録しているASP(アフィリエイトサービスプロバーダー)から、アフィリエイトリンクを取得します。
例として、ASPのA8.netで動画配信サイトのU-NEXTのアフィリエイトリンクをボタン化していきます。
1:A8.netの公式サイトにアクセス
検索窓(赤丸が付いているところ)に「U-NEXT」と入れます。
![](https://rico-affiliate.com/wp-content/uploads/2022/09/スクリーンショット-259_LI-300x164.jpg)
2:赤矢印の「商品リンク作成」をクリック
![](https://rico-affiliate.com/wp-content/uploads/2022/10/スクリーンショット-421-300x165.jpg)
3:商品リンクの説明の中の青い部分「https://www.video.unext.jp/title/」をコピーします。
![](https://rico-affiliate.com/wp-content/uploads/2022/10/スクリーンショット-420-300x168.png)
4:更に下にある「テキスト」に行きます。
「テキスト」の「リンク先URL」に先ほどコピーしたURL「https://www.video.unext.jp/title/」を貼り付けます。
![](https://rico-affiliate.com/wp-content/uploads/2022/10/スクリーンショット-422-300x169.png)
更にボタンをクリックしたら、直接リンクしたい動画に行けるようにします。
5:U-NEXTの公式サイトに行って、リンクしたい動画を出して、URLのコード(青い部分)をコピーします。
![](https://rico-affiliate.com/wp-content/uploads/2022/10/スクリーンショット-420-300x188.jpg)
6:A8.netに戻って、先ほど「テキスト」の「リンク先URL」に張り付けた「https://www.video.unext.jp/title/」の後にU-NEXTでコピーしたコードを貼り付けます。
するとhttps://www.video.unext.jp/title/SID0028574になります。
7:下の「リンクテキスト」には「U-NEXT公式サイトへ」と入力して「商品リンク作成」のボタンをクリックします。
すると下の枠の中に、商品リンクのコードが表示されます。
長いコードの中から、<a href=の後に記述されている「https://○○○○○」の部分のコードをコピーします。
A8.netなら赤の部分です。
<a href=”https://px.a8.net/svt/ejp?a8mat=356W0M+BE7Q4I+3250+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.video.unext.jp%2Ftitle%2FSID0028574” rel=”nofollow”>U-NEXT公式サイトへ</a>
アフィリエイトリンクをボタン化します
1:ワードプレスの投稿画面で、「ショートコードを挿入」をクリック
2:ショートコードの一覧表が出たら、「ボタン」をクリック
![](https://rico-affiliate.com/wp-content/uploads/2022/10/スクリーンショット-423-300x170.png)
3:ボタンの設定を入力して、ボタンを作成します。
ボタンをクリックすると、作成するボタンの設定画面が出ます。
設定を順番に解説します。
リンク
![Shortcodes Ultimateのボタンのリンク設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000003-2.jpg)
ボタンをクリックしたときに表示されるリンク先のURLを入力します。
ここに先ほどコピーしたコードを貼ります。
A8.netなら赤の部分です。
<a href=”https://px.a8.net/svt/ejp?a8mat=356W0M+BE7Q4I+3250+BW8O2&a8ejpredirect=https%3A%2F%2Fwww.video.unext.jp%2Ftitle%2FSID0028574” rel=”nofollow”>U-NEXT公式サイトへ</a>
ターゲット
![Shortcodes Ultimateのボタンのターゲット設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000004-2.jpg)
URLの開き方を「同じタブで開く」か「新しいタブで開く」のどちらにするかを選択します。
- Open in same tab…同じタブで開く
- Open in new tab…新しいタブで開く
アフィリエイトリンクは同じタブで開くに設定します。
スタイル
![Shortcodes Ultimateのボタンのスタイル設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000005-2.jpg)
ボタンのデザインを選択します。
シンプルな「デフォルトスタイル」から、立体的な「3Dスタイル」がありますが、ひと目で押せることがわかるように立体的な3Dスタイルにします。
背景
![Shortcodes Ultimateのボタンの背景設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000006-1.jpg)
ボタンのベース色を設定します。
ボタンの色は、目立ったカラーがおすすめです。
安心感を与えるというブルー系がおすすめです。
テキストの色
![Shortcodes Ultimateのボタンのテキストの色設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000007-1.jpg)
ボタン上に表示させるテキストの色を設定します。
ボタン背景色とのバランスを考えて、読みやすい色にします。
サイズ
![Shortcodes Ultimateのボタンのサイズ設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000008-1.jpg)
ボタンのサイズを設定します。
「1」~「20」の幅から選択して設定します。
サイトの記事全体を見て、小さすぎず大きすぎないボタンのサイズに設定しましょう。
可変
![Shortcodes Ultimateのボタンの可変設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000009-2.jpg)
可変設定をクリックして「はい」にすると端から端まで伸びるボタンを作成することができます。
中央
![Shortcodes Ultimateのボタンの中央設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000010-1.jpg)
「はい」にすると、ボタンを自動的に中央に配置させることができます。
半径
![Shortcodes Ultimateのボタンの半径設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000011-1.jpg)
ボタンの周囲のデザインです。
四角いボタンにする「正方形スタイル」や丸みのあるボタンにする「ラウンドスタイル」好みの半径スタイルを選択します。
アイコン
![Shortcodes Ultimateのボタンのアイコン設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000012-1.jpg)
アイコンを設定すると、ボタン内テキストの左側にアイコンを挿入することができます。
元から用意されているアイコンを選ぶのであれば、「アイコンピッカー」を選択
オリジナルのアイコンを使いたいのであれば、「メディアマネージャ」を選択
アイコンの色
![Shortcodes Ultimateのボタンのアイコンの色設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000013-1.jpg)
アイコンの色を設定することができます。
初期設定では白色になっています。
テキストの影
![Shortcodes Ultimateのボタンのテキストの影設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000014-1.jpg)
ボタン内のテキストに影を付けるなら設定します。
カラーコードの入力によって影の色を設定することもできます。
説明
![Shortcodes Ultimateのボタンの説明設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000015-1.jpg)
ボタン内テキストの下部に本来のテキストとは別の文章を入れることができます。
補足の説明を入れたいときなどに設定します。
onClick
![Shortcodes UltimateのボタンのonClick設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000016-1.jpg)
JavaScriptコードを入力することで、ボタンに動きを出したりすることができます。
高度な設定になるので、特に必要がなければ設定しなくてOK
rel 属性
![Shortcodes Ultimateのボタンのrel 属性設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000017-2.jpg)
リンクにrel属性を付けたいときに入力します。
title 属性
![Shortcodes Ultimateのボタンのtitle 属性設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000018-1.jpg)
特にこだわりがなければ空欄でOK
Button ID
![Shortcodes UltimateのボタンのButton ID設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000019-1.jpg)
特にこだわりがなければ空欄でOK
別のCSSクラス
![Shortcodes Ultimateのボタンの別のCSSクラス設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000020-1.jpg)
特にこだわりがなければ空欄でOK
コンテンツ
![Shortcodes Ultimateのボタンのコンテンツ設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000021-1.jpg)
ボタン内のテキストの文字になります。
「公式サイトはこちら」にするとクリック率が高くなります。。
ライブプレビュー
![Shortcodes Ultimateのボタンのライブプレビュー設定](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000022.jpg)
記事内にボタンショートコードを挿入する前に「ライブプレビュー」をクリックすると、設定したボタンを確認することができます。
![プレビュー機能で表示させたボタン](https://kouhei-affiliate.com/wp-content/uploads/2018/09/WS000023.jpg)
ボタンを確認したら、「ショートコードを挿入する」をクリックしてボタンを挿入します。
4:投稿記事のプレビュー画面で、ボタンをクリックして、設定したリンク先に飛ぶか確認します。
以上でアフィリエイトリンクがボタン化できました。
アフィリエイトリンクの配置
アフィリエイトリンクは1つだけ貼るよりも、テキストやバナーなど2、3個配置すると、どれかを押したくなる心理が働きます。
⇩(俳優名)ドラマ「○○」を無料で見るならこちら⇩
[su_button url=”https://cl.link-ag.net/click_product_link/5b9851/ce6dc703?redirect_url=https://video.unext.jp/title/SID0065766″ style=”3d” background=”#1462fe” color=”#f7ffff” size=”13″ wide=”17″ center=”yes” icon_color=”#f4f3f3″ text_shadow=”1px 1px 1px #f3feff”]U-NEXTの公式サイトへ[/su_button]
本ページの情報は、2022年 月時点のものです!
最新の配信状況はU-NEXTの公式サイトでご確認ください!
人気ブログランキングに参加しています
画像をクリックして応援していただけたら嬉しいです!