AFFINGER5（アフィンガー）を導入したけど、会話吹き出し機能の使い方ってはじめはわかりませんよね。
でも安心してください。
この記事では、そんな方にもわかりやすく、シンプルに解説していきます。
こんな疑問に答えます
・会話吹き出しの使い方がわからない
・思うようにカスタマイズできない
・枠線だけの設定をしたい
この記事を書いた人
・ブログ歴６か月の大学生ブロガー。初心者ブロガーの役に立つ情報を発信中！
・Twitter（@Blog624renoru）はこちら！
この記事を読むと、誰でもAFFINGER5（アフィンガー）で会話吹き出しを作る方法がわかります。
もくじ
会話吹き出しの完成例
上のような感じで完成です。
会話吹き出しの作り方
吹き出しをカスタマイズ
- 背景色の設定
- 枠線にする
- アイコン画像を取得する方法
- 吹き出しのアイコン設定
- アイコンを動かす方法
会話吹き出しのカスタマイズ方法のステップは上のようになります。
①背景色の設定
Wordpresの管理画面の外観 ＞ カスタマイズ ＞ オプションカラー ＞ 会話風ふきだしをクリック。
会話風吹き出しをクリックすると、下の画像の画面に来ます。
カラー設定画面
ここで、会話吹き出しの背景カラーを設定していきます。
色を選択をクリックして、自分好みのカラーに設定しましょう！
➁背景を白、枠線にだけカラーをする方法
①背景色の設定のみを行うと、背景色全体にカラーが付きます。
枠線にだけカラーしたい場合は、以下の方法で行います。
枠線だけの設定
ボーダーデザインタイプ（2px）に変更にチェックし、ボーダーデザインタイプ（2px）時の背景色の「色を選択」で白色に設定します。
上の設定をするだけで、枠線のみの吹き出しを作ることができます。
③アイコン画像を取得する方法
画像がそもそもないよ！という方は画像を取得する必要があります。
僕がオススメするのは
いらすとやは無料で使えるフリー素材サイトです。
シンプルで使いやすいのが特徴！
ココナラは自分だけのオリジナルアイコンを作りたい方にオススメです。
オリジナルアイコンを作りたい方は、【体験談】ココナラのイラストでブログを差別化！あなただけのブログを作ろう！を見てください
➃会話吹き出しのアイコン設定
Wordpresの管理画面からAFFINGER5管理 ＞ 会話・ファビコン等クリックします。
アイコンを設定
画像を設定する方法は２つ！
①アップロードからアイコンを設定
②画像のURLを直接アイコンを設定
①の場合はクリックして好きな画像を選ぶだけでOKです
②なら画像のURLを取得しましょう。
画像のURLの取得方法
メディアの追加 ＞ 好きな画像をクリック ＞ リンクをコピーから画像URLを取得して完了です。
画像のURLを取得
➄アイコンを動かす方法
会話・ファビコン等をクリックしたら、会話風アイコンを少し動かすにチェックするだけ！
アイコンを少し動かす方法
会話吹き出しを使ってみよう
タグ ＞ 会話吹き出し 会話１～８（設定したもの）をクリック。
会話吹き出しを使う
会話吹き出しの向きを変える方法
会話１～８を押すと下の画像のようになります。
デフォルトの向きなら、何もしなくてOKです
この向きを変えるには・・・
会話吹き出しを逆向きにする
半角スペース＆rを画像の通りに追加記入だけ！
反映されないときの対処法
これまで設定してきたけど、反映されていなかった。
こういう人もいるのではないのでしょうか？
その場合は外観 ＞ カスタマイズ ＞ 全体カラーをクリックします。
反映されないときの対処法
反映されない場合は、⑴全体的に反映に設定されていると思うので、画像のように⑵「デフォルト表示の一部メニューに設定を変えてみてください。
変更時には、全体的なデザインが崩れる可能性があるので注意してください！
まとめ：AFFINGER5（アフィンガー）で会話吹き出しを作る方法
今回は、AFFINGER5（アフィンガー）で会話吹き出しを作る方法を解説しました。
会話吹き出しに関する情報を詰め込んだので、これで網羅しちゃってください！
この記事があなたの役に立てたらうれしいです。
今回はここまで。
