【AFFINGER6(アフィンガー6)使い方】光るボタンの作り方
みなさん、おはこんばんは😊
今回は、光るボタンの作り方を解説します✨
光るボタンを織り交ぜてステキな記事を作ってくださいね♪
ちょ〜可愛くないですか?それでは、解説していきます✨
【AFFINGER6(アフィンガー6)使い方】光るボタンの作り方
step
1"を押す
![【AFFINGER6使い方】光るボタンの作り方①](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/d3644a6e7a8de0adde61d90b847716c3-1024x800.png)
step
2"STINGER:カスタムボタン"を選択
![【AFFINGER6使い方】光るボタンの作り方②](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/de546330cff3e24ca8ff74610b75791a-1024x803.png)
step
3①にできたボタンの内部テキストを②をいじって好みのボタンを作ります
![【AFFINGER6使い方】光るボタンの作り方③](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/17fd0641b7b8e2ea218672f2fee9bce1-1024x640.png)
step
4テキストの欄に作りたい文言を入れます
![【AFFINGER6使い方】光るボタンの作り方④](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/2cf4cf133504a6b7e39d3f0ee0ef2664-1024x294.png)
step
5文言の前後に好きなアイコンを付けることができます。
![【AFFINGER6使い方】光るボタンの作り方⑤](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/707694dcb92712125dcded9506071b6a-1024x547.png)
こんな感じで標準でもたくさんのアイコンから選ぶことが可能になってます。
![【AFFINGER6使い方】光るボタンの作り方⑥](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/3bdd286f6c9e9401f584b345db97ecfe-1024x640.png)
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/05/animal02_b_12-300x195.png)
これだけあっても中々イメージに合うアイコンがないなぁ...
こだわりたいよね〜😊ラッコくん、そんなときはこれを使ってみて!
FontAwesome5だよ!AFFINGER6から使えるようになっているんだ。
![](https://sp-no-enjoy-life.com/wp-content/uploads/2020/11/TADAnoDEBU-300x300.png)
![【AFFINGER6使い方】光るボタンの作り方⑦](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/6a5a1a0a05e3523601bbe744009419ec-1024x640.png)
すると、こんな絶妙なギャグにぴったりなアイコンがあったりするんだ🤗
![](https://sp-no-enjoy-life.com/wp-content/uploads/2020/11/TADAnoDEBU-300x300.png)
![【AFFINGER6使い方】光るボタンの作り方⑧](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/b082eb9ef73c18768bd0a9548bcd5857-1024x132.png)
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/05/animal02_b_12-300x195.png)
すごい!思わずポチが押しちゃうよ!
どうやったら、FontAwesome5が使えるようになるの?
このページで解説しているから覗いてみてね✨
![](https://sp-no-enjoy-life.com/wp-content/uploads/2020/11/TADAnoDEBU-300x300.png)
-
【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方
【AFFINGER6(アフィンガー6)使い方】FontAwesome5の設定方法・使い方 皆さま、おはこんばんは😊WING AFFINGER5からACTION AFFINGER6になり ...
続きを見る
step
6ボタンを押すと飛ぶ、リンク先URLを設定します
![【AFFINGER6使い方】光るボタンの作り方⑨](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/c4dd56faaf73ccacc0660ae567272b96-1024x349.png)
ポイント
新しいページで開くはONにしておいた方が良いと思います✨
せっかくページを見に来てくれた人がそのまま帰ってこなくなるかもしれませんからね☺️
step
7レイアウト・デザイン設定で、"光る演出"をONにします
![【AFFINGER6使い方】光るボタンの作り方⑩](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/ff2318911eeb0e4f7e94ba639126a945-1024x305.png)
ポイント
幅は100%をおすすめします✨
ボタンが長くなるので、より長い時間光ります☺️
step
8色設定で、好みの色にカスタマイズします
![【AFFINGER6使い方】光るボタンの作り方⑪](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/4ae849d0a8bf69335521f09d5eaad69d-1024x640.png)
- 文字色
- 背景色1
- 背景色2
- ボーダー
- ボタンシャドウ
と、5種類も色設定ができる細かさのため、好みのボタンに仕上がりますよ😊
![](https://sp-no-enjoy-life.com/wp-content/uploads/2020/04/animal01_b_02-300x292.png)
色がいろいろ選べて困っちゃう〜
良い悩みだよね〜🤗
そんな、うしくんに良いサイトを紹介するよ✨
![](https://sp-no-enjoy-life.com/wp-content/uploads/2020/11/TADAnoDEBU-300x300.png)
おすすめ!カラー選択方法
「色の名前とカラーコードが一目でわかるWEB色見本」
このサイト、とっても便利です。好みの色の見本とカラーコードが非常に見やすくなっているので、カラーを選ぶのが楽しくなりますよ🤗
良かったら、参考に見てみてください✨
こんなにステキなボタンができました😊
ぜひ、みなさんも好みのボタンをカスタマイズしてみてくださいね☺️
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/07/action_banar-1-1024x916.png)
AFFINGER6の使い方
AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。
こんなページもあります
トップページのカスタマイズ
お知らせの作成方法
タブ式カテゴリー一覧の作成方法
カテゴリー一覧(スライドショー)の作成方法
"TOPに戻るボタン"のカスタマイズ方法
ヘッダーカードの作成方法
ボックスメニューの使い方② サイドバーへの表示方法
スライドショーの下にお知らせを挿入する方法
流れる文字の表示方法
記事の書き方
ブロックエディタ基本的な使い方
ブロックエディタの装飾一覧
タグ機能の装飾一覧
光るボタンの作り方
文字にアニメーションをつける方法
フォント(Google Fonts)の設定方法
FontAwesome5のアイコンにアニメーションを付ける方法
ボックスメニューの使い方①
ブログカードの作り方&カスタマイズ方法
吹き出し・会話アイコンの使い方・設定・カスタマイズ方法