【Affinger6】アフィリエイトボタンの作り方 【最も簡単】

Affinger6のテーマを使い始めて、やってみたことが、リンクボタンを活用することです。

アフィリエイトをボタンリンクにする方法を探しました。

最初は、なかなかわからなかったのですが、ようやく整理がついたのでまとめます。

Affinger6のテーマはアフィリエイトブログをしたい人には、絶対おすすめです！

ボタンリンクとは

下記のようなボタンのこと言います。

光る演出もあり、普通のリンクよりもクリックしてもらいやすいようです。

リンクボタンを作る事前準備

リンクの種類を理解する

アフィリエイトのリンクは大きく2種類あります。

1つ目はURL形式です。下記のようなものですね。

アマゾンのリンク：https://amzn.to/40XsU7T
楽天のリンク：https://a.r10.to/hUnesA

2つ目は＜a href="～"＞の形式のものです。

<a href>は基本的なHTMLタグのひとつで、一般的な使い方は＜a href="リンク先のＵＲＬ">アンカーテキスト</a＞のように使うものです。

この形式のリンクの"リンク先のURL"のみを抜き出して貼ることは『リンクの改変』にあたり、ASPでは禁じられていることが多いです。

この2つでそれぞれボタンリンクの作り方は異なります。

2つ目のほうがやり方がわかりにくいです。

ボタンが光る演出を設定する

ランキング管理の設定→基本設定の一番下にある「ボタンに光る演出を入れる」にチェックをして、Saveしましょう。

これをしないと、2つ目の＜a href="～"＞の形式のものでボタンを作ったときに光ってくれません。

リンクボタンを作る：クラシックブロックを使う

インターネットで調べると、色々な方法が出てきますが、一番シンプルなのはクラシックブロックを使う方法です。

クラシックブロックというのは下記です。

もし、下記のようにタグや太字が出てない場合は、ツールバーが消えている状態だと思いますので、下記の四角で囲われているアイコンをクリックすると、この状態になると思います。

URL形式のリンクでリンクボタンを作る方法

タグ→カスタムボタン→MCボタン→あとは色を選びます。

URLの更新と言葉の更新

下記のurl = "#"の#をリンクしたいアフィリエイトのURLで書き換えます。

最初に示したアマゾンのリンクならば、"https://amzn.to/40XsU7T"に書き換えます。

あとは、「今すぐ申し込む」、「太字のテキスト」、「※マイクロコピーを書いてみよう」を好きな言葉に変えて完了です。

上のHTMLをそのままボタンにすると下記になります。

＜a href="～"＞の形式のリンクでリンクボタンを作る方法

タグ→カスタムボタン→ボタンAかボタンBを選びます。

HTMLとして編集する

ブロックへ変換の右の3点をクリックし、「HTMLとして編集」をクリックします

＜a href="#">ボタンA</a＞の部分を書き換える

下記の状態になっていると思いますので、＜a href="#">ボタンA</a＞の箇所を、アフィリエイトリンクと書き換えます。

アフィリエイトのリンクから＜a href="リンク先のＵＲＬ">アンカーテキスト</a＞の部分をコピーして置き換えるということです。

リンクボタンを作るやり方まとめ

Affinger6でアフィリエイトリンクをボタンリンクで作る方法をまとめました。

これが一番簡単なやり方だと思います。