AFFINGER

AFFINGER5【ボタンリンクの使い方】カスタマイズ方法7種類も

AFFINGER5お知らせ

AFFINGER5のボタンリンクの使い方とカスタマイズ方法の紹介です。

初心者でも簡単に「自分好みのデザインのボタンリンク」が作れるよう、わかりやすく解説していきます。

 

こんな人のお役に立てる記事です。

小豆
AFFINGER5のボタンリンクの使い方を詳しく知りたい。
デザインやカラーも自由に決められるの??

AFFINGER5のボタンリンクの使い方とカスタマイズ

AFFINGER5には、クリック一つで挿入できる便利な「ボタンリンク機能」がついています。

ボタンリンク

ちなみに、テキストだけのリンクだとこんな感じ。

テキストリンク

 

ボタンリンクは、テキストリンクに比べるとやっぱり目立ちますね。

クリックしてもらえる確率も上がりそうです。

小豆
ってことは、アフィリエイトリンクなんかに使うと最適ってこと?
そうだね。
テキストリンクも悪くはないけど、このブログでもボタンリンクから毎月たくさんの成果が出ているよ。
大福

 

ちなみに、デフォルトの状態で用意されているボタンリンクの種類は約30種類。

これだけでも十分過ぎるくらいですが、ここからさらに自分好みのデザインにカスタマイズすることも可能です。

カスタマイズ後のボタンリンク

\ サンプルテキスト /

詳しくはコチラ

サンプルテキスト サンプルテキスト

 

自分のブログデザインに合わせて、オリジナルのボタンリンクを使うのも良さそうですね。

というわけで、早速詳しい使い方の手順とカスタマイズ方法を解説していきます。

ボタンリンクの設置手順とデザイン一覧

設置手順

  1. カスタムボタンを挿入
  2. リンク先とテキストを入力

 

step
1
カスタムボタンを挿入

ボタンリンクの使い方

タグ → カスタムボタン → 任意のボタンを選択 → 任意のデザインを選択

ボタンリンクには4つのデザインがありますが、設置方法はどれも共通です。

 

step
2
リンク先とテキストを入力

挿入されたボタンリンクのショートコードがこちら。

デフォルトの状態

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on" beacon=""]

 

続いて、リンク先とテキストを入力していきます。

[st-mybutton url="ここにリンク先を入力" title="ここにテキストを入力" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on" beacon=""]

たとえば、このブログのTOPページをリンク先にしたい場合は、以下のように入力します。

リンク先とテキストを入力

[st-mybutton url="https://daifuku-diary.com/" title="大福日記TOPページへ移動" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#e53935" bgcolor_top="#f44336" bordercolor="#e57373" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#c62828" ref="on" beacon=""]

挿入された実際のボタンリンク

 

ボタンリンクのデザイン一覧

ボタンリンクの使い方

デフォルトで用意されているボタンリンクのデザイン一覧です。

ボタンリンク

  1. ノーマル
  2. 角丸
  3. ミニ
  4. MCボタン

 

ノーマル

基本

ボタン

詳しくはコチラ(オレンジ)

詳しくはコチラ

詳しくはコチラ(レッド)

詳しくはコチラ

詳しくはコチラ(グリーン)

詳しくはコチラ

詳しくはコチラ(ブルー)

詳しくはコチラ

お問合せ

お問合せ

もっと詳しく(オレンジ)

もっと詳しく

もっと詳しく(ピンク)

もっと詳しく

もっと詳しく(ブルー)

もっと詳しく

人気ランキング

人気ランキング

ランキングはコチラ

ランキングはコチラ

 

角丸

基本

角丸ボタン

詳しくはコチラ(オレンジ)

角丸ボタン

詳しくはコチラ(レッド)

角丸ボタン

詳しくはコチラ(グリーン)

角丸ボタン

詳しくはコチラ(ブルー)

角丸ボタン

 

ミニ

基本 ボタン
詳しくはコチラ(オレンジ) 詳しくはコチラ
詳しくはコチラ(レッド) 詳しくはコチラ
詳しくはコチラ(グリーン) 詳しくはコチラ
詳しくはコチラ(ブルー) 詳しくはコチラ

 

MCボタン

オレンジ

太字のテキスト

今すぐ申し込む

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

レッド

太字のテキスト

今すぐ申し込む

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

グリーン

太字のテキスト

今すぐ申し込む

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

ブルー

太字のテキスト

今すぐ申し込む

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

 

カラーやデザインのカスタマイズ方法

以下の7種類のカスタマイズ方法を紹介していきます。

カスタマイズ

  1. アイコンの挿入と位置
  2. 文字色・背景色・枠線色・影
  3. 枠線の太さと丸み
  4. 文字サイズと太さ
  5. ボタンの長さ
  6. 光らせる・光らせない
  7. ボタンを横並びに

デフォルトの状態のこちらのボタンリンクを、それぞれカスタマイズしていきます。

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on" beacon=""]

 

アイコンの挿入と位置

詳しくはコチラ

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="fa-external-link" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="" shadow="#039BE5" ref="on" beacon=""]

 

fontawesome FontAwesome4のアイコンコードをテキスト前に表示
fontawesome_after FontAwesome4のアイコンを後ろに表示

関連FontAwesomeを見てみる

FontAwesomeの詳しい使い方は、こちらの記事で紹介しています。

アイコン
AFFINGER5で使えるアイコンの増やし方【カスタマイズも】

続きを見る

 

文字色・背景色・枠線色・影

詳しくはコチラ

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#332e25" bgcolor="#f5deb3" bgcolor_top="" bordercolor="#665c4a" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#665c4a" ref="on" beacon=""]

 

color 文字色を指定 HTMLカラーコードで入力
bgcolor 背景色を指定 HTMLカラーコードで入力
bordercolor 枠線色を指定 HTMLカラーコードで入力
shadow 影の色を指定 ※枠線色と同じにするのがおすすめ

 

HTMLカラーコードは、以下の方法で簡単に呼び出せます。

HTMLカラーコードの呼び出し

タグ → ショートコード補助 → HTMLカラーコード

さらに多くのカラーから選択したい場合は、以下のサイトが便利です。

関連原色大辞典

 

枠線の太さと丸み

詳しくはコチラ

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="3" borderradius="30" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on" beacon=""]

 

borderwidth 枠線の太さ(px)を指定
borderradius 枠線の丸み(px)を指定

 

文字サイズと太さ

詳しくはコチラ

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="150" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on" beacon=""]

 

fontsize 文字のサイズ(%)を指定
fontweight 文字の太さを指定 ※bold:太字 空欄:細字

 

ボタンの長さ

詳しくはコチラ

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="100" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="on" beacon=""]

 

