目立つボタン「アフィンガー」のキラッと光るMCボタンの作り方

当サイトでは実施に購入した商品・サービスのみレビューしています。

AFFINGERのキラッと光るMCボタンは、AFFINGERの魅力の１つ。キラキラしていて思わず押したくなってしまうリンクボタンなので設置してみたい！

だけど何だか、うまく設置できない。リンクが反応しない･･･。時間だけが経過する･･･。なんて自分もじつは悩んだ１つなので、簡単にサックリ記事にしたいと思います。

ワードプレステーマAFFINGERとは記事をコチラ

: 「アフィンガー6はできることがおおい？」3年間使った感想のまとめ［特典付き］

続きを見る

AFFINGERのMCボタンとは
「MCボタン」作成方法

AFFINGERのMCボタンとは

AFFINGERは自分も使用している、おすすめのワードプレステーマです。

AFFINGERには、最初から用意されているボタンのデザインはかなりありますが、その中でも「MCボタン」はキラッと光る動作があり（メチャクチャ目を引くので）使用してみたいボタンの１つです。

↓↓AFFINGERのMCボタン見本↓↓

＼キラッと光るから目立つ／

AFFINGERのMCボタン

設置してみよう！

実は自分も、アフィンガーをワードプレステーマとして選んだ理由の１つが、このボタンが使いたかったからです。

「MCボタン」作成方法

では、AFFINGERのMCボタンを作成してみます。

↓↓↓このMCボタンを作成していきます！↓↓↓

＼優雅な家時間に！／

MERMOO YILAN 1人用コーヒーポット

１人だからこだわりコーヒーを味わおう

MCボタンフォーマット選ぶ

最初に、アフィリエイトリンクは用意しておきます。

ビジュアルモード時に、「タグ」→「カスタムボタン」→「MCボタン」 →MCボタンのお好みの色を選びます。

アフィリエイトリンクの作成方法の記事はコチラ

: 【ブログで広告収入】アフィリエイトリンクの貼り方〜A8ネット

続きを見る

テキストモードに移行

文字の羅列ができます。（間違いではありません。これが正解です！）

テキストモードに変えます。

アフィリエイトリンクのリンク先をMCボタンに移行する

テキストモード時に、アフィリエイトリンクの〈a href="//○○○" 部分をコピーします。（〈a href=「"」から次の「"」までです。）

MCボタンの文字羅列の中の url="#"の「#」部分にコピーした「"」と「"」の間の文字列 //○○○ をペースト。（※#は消します。）

MCボタンの文字列↓

[ st-mcbutton url="#" title="○○○" rel="" fontawesome="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="○○○" beacon=""]○○○[/st-mcbutton ]

MCボタンにアフィリエイトリンクを入れました↓

（※アフィリエイトリンクを仮に<a href="https://○○○○○○○○○○○○" rel="nofollow">とします。）

[ st-mcbutton url="https://○○○○○○○○○○○○" title="○○○" rel="" fontawesome="" target="" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontweight="bold" fontsize="120" width="90" fontawesome_after="fa-chevron-right" shadow="#c62828" ref="on" mcbox_bg="#fafafa" mcbox_color="" mcbox_title="○○○" beacon=""]○○○[/st-mcbutton ]

※今回MCボタン説明（文字列を表示するため）のため、若干文字列を変えています。作業するときは、本サイトのサンプルをコピーするのではなく、AFFINGERのクイックタグ（ワードプレス上に表示されるタグ）から、「タグ」→「カスタムボタン」→「MCボタン」で、新規でMCボタンボタンをつくりましょう。

参考

アフィリエイトリンクのリンク先を移行する事によって、（ボタンを押しただけでは分かりませんが）アフィリエイト紹介サイトを経由してのリンクができます。

計測用imgをMCボタンに移行する

アフィリエイトリンクの <img border="0" alt="" src="https://○○○○○” />の（src="https://○○○○○" の「"」から次の「"」までの文字列）をコピーします。

MCボタンの文字羅列の中の beacon=" "に、コピーした src="//○○○ "の「"」と「"」の間の文字列 //○○○ をペースト。

MCボタンの文字列↓

MCボタンに計測用imgを入れました↓

（※計測用imgを仮に<img border="0" alt="" src="https://○○○○○” /とします。）

※繰り返しですが、今回MCボタン説明（文字列を表示するため）のため、若干文字列を変えています。作業するときは、本サイトのサンプルをコピーするのではなく、AFFINGERのクイックタグ（ワードプレス上に表示されるタグ）から、「タグ」→「カスタムボタン」→「MCボタン」で、新規でMCボタンボタンをつくりましょう。

もっと詳しく

計測用imgとは、クリックした時、あなたのサイトから「1クリックされた」、「成果が上がった！」と認識させるためのものです。必ず設定していきましょう。でないと、せっかくの成果を逃してしまうかもしれません。

AFFINGERのver.20200501バージョンのMCボタンから設置されているので、まだ古いバージョンをお使いの方は、AFFINGERのアップデートをしていきましょう。AFFINGER５を使っているのであれば、アップデートは無料です。

（※ちなみにですがAFFINGERの説明では、計測は確実ではないとの事です。あしからず...）