WINGカスタマイズ

AFFINGER5(WING)のキラリと光るボタンをカスタマイズして使い倒す!

ボタン WING

WING ( AFFINGER5 )のキラリと光るボタン。

静かにアピールしていて、いい感じです。

 

 

しかし、以前からのアフィンガーユーザーでも

あれ?どうやってカスタマイズするの?って思いませんでした?

(私は思いました( ;∀;))

 

だって、「キラリと光るボタン」は新機能ですから!

 

と、いうことで今回は「キラリと光るボタンについて

どんなことができるのかを紹介していきたいと思います。

 

 

キラリと光るボタンが使えるのは WING( AFFINGER5 ) のみ。

興味のある方は、こちらからご覧いただけます。

 

AFIINGER5の機能まとめ記事はこちら↓

AFFINGER5(WING)の機能カスタマイズまとめ!

続きを見る

 

WING( AFFINGER5 ) のキラリと光るボタンを使い倒すには?

では、記事の投稿画面を開きます。

新規追加」から「タグ」の中の「カスタムボタン」を展開します。

 

ボタン

さらに「カスタムボタン」から、ボタンを選択します。

○ノーマル

○角丸(NEW!)

○ミニ

○MCボタン

○ボックスメニュー

○ボタンA

○ボタンB

 

カスタムボタン → ノーマル

カスタムボタンから、ノーマルを展開してみます。

ボタン

結構ありますね。

基本、詳しくはコチラ(オレンジ、レッド、グリーン、ブルー)、お問い合わせ、もっと詳しく(オレンジ、ピンク、ブルー)、人気記事ランキング、ランキングはこちら。

では、詳しくはコチラ(オレンジ)を表示させてみます。(クリックしても移動しません)

詳しくはコチラ

ボタンの色や、白抜き文字が変わる感じで、全てこの大きさです。

 

ボタン

基本のボタンは、こんな感じ。

もう全部カスタマイズするなら、これでもいいのかも。

 

カスタムボタン → 角丸

角丸ボタンは、新しい形のボタン。

角丸ボタン

ノーマルに比べると、選べるボタンの数は少ないですが、カスタマイズするなら問題ありません。

角丸ボタン

 

角丸ボタンの詳しくはこちら(オレンジ)を選択したつもりですが「角丸ボタン」と表示されます。

角がとれて、かなり丸いボタンの印象です。

ちなみに、「キラリと」はしません。

 

カスタムボタン → ミニ

こちらは、その名のとおり、ミニ。ボタンが小さくなっています。

ボタンミニ

詳しくはコチラ

 

かなりミニサイズになっていますね。

 

カスタムボタン → MCボタン

MCとは、「マイクロコピー」の略です。

 

ひよこさん
マイクロコピーってなに?
アフィ主婦
簡単に言うと、本当に細かいところのコピーのことね。

今回だとこのボタンの周り!

太字のテキスト

今すぐ申し込む

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

 

 

カスタムボタン → ボックスメニュー

ボタンなのに、ボックス?と思われた方もいるかもしれませんが、ボックスメニューを選択すれば、複数の選択肢から選んでもらうことができます。

ボタン ボックス

 

「サブあり」で、個々にサブテキストを入れることができます。

また、縦並びに配置することもできますよ。

 

カスタムボタン → ボタンA ボタンB

ボタンA、ボタンBは、そのまますぐに使うことができますね。

 

 

カスタマイズするのなら、ボタンA、B以外のボタンを使ってくださいね。

 

 

ボタンをカスタマイズ!

それでは、ボタンのカスタマイズをしていきましょう。

 

ボタンのカスタマイズはどんなでもいいのですが、上のボタンを見ながら、近いボタンを選択していけばいいかなと思います。

それでは、今回は、「ノーマル → 人気ランキング」のボタンを例にしていきます。

WING

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)のキラリと光るボタンをカスタマイズして使い倒す!まとめ

せっかくだからボタンをカスタマイズしたい!

という気持ちに駆られてボタンを並べてみたものの

キラリと光るアピールが、こんなにチカチカするなんて(笑)

 

あまりにも並べすぎるのは、問題なのかも…と今更ながら思いました。

ぜびぜひ参考にしてみてくださいね。

 

AFIINGER5の機能まとめ記事はこちら↓

AFFINGER5(WING)の機能カスタマイズまとめ!

続きを見る

人気の投稿とページ

-WINGカスタマイズ
-, ,

© 2021 あぶログ