width ボタンの長さ(%)を指定

widthに何も入力しない場合は、PCでは60%、スマホでは100%の幅で表示されます。

 

光らせる・光らせない

詳しくはコチラ

ショートコード

[st-mybutton url="#" title="詳しくはコチラ" rel="" fontawesome="" target="_blank" color="#fff" bgcolor="#039BE5" bgcolor_top="#29B6F6" bordercolor="#4FC3F7" borderwidth="1" borderradius="5" fontsize="" fontweight="bold" width="" fontawesome_after="fa-angle-right" shadow="#039BE5" ref="" beacon=""]

 

ref 「on」を入力すると光るボタンに

デフォルトでは「光らせる」設定になっています。空欄にすると光りません。

 

ボタンを横並びに

※PC表示時のみ、ボタンが横並びになるように設定しています。

 

ボタンリンクを横並びに表示するには、「レイアウト機能」を使用します。

ボタンを横並びに

タグ → レイアウト → PCとタブ → 左右50%

全サイズを選択することで、スマホでの横並び表示も可能です。
ですが、ボタンサイズが小さくなり過ぎてしまうため、PCとTabのみでの設定がおすすめです。

 

[st-mybutton class="" url="リンク先のURL" title="ボタンに表示するテキスト" rel="関連性" fontawesome="アイコン" target="リンク先の開き方" color="文字色" bgcolor="背景色" bgcolor_top="グラデージョン" bordercolor="枠線色" borderwidth="枠線の幅" borderradius="枠線の丸み" fontsize="文字サイズ" fontweight"文字の太さ" width="ボタンの長さ" fontawesome_after="アイコンをテキストの後ろに" shadow="" ref="光らせる演出" beacon="計測用img"]

 

大福
カスタマイズの紹介は以上で終わり。
お気に入りのボタンを作った後は、便利に保存して使おう。
AddQuickTag使い方TOP画像
AddQuicktagの使い方とコピペで使える5つの囲み枠

続きを見る

 

まとめ:クリックされやすいボタンリンクを作ろう

ブログからの成果を上げるには、リンクのクリック率を上げることがとても大切です。

その点、記事内でリンクを目立たせることができるボタンリンクは優秀ですね。

僕の場合は、ボタンリンク7~8割、テキストリンク2~3割くらいの感じで使用しています。

 

  • AFFINGER5カスタマイズ関連でよく読まれている記事

 

  • 当ブログ限定AFFINGER5オリジナル特典
AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を6つ紹介

続きを見る

 

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2021 大福日記