AFFINGERの使い方

AFFINGER(アフィンガー)カスタムボタンの使い方まとめ

2020年10月27日

カスタムボタン一覧
悩んでいる人
AFFINGERでカスタムボタンってどうやって作るの?普通のリンクよりカスタムボタンにしたほうがいいの?
カスタムボタンはとても簡単に作れるよ!カスタムボタンの使い方とボタン一覧のまとめも紹介するね!
イス

 

ちなみにカスタムボタンとは以下のようなボタンです。

 

詳しくはコチラ

 

リンク先のページを設定したり、アフィリエイトのリンクをボタンに変更したり、色々な使い方があります。

 

その他にも、カスタムボタンにするとアフィリエイトが成約されやすくなったりと、ブログを運営していくうえで便利に利用ができます。

 

それでは、アフィンガーのカスタムボタンについてさっそく解説していきます。

 

 

AFFINGER(アフィンガー)カスタムボタンの使い方

アフィンガーカスタムボタン使い方

カスタムボタンの使い方

 

まずは、ワードプレスの記事投稿画面で『新規記事』を追加してください。

 

今回は新規記事で作成しますが、この記事を読んでいる方は変更したい記事で実践していただいて大丈夫ですよ。

 

投稿画面の「タグ」「カスタムボタン」「ノーマル」のあとに好きなボタンを選択しましょう。

 

 

基本は「詳しくはコチラ」のボタンを選択して使用すればOKです。

 

すると下記コードが表示されると思います。

 

ボタンを押すと表示されるコード

 

プレビュー画面で見てみるとボタンが表示されていると思いますので、確認してみてください。

 

 

タグの変更箇所の説明

 

ボタンを設置したら変更する場所は3箇所くらいで十分なので、重要な部分だけお伝えします。

 

 

「#」このマークにリンク先のURLを入力すると指定のページにリンクできます。

「詳しくはコチラ」はボタン上に表示させる文字になります。

 

 

基本的に変更しなくてもOKですが、アフィリエイトサイトをリンク先に指定する場合は、クリックされやすい文字に変更した方がクリック率があがったりします。

 

 

公式ページを見てみる

無料登録はこちら

 

上記の通りです。

 

「on」の部分を削除して空白にするとボタンがキラッと光るエフェクトを無しにできます。

 

光る設定にしておくと目立つことは目立つんですが、わりと頻繁にキラキラしてるので主張が強いと感じるかもです。

 

下のボタンは光らない設定にしてみました。

 

詳しくはコチラ

 

キラッと光らないことで、ボタンが主張しすぎずに自然な感じがします。

 

ボタンが光る設定は好みによって変更してみてください。

 

AFFINGER(アフィンガー)ボタンのカスタマイズについて

ボタンのカスタマイズは、変更したいところの数値やコードを入力するだけで変更可能です。

 

コードの内容は以下のようになっています。

 

st-mybutton url="リンク先URL" title="ボタンのタイトル" rel="" fontawesome="" target="新しいタブで開く" color="文字色" bgcolor="背景色" bgcolor_top="#ffdb69" bordercolor="枠線色" borderwidth="枠線の太さ" borderradius="枠の丸み" fontsize="文字サイズ" fontweight="文字の太さ" width="ボタンの長さ" fontawesome_after="fa-angle-right" shadow="#FFB300" ref="ボタンの光" beacon=""

 

変更したい所にあわせて数字やコードを入力してみましょう。

 

最低限覚えておきたい所は赤文字にしておきましたので、ひとまず赤字部分だけでも覚えておくといいと思います。

 

 

各ボタンサンプル一覧

全てのボタンを一覧で表示してみます。

 

お好みのボタンが見つかったら使ってみましょう。

 

詳しくはコチラボタン

一番シンプルなボタンで使いやすいです。

 

アフィンガーを利用されているサイトで一番よく見かけるメジャーなボタンです。

 

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

詳しくはコチラ

 

もっと詳しくボタン

フラットでシンプルなボタンです。

 

ボタンも丸く横長なので押しやすそうなボタンです。

 

もっと詳しく

もっと詳しく

もっと詳しく

 

角丸ボタン

シンプルで可愛らしいボタンです。

 

角丸ボタンは枠と文字が色付けされていてスタイリッシュな感じのボタンです。

 

記事に溶け込むようなデザインなのでオシャレに設置が可能です。

 

