WING ( AFFINGER５ ）のキラリと光るボタン。
静かにアピールしていて、いい感じです。
しかし、以前からのアフィンガーユーザーでも
あれ？どうやってカスタマイズするの？って思いませんでした？
（私は思いました( ;∀;)）
だって、「キラリと光るボタン」は新機能ですから！
と、いうことで今回は「キラリと光るボタンについて」
どんなことができるのかを紹介していきたいと思います。
キラリと光るボタンが使えるのは WING（ AFFINGER5 ) のみ。
興味のある方は、こちらからご覧いただけます。
AFIINGER５の機能まとめ記事はこちら↓
-
AFFINGER5(WING)の機能カスタマイズまとめ！
続きを見る
WING（ AFFINGER5 ) のキラリと光るボタンを使い倒すには？
では、記事の投稿画面を開きます。
「新規追加」から「タグ」の中の「カスタムボタン」を展開します。
さらに「カスタムボタン」から、ボタンを選択します。
○ノーマル
○角丸（NEW！)
○ミニ
○MCボタン
○ボックスメニュー
○ボタンA
○ボタンB
カスタムボタン → ノーマル
カスタムボタンから、ノーマルを展開してみます。
結構ありますね。
基本、詳しくはコチラ（オレンジ、レッド、グリーン、ブルー）、お問い合わせ、もっと詳しく（オレンジ、ピンク、ブルー）、人気記事ランキング、ランキングはこちら。
では、詳しくはコチラ（オレンジ）を表示させてみます。（クリックしても移動しません）
ボタンの色や、白抜き文字が変わる感じで、全てこの大きさです。
基本のボタンは、こんな感じ。
もう全部カスタマイズするなら、これでもいいのかも。
カスタムボタン → 角丸
角丸ボタンは、新しい形のボタン。
ノーマルに比べると、選べるボタンの数は少ないですが、カスタマイズするなら問題ありません。
角丸ボタンの詳しくはこちら（オレンジ）を選択したつもりですが「角丸ボタン」と表示されます。
角がとれて、かなり丸いボタンの印象です。
ちなみに、「キラリと」はしません。
カスタムボタン → ミニ
こちらは、その名のとおり、ミニ。ボタンが小さくなっています。
かなりミニサイズになっていますね。
カスタムボタン → MCボタン
MCとは、「マイクロコピー」の略です。
今回だとこのボタンの周り！
カスタムボタン → ボックスメニュー
ボタンなのに、ボックス？と思われた方もいるかもしれませんが、ボックスメニューを選択すれば、複数の選択肢から選んでもらうことができます。
「サブあり」で、個々にサブテキストを入れることができます。
また、縦並びに配置することもできますよ。
カスタムボタン → ボタンA ボタンB
ボタンA、ボタンBは、そのまますぐに使うことができますね。
カスタマイズするのなら、ボタンA、B以外のボタンを使ってくださいね。
ボタンをカスタマイズ！
それでは、ボタンのカスタマイズをしていきましょう。
ボタンのカスタマイズはどんなでもいいのですが、上のボタンを見ながら、近いボタンを選択していけばいいかなと思います。
それでは、今回は、「ノーマル → 人気ランキング」のボタンを例にしていきます。
WINGマニュアルより
ボタンのURL
このボタンを押したら、どこに飛ぶのか、リンク先（移動先）のページのURLが必要ですよね。
mybutton url="#"
この＃の部分に、リンク先のURLをコピペします。
ボタンのタイトル
何のボタンなのかの説明や、押したくなるようなボタンになるようボタンにタイトルをつけましょう。
title="人気ランキング"
アイコンについて
その次の文字列は、タイトル前のアイコンを表しています。
fontawesome="st-svg-oukan"（王冠）
※こちらのボタンは実際にアイコン一覧に飛べます。
ちなみに、うしろの方にも
fontawesome_after="" とありますので
そちらにも"st-svg-oukan"をいれてみました。
リンク先URLを別ウィンドウで開く
次の文字列は、こんな感じ。
target=""
今見ているページから、リンク先のページへ飛ぶようにできています。
自分のブログ内のページ（内部リンク）ならこのままでいいですが、違うサイトに行ってしまう（外部リンク）なら、
リンク先のページへ行ったまま、このページは消えてしまうのでこのブログに戻ってきてもらえない可能性があります(;´･ω･)寂しい…
それでは困るので今のページはそのままに、外部リンクには新しく別ウィンドウを開きましょう。
target="_blank"
ボタンの色をカスタマイズ
文字色 color="#fff"
背景色（下） bgcolor="#FBC02D"
背景色（上） bgcolor_top="#fbc846
枠線色 bordercolor="#FBC02D"
黒色 #000000
白色 #ffffff
赤色 #ff0000
ピンク #ff00ff
黄緑 #00ff00
黄色 #ffff00
青色 #0000ff
水色 #00ffff
こちらは、背景色を bgcolor="#00ffff"（水色） bgcolor_top="#0000ff"（青色）にしてみました。
ちょっと雰囲気かわりますよね。
ボタンの枠をカスタマイズ
枠線幅 borderwidth="1"
こちらは、borderwidth="5" にしてみました。
枠は、「キラリと」しないんですね。
枠線の丸み borderradius="5"
こちらは、borderradius="30"にしてみました。
ここを設定するなら、最初から「角丸ボタン」を使った方がいいかもしれませんね。
角丸ボタンの値も30になっています。
ボタンの文字をカスタマイズ
文字サイズ fontsize="110"
こちらは、fontsize="200"にしてみました。
文字の太さ fontweight="bold"
ボタン全体のカスタマイズ
ボタンの長さ width="90"
こちらは、width="50"にしてみました。
shadow="" こちらは特に説明はありませんでしたが、影も入れることができるのでしょうか。。。
光らせるか ref="on"
光らせない場合は、""で。
WING(AFFINGER5)のキラリと光るボタンをカスタマイズして使い倒す！まとめ
せっかくだからボタンをカスタマイズしたい！
という気持ちに駆られてボタンを並べてみたものの
キラリと光るアピールが、こんなにチカチカするなんて（笑）
あまりにも並べすぎるのは、問題なのかも…と今更ながら思いました。
ぜびぜひ参考にしてみてくださいね。
AFIINGER５の機能まとめ記事はこちら↓
-
AFFINGER5(WING)の機能カスタマイズまとめ！
続きを見る