当サイトではアフィリエイト広告を利用しています 豆知識

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

Affinger6のテーマを使い始めて、やってみたことが、リンクボタンを活用することです。
アフィリエイトをボタンリンクにする方法を探しましたが、なかなかわからなかったのですが、ようやく整理がついたのでまとめます。

こんな方におすすめ

  • Affinger6を使っていてアフィリエイトをボタンリンクで作りたい人
  • 一番シンプルなやり方を知りたい人

興味を持った方はこちら

Affinger6のダウンロードサイト

※ボタンリンクが簡単に作れる

ボタンリンクとは

下記のようなボタンのこと言います。光る演出もあり、普通のリンクよりもクリックしてもらいやすいようです。

太字のテキスト

今すぐ申し込む

※マイクロコピーを書いてみよう

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

リンクの種類を理解する

アフィリエイトのリンクは大きく2種類あります。
1つ目はURL形式です。下記のようなものですね。

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

2つ目は<a href="~">の形式のものです。
<a href>は基本的なHTMLタグのひとつで、一般的な使い方は<a href="リンク先のURL">アンカーテキスト</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="リンク先のURL">アンカーテキスト</a>の部分をコピーして置き換えるということです。

ココに注意

最初にも記載しましたがアフィリエイトリンクの改変は禁止されていることが多いので、利用規約を意識して使いましょう

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

Affinger6でアフィリエイトリンクをボタンリンクで作る方法をまとめました。
これが一番簡単なやり方だと思います。

合わせて読みたい
Affinger6
CocoonからAffinger6への移行 【良かったところ / 後悔しているところ】

3月くらいからBlogを書き始めて半年が経ちました。なかなか時間が取れないこともあり、毎日投稿というふうにはいかなかったのですが、意外と長く楽しめています。当初は続けられるか不明だったため、Cocoo ...

続きを見る

ブログ村

ブログランキング・にほんブログ村へ
  • この記事を書いた人

リケイパパ

理系出身でITエンジニアとして10年以上働く二児のパパです 育児や趣味の旅行の話、豆知識などを思うがままに書いています

-豆知識
-