『AFFINGER5の会話吹き出しの設定方法がわからない』
『AFFINGER5の吹き出しを少しカスタマイズしたい』
本記事を読むことでAFFINGER5(アフィンガー)の吹き出しについて一通り理解できるのではないかと思います。
ごりたす
当サイトの運営者
- オンラインサロン『マクサン』スタッフ
- 薬剤師しならがら副業でアフィリエイト
- 月40万〜80万の確定収益
- 副業込の年収は1000万くらい(2019年申告分)



※この会話は外部のプラグインを用いて作成しています(有料)
以下の記事でAFFINGER5の機能をおさらいしよう
AFFINGER5(アフィンガー)で会話吹き出しを使う3つの選択肢
AFFINGER5(アフィンガー)で会話吹き出しを使いたい場合、実は3つの方法があります。その方法として
・外部のプラグインを導入する
・AFFINGER5(アフィンガー)のデフォルトの機能を使う
・AFFINGER5(アフィンガー)の公式の拡張プラグインを導入する
以上3つの方法で会話吹き出しを作成することが可能なのです。

AFFINGER5(アフィンガー)以外のプラグインを使った方法
AFFINGER5(アフィンガー)以外の外部プラグインを使った方法です。AFFINGER5(アフィンガー)に元から搭載されているので外部のプラグインを使う必要はあまりありません。
がしかし、僕の場合『使いやすい』という理由だけで外部プラグインを使っています。
僕の場合はワードバルーンという有料プラグインを使っていますが視覚的にわかりやすく気に入っています。
無料版もありますが、複数のアイコンを登録する場合はPRO版になります。
メリット
・会話が視覚的にわかりやすい
・テーマを変えた時にもそのまま使える
・キャラを無限に登録できる
・会話のカスタマイズが簡単
デメリット
・有料のプラグイン(年額1,280円)
・合わないテーマもある(アフィンガーは使えた)
本記事では詳しい使い方などは割愛しますが、無料お試しに使えますしPRO版にしても年額1,280円なので興味がある方は使ってみてはいかがでしょうか?
AFFINGER5(アフィンガー)のテーマ固有の機能を使った『会話吹き出し』の方法
AFFINGER5(アフィンガー)にはテーマにデフォルトでついている『会話吹き出し』機能がついています。
AFFINGER5(アフィンガー)に追加金したくない人はこのデフォルトの機能を使い会話吹き出しを作成していくことになります。

メリット
・無料で使える
デメリット
・AFFINGER5(アフィンガー)の場合は最大で8つまでしか登録できない
・カスタマイズが少し面倒
AFFINGER5(アフィンガー)の拡張機能プラグインを使った『会話吹き出しの方法』
AFFINGER5(アフィンガー)ではデフォルトの機能でも会話吹き出しを作ることはできるのはお話ししました。
デフォルトだと8つまでしか吹き出しを登録できませんがこの拡張プラグインを導入することで無限に吹き出しを作ることができるのです。
メリット
・無限に会話吹き出しをつくることができる
・管理が簡単
・カスタマイズが簡単
・お金がかかる(2,980円)
拡張プラグインを購入することで吹き出しの数を増やしたり、カスタマイズが楽になったります。今回は初めてアフィンガーで会話吹き出しを使うのが目的だと思うので今回はこのプラグインも割愛します。
AFFINGER5(アフィンガー)の会話吹き出しの使い方とカスタマイズ方法
ここからはアフィンガーのデフォルトで搭載されている会話吹き出しの設定方法や使い方、カスタマイズ方法を解説します。
基本的に以下のような流れで設定を完了できます。
- 会話吹き出しの画像を用意
- 画像を設定する
- 記事内でショートコードを挿入
- デザインを変えたいならカスタマイズする
まずは『会話吹き出し』の準備を使用
吹き出しには画像が必要なのでキャラクターの画像を用意します。
吹き出しキャラの入手方法としては
・外注する
・無料素材を使う
・自作する
イラスト作成スキルがあるなら自作すればいいですが、多くの人はそんなスキル持っていないかもしれないので外注することが多いかと思います。
ごりたすのアイコンは『いぬまん』さんの無料素材ですが、別のアフィサイトでは吹き出しアイコンは外注しています。
よく外注で使うのはココナラやツイッターのイラストレーターさんです。
画像を入手したらAFFINGER5側で設定を行う
アフィンガーのテーマ側で画像を登録していきます。
AFFINGER5管理>会話・ファビコン等から画像を登録することができます。
あとは画像をアップするだけ
ここでは『ごりたす』のアイコンを「会話1」に設定します。
準備ができたらあとは記事内に挿入
先程は「会話1」に設定したので記事内に挿入する場合は
「タグ」>「会話吹き出し」で吹き出しを挿入することができます。
先程「会話1」に画像を設定したので記事内でも「会話1」を選べば会話吹き出しを使うことが可能です。
試しに使ってみます。
コードは上の画像ですが下の吹き出しのようになります。

これだけだと左側に会話がくるので簡単なカスタマイズの方法を解説します。
会話の向きを変えるカスタマイズ(右向きに)
もし、会話吹き出しを右側にしたい場合は下記の部分に「r」を記載することで右側の吹き出しをさく作成することができます。

吹き出しの色のカスタマイズ
もし吹き出しの色を変えてみたい場合もカスタマイズすることができます。
外観>カスタマイズ>オプションカラーの設定>会話吹き出し
ここから会話の色などを設定することが可能になります。

