【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法
みなさん、おはこんばんは🤗
今回は、この会話アイコンの吹き出しについて解説していきます✨
記事のアクセントにもなりますので、ぜひ活用して見てください☺️
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法①](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/e14502e44a73917308282509470124d6-1-1024x576.jpeg)
それでは、解説していきますね✨
【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法
AFFINGER6でブロックエディタになったことで、直感的に簡単に使えるようになった印象です。
まずは、会話アイコンの設定をしていきましょう。
step
Aホームの"AFFINGER管理" "会話アイコン" "会話アイコン設定" と進む
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法②](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/1e1c5c2deab058e7c628ef4094b351c1-1-1024x547.jpg)
step
B"アップロード"から会話アイコンを選択し、会話アイコンに名前をつけましょう
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法③](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/525e4618d73e1649dd51f5d2f6780b29.png)
step
CstepBの作業を会話アイコンが8つ設定できるので、8つとも行いましょう
おすすめ!アイコン素材探し①
「かわいいフリー素材集 いらすとや」
私もいらすとやさんから出張しております。
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/animal_chara_computer_azarashi.png)
みなさまご存じかと思いますが、「こういうイラストが欲しな♪」というものが網羅されてますよね☺️
ぴったりのアイコンが見つかると思いますよ✨
おすすめ!アイコン素材探し②
このアイコンは、有料でココナラを利用して描いてもらいました。
オリジナルアイコンを作ってもらうのはとっても楽しかったです☺️
興味ある方は、より覗いて見てください✨
step
D会話アイコンへの装飾を選択し、最後に"Save"をクリックで完力です
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法④](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/f3ed0bcc033a9af553f1fa0118afeb21.jpg)
会話アイコンを少し動かす
"会話アイコンを少し動かす"にチェックを入れると、こんな風に頑張って動きます☺️
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/animal_chara_computer_penguin.png)
会話アイコンを少し大きく
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑤](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/13ad83f92d830235863a9193e9c0a115-1024x167.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑥](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/04e4fb84c6f129f15865882f24707d20-1024x167.png)
続いて、ホームから"外観"→"カスタマイズ"→"会話ふきだし"と進み、設定をしましょう。
step
Eホームの"外観" "カスタマイズ" "会話ふきだし" と進む
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑦](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/b4a0344356f3a05ef7cc75f00d7481f6-510x1024.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑧](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/334e11c240d06c52778e80b90d93fbcf.png)
step
F各会話の背景色を設定する
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑨](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/63a47b8f6f64a29a9888e6068ece6c64-461x1024.jpg)
このように、各会話の背景色を設定できます。
![](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/2021/05/animal02_b_12-300x195.png)
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/05/animal03_b_02.png)
背景色を
変えれます
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/05/animal03_b_05-300x243.png)
step
G"アイコンに枠線をつける"か選択する
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑩](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/70f11349c24021d986b434afdeb427ae-458x1024.jpg)
を参考に好みのデザインを選んでね
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑭](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/90e385a379bd84479516650d58a20ae5.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑮](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/e001cdec45122c1e6fe307bfdf6eb098.png)
step
H"ふきだしを角丸にしない"か選択する
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑪](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/e58df142df2abf32d491fff9bc00632a-458x1024.jpg)
を参考に好みのデザインを選んでね
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑯](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/36bbc732f3fa203886470f2025227a86.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑰](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/925360ad124679e69df818b86fe8fffa-1.png)
少々わかりにくいですが、ふきだし部分の四角の形が変わっています。
step
I"ボーダーデザインタイプ(枠線のみ)に変更"でどれか選択する
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑫](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/ca0c5ffa23eb80041c10125de25c7f15-458x1024.jpg)
を参考に好みのデザインを選んでね
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑱](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/46ebcc5005727fe550b79ab9decc7647-1024x165.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑲](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/8be2903aaa9f9567c4d5e98319767c23-1024x175.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑳](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/9dd4bd38cd5ec1801d452348fbbc64b7-1024x175.png)
step
J"ボーダーデザインタイプの背景色※一括"をボーダーデザインの「普通」か「太め」を使う場合は設定
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法⑬](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/83ff31705ea28bb5073e03f15da37c27-458x1024.jpg)
ボーダーデザインタイプの「普通」か「太め」を使う場合は、背景色を選択することができます。
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉑](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/0e6fd4e3124769696951438817063d66-1024x313.png)
こちらを使うことで、ふきだしの枠の線と枠内の背景色をそれぞれ違う色に設定できます。
以上で、設定は完了です。
最後に、記事の書き方です。
step
1"を押す
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉒](https://sp-no-enjoy-life.com/wp-content/uploads/2021/10/2137390cfcf7313fa5c3eb564e7ac2c9-2-1024x799.jpg)
step
2ブロック"STINGER"から"STINGER:会話ふきだし"をクリック
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉓](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/5c2e0fa9dc29e4f65f654c909208c4d3.png)
step
3ふきだしの中に書いて完了
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉔](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/f59a0e4e5b020595ee3ead63e5f2aa12.png)
会話アイコンの選択方法
1) ふきだしブロックを選択し、をクリック
もしくは、をクリックしてから、ふきだしブロックを選択
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉕](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/2be72fd62acd6a3ad22b9b722a018aaf-1024x186.jpg)
2) 表示された"STINGER :会話ふきだし"ブロックの設定で使用する会話アイコンの選択ができる
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉖](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/037d83030dec0de81b69e466e8bf8310-1-1024x280.jpg)
3) "会話ショートコード"をクリックすることで、使用する会話アイコンを選択できる
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉗](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/4d01663ccb9cc9c733f0241d770551a7.png)
すると、選択が可能になるので使いたい会話アイコンを選択する
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉘](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/987f065447d72af9f117096215a600d2.png)
会話アイコンの向きの変更
1) ふきだしブロックを選択し、をクリック
もしくは、をクリックしてから、ふきだしブロックを選択
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉙](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/2be72fd62acd6a3ad22b9b722a018aaf-1024x186.jpg)
2) 表示された"STINGER :会話ふきだし"ブロックの設定で会話アイコンの配置の変更ができる
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉚](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/037d83030dec0de81b69e466e8bf8310-1-1024x280.jpg)
3) "向き"をクリックすることで、会話アイコンの配置を左右設定ができる
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉛](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/b20cb869560df3b0afd3d526dd8ea3d5.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉜](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/0e095cc8ebfdca24aa3c66f84220eddd-1024x233.png)
![【AFFINGER6(アフィンガー6)使い方】吹き出し・会話アイコンの使い方・設定・カスタマイズ方法㉝](https://sp-no-enjoy-life.com/wp-content/uploads/2021/11/ab23b46b9929c3df67df88defe516dcf-1024x233.png)
いかがだったでしょうか?
会話アイコンを用いることで、記事のアクセントにもなりますので、ぜひ使ってみてください😊
![](https://sp-no-enjoy-life.com/wp-content/uploads/2021/07/action_banar-1-1024x916.png)
AFFINGER6の使い方
AFFINGER6の使い方のページをご覧頂きありがとうございます🤗
こちらでは、「稼ぐ」に特化したWordPressテーマ〜AFFINGER6〜の使い方の解説をしてます。
初心者さまへもわかりやすくをモットーに書いております。
他のページでも絶賛解説中です。みなさまのブログ作成に役立てば嬉しいです。
こんなページもあります
トップページのカスタマイズ
お知らせの作成方法
タブ式カテゴリー一覧の作成方法
カテゴリー一覧(スライドショー)の作成方法
"TOPに戻るボタン"のカスタマイズ方法
ヘッダーカードの作成方法
ボックスメニューの使い方② サイドバーへの表示方法
スライドショーの下にお知らせを挿入する方法
流れる文字の表示方法
記事の書き方
ブロックエディタ基本的な使い方
ブロックエディタの装飾一覧
タグ機能の装飾一覧
光るボタンの作り方
文字にアニメーションをつける方法
フォント(Google Fonts)の設定方法
FontAwesome5のアイコンにアニメーションを付ける方法
ボックスメニューの使い方①
ブログカードの作り方&カスタマイズ方法
吹き出し・会話アイコンの使い方・設定・カスタマイズ方法