AFFINGER5（アフィンガー）カスタムボタンの使い方まとめ一覧

悩んでいる人

AFFINGERでカスタムボタンってどうやって作るの？普通のリンクよりカスタムボタンにしたほうがいいの？

本記事では、このような疑問についてお答えします。

ブログ4年目 / 複数ブログ運営
インスタグラム
Twitter(X)

はじめにカスタムボタンとは、以下のようなボタンのことです。

詳しくはコチラ

カスタムボタンには色を変更したり、形を変更したりなど色々な使い方があります。

その他にも、カスタムボタンにするとリンクへの案内が自然になったりとブログ運営上の利便性も高いです。

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

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=""