角丸ボタン

角丸ボタン

角丸ボタン

角丸ボタン

角丸ボタン

 

ミニボタン

小さいサイズのボタンです。

 

名前の通りミニサイズのボタンになります。

 

普通のボタンの半分サイズなのであまり目立たせたくない時に使用すると良さげです。

 

ボタン 詳しくはコチラ 詳しくはコチラ 詳しくはコチラ 詳しくはコチラ

MCボタン

MCボタンはボタン上下に文字の挿入ができるボタンです。

 

MCボタンもアフィンガー利用者がよく使うボタンのひとつです。

 

ボタン上の文字に商品のキャッチフレーズを記載したりするのが定番なので、読者にこれだけは伝えたい!という内容があるときは便利に使えます。

 

太字のテキスト

今すぐ申し込む

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

太字のテキスト

今すぐ申し込む

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

太字のテキスト

今すぐ申し込む

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

太字のテキスト

今すぐ申し込む

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

 

ボタンの文字のカスタムは下の画像を参考にしてみてください。

 

ボックスメニューボタン

名前の通りボックスで囲まれたメニューボタンです。

 

商品を比較してボタンを設置したい時などに便利です。

 

ボタンA、B

ボタンA、Bはなんの装飾もないシンプルな普通のボタンです。

 

 

以上がカスタムボタンで使えるボタン一覧です。

 

AFFINGER(アフィンガー)カスタムボタン使用時の注意点

カスタムボタンは基本的にリンク先のURLを入力し、見栄えを良くして押しやすくするために設置します。

 

ただし、アフィリエイトリンクを設置する場合については注意が必要です。

 

アフィリエイトリンクは基本的にリンクの改変が禁止されています。(一部例外のASP有)

 

つまり勝手にリンクを変更してしまうとアフィリエイト収益にならないうえに、違反となりペナルティとなる可能性もあります。

 

各ASPによってリンク設置時の注意点があるので、公式HPにて確認してから設置するようにしてください。

 

アフィリエイトリンクをカスタムボタンにしていいか不明な時

悩んでいる人
カスタムボタンを使ってアフィリエイトリンクを設置したいんだけど無効になったりしないかな?
わからない時はカスタムボタンは使わない方が吉です。
イス

 

先ほども少し説明しましたが、アフィリエイトリンクの改変は基本禁止です。

 

リンクを改変してしまうとアフィリエイトの規約違反で成約が無効になったりする可能性もあります。

 

少しでも不成約のリスクを避けるためにはカスタムボタンの利用をやめて普通のリンクを設置するようにした方が安心です。

 

まとめ:AFFINGER(アフィンガー)カスタムボタンを上手に使おう

まとめ:カスタムボタンは適材適所で使おう

AFFINGERのカスタムボタンの使い方について解説しました。

 

色々なタイプのボタンがワンクリックで使用できるのは魅力的ですよね。

 

ボタンの形や色に飽きたら自分でコードを少しいじれば、オリジナルボタンも作れちゃいます。

 

しかし使いすぎてしまうとボタンの主張が強いため、違和感を覚える人もいるので要注意です。

 

使いどころを選びながら必要な場面で設置してあげると、効果が出やすいので実践しながら学んでいきましょう!

 

今回、使い方の解説をしました『カスタムボタン』は、当ブログで使用している「AFFINGER」というテーマにて作成しています。

 

有料テーマですが、優秀ですので気になる方は関連記事をご覧ください。

 

関連記事①:AFFINGERの口コミ・評判はどうなの?【リアルな声を調査】

関連記事②:AFFINGERのメリット・デメリットを解説。

関連記事③:【AFFINGER】アフィンガーの値段とコスパはどうなの?

 

AFFINGER5の購入方法については、下記記事を参照し進めていただくと簡単に完了できます。

AFFINGER(アフィンガー)購入方法とインストール手順を優しく解説

 

AFFINGER以外の他のテーマが気になる方はWordPressブログでおすすめのテーマ【有料5つ+無料3つ】にて解説しているのであわせて見てみてください。

 

今回はここまでとなります。

  • この記事を書いた人

イスさん

会社員10年超え→脱サラ→2021年8月にフリーランスへ転身 | ブログの疑問や悩みを解決できる情報をお伝えしています | 長野県出身 | 30代

-AFFINGERの使い方