WINGカスタマイズ

WING(AFFINGER5)の「キラリと光るボタン」をカスタマイズする方法!

投稿日:2018年6月18日 更新日:

WING

こんにちは!momoです。

 

WING(AFFINGER5)の販売ページにあった、キラリと光るボタン。

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

 

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

あれ?どうやって販売ページのようにカスタマイズするの?って思いませんでした?

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

 

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

 

キラリと光らせるには??

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

新規追加」から「タグ」の中の「その他パーツ」を展開します。

キラリと

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

キラリと光る

 

では、今回は「人気ランキング」を選んで、これを例にお話ししていきたいと思います。

 

もちろん、「ボタン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"にしてみました。

人気ランキング

 

ボタンの文字をカスタマイズ

文字サイズ fontsize="110"

こちらは、fontsize="200"にしてみました。

人気ランキング

 

文字の太さ fontweight="bold"

 

ボタン全体のカスタマイズ

ボタンの長さ width="90"

こちらは、width="50"にしてみました。

人気ランキング

 

shadow="" こちらは特に説明はありませんでしたが、影も入れることができるのでしょうか。。。

 

光らせるか ref="on"

光らせない場合は、""で。

 

まとめ

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

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

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

 

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

 

2018/9/3

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

  こんにちは、momoです。   WING(AFFINGER5)を購入し、意気揚々といろいろな機能を試してみたいと思いつつ いちいち調べるのが面倒くさくて、なぁなぁに過ごしてきました。   アフィ主婦でも、せっかく機能に惚れてWING(AFFINGER5)を手にしたのに 使い倒さないなんて、もったいないと思わない?

ReadMore

2018/8/1

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

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

ReadMore

2018/7/31

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

  こんにちは!momoです。   毎日びっくりするような暑さで体調崩しがちですが WING(AFFINGER5)もアップデートがあり、かなりアツイ!!ので 負けてはいられないと感じる今日この頃。   アップデートの際、「タグ」の表示も随分変わってしまったので 少しずつ画像を差し替えようと思っています。   では、今回のアップデートで WINGの機能紹介ページで真似してみたいと思っていた 「カテゴリ一覧スライドショー」機能ができるようになったので ご紹介したいと思い ...

ReadMore

ステ子

2018/7/26

神プラグイン「ステ子」8月末までの期間限定!ダウンロードと使い方をご紹介

  こんにちは!momoです。   うちにもようやく神プラグイン「ステ子」ちゃんを お迎えすることができましたー!!   いやー、WINGがver.20180717に更新できなかったときは 絶望的な気持ちになりましたが 他のブログでは更新できたので、おかしいなーと思って放置していましたw   それでは、「ステ子」ちゃんはどのようにお迎えするのか ダウンロードの方法や使い方をまとめていきたいと思います。   「ステ子」のダウンロード方法 まずは、プラグイン「 ...

ReadMore

2018/7/19

WING(AFFINGER5)を最新版にアップデートする方法!

こんにちは!momoです。   ふと、AFFINGER5管理のお知らせを見ていると 期間限定で、プラグイン「ステ子」がダウンロードできるではないですか!! 【期間限定】新プラグイン「ステ子」を今すぐゲットしよう! https://t.co/D6Qf8YrLbP #AFFINGER @WPSTINGERさんから — ステ子@STINGER公式 (@WPSTINGER) 2018年7月19日 ひよこさんWING(AFFINGER5)はアップデートが多くて 機能が増えるのはありがたいけれど いつアップ ...

ReadMore

-WINGカスタマイズ
-, ,

Copyright© 群れない世界で生きてみたい , 2018 All Rights Reserved.