WINGカスタマイズ

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

ボタン WING

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

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

 

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

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

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

 

と、いうことで、今回は「キラリと光るボタンについて」どんなことができるのかを紹介していきたいと思います。

 

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

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

 

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

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

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

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

 

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

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

 

WINGカスタマイズ

2020/5/24

WING(AFFINGER5)でプロフィール(自己紹介)カードをオシャレに!

こんにちは、momoです。 WING  (AFFINGER5 ) を使えば、プロフィール(自己紹介)カードがオシャレにできちゃいます。   せっかくの自分のサイトやブログ、プロフィールカードを目立たせて、多くの人に見てもらいたいですよね。 今回は、WING  (AFFINGER5 ) でプロフィール(自己紹介)カードを、簡単なのにオシャレにしていきましょう。   プロフィールカードの作成方法 ユーザーの設定 今回は、私のプロフィールを作った方法をもとに紹介していきたいと思います。 &n ...

ReadMore

アニメーション

WINGカスタマイズ

2020/5/24

WING(AFFINGER5)のアニメーションが動かない?解決法とマウスオーバー方法も

動くところに目が行くのは、本能と言ってもいいかもしれません。 と、いうことは、文字が動いたら…無意識に目が行く、注目してもらえるかもしれませんよね。   WING(AFFINGER5)では、文字にアニメーションを付けて動かすことも簡単なんです。   今回は、アニメーションについて紹介していきたいと思います。   WING(AFFINGER5)アニメーション機能の使い方は? WING(AFFINGER5)のアニメーションの使い方は簡単。   「タグ」→「ショートコード ...

ReadMore

WINGカスタマイズ

2020/5/24

WING(AFFINGER5)の機能カスタマイズまとめ!面倒くさがりのあなたへ

こんにちは、momoです。 WING(AFFINGER5)を購入し、意気揚々といろいろな機能を試してみたいと思いつつ いちいち調べるのが面倒くさくて、なぁなぁに過ごしてきました。   機能満載のWINGに興味がある方は、是非ご覧ください。   アフィ主婦でも、せっかく機能に惚れてWING(AFFINGER5)を手にしたのに 使い倒さないなんて、もったいないと思わない? ひよこさん目立つしイイよね。 このボタンを見つけるとWINGユーザーなのかな?って思っちゃう   もっと詳し ...

ReadMore

WINGカスタマイズ

2020/5/24

WING(AFFINGER5)複合デザインのカスタマイズ!ミニふきだしとクリップメモ・ミニふきだしとマイボックス

  こんにちは!momoです。   続々とWING(AFFINGER5)のアップデートがあり 嬉しい限りではございますが こんな機能あったの?いつから? みたいなこと、ありませんか?(;´∀`)私だけ?   今回は、WINGver20180724マイナーアップデートで新しくできた 「ミニふきだし」×「クリップメモ」と「ミニふきだし」×「マイボックス」の 「複合デザイン」機能について、ご紹介したいと思います!   複合デザイン機能の使い方とアップデートの方法! 使い方 ...

ReadMore

スライドショー

WINGカスタマイズ

2020/5/3

WING(AFFINGER5)で記事中にスライドショーを出す方法!

WING(AFFINGER5)のアップデートで使えるようになった「スライドショー」。   アイキャッチが動いて、とにかく目を引きます。 そしてオシャレ! スライドショーを入れるだけで、一気にオシャレなブログ・サイトに生まれ変わります!   では、今回のアップデートでWINGの機能紹介ページで真似してみたいと思っていた 「カテゴリ一覧スライドショー」機能ができるようになったので、ご紹介したいと思います!   WINGで記事中にスライドショーを表示させる方法! 今までスライドショ ...

ReadMore

-WINGカスタマイズ
-, ,

© 2020 群れない世界で生きてみたい