
こんなお悩みを解決します。
この記事で分かること
- AFFINGERで会話吹き出しを表示させる方法
- AFFINGERで会話吹き出しを反対側に表示させる方法
- AFFINGERで会話吹き出し色を好きにデザインする方法
アフィンガーだとプラグインなしで、簡単に会話吹き出しの表示とカスタマイズが可能です。
吹き出しを活用することで、記事の読みやすさもUPするので、ブログを象徴するアイコンと合わせて活用するのがおすすめ。
では、実例を交えつつ、画像を用いて会話吹き出しを表示・カスタマイズする方法をシェアしていきますね。

130名超えのブログサロン『GBC』
AFFINGER(アフィンガー)で会話吹き出しを表示する方法
アフィンガーで吹き出しを表示させる方法は至ってシンプル。
以下の手順を進むだけでOK。
- 吹き出し名を決める
- 吹き出し画像を貼る
- 吹き出しのカスタマイズ
- ビジュアル画面で表示させる
順番に解説しますね。
①吹き出し名を決める
まずは画面左から「AFFINGER5管理」をクリックし、次に管理画面にある「会話・ファビコン等」を選択します。
少し画面をスクロールすると「会話風アイコン」という項目があるので、まずはアイコン名を決めましょう。

②吹き出し画像を貼る
アイコン名を決めたら、次は吹き出し用の画像を貼りましょう。
ここは「アップロード」をクリックしてWordpressから画像を挿入するだけ。
アイコン名と画像を貼ると以下のような感じになります。
③吹き出しのカスタマイズ
ここまでで吹き出しは完成ですが、最後にカスタマイズも可能です。
AFFINGERで可能なカスタマイズは以下2つ。
- 会話風アイコンを少し動かす
- 会話風アイコンを少し大きく
ちなみに当サイト『Couple note』では、何もカスタマイズはしていない状態です。

④ビジュアル画面で表示させる
最後にビジュアル画面で「タグ > 会話吹き出し」から作成した番号を選び表示させましょう。
そしたら、以下のように隙間に表示させたい文章を打ち込めばOK。

AFFINGER(アフィンガー)で会話吹き出しを反対(右)側に表示する方法
アフィンガーの吹き出しを反対側(右)に表示させる方法はスーパー簡単。
以下のように「半角スペース+r」を入力するだけ。
すると、反対側(右)から吹き出しが表示されます。

穴場キーワードの探し方
AFFINGER(アフィンガー)の会話吹き出し色をデザインする方法
アフィンガーで吹き出し色をデザインするには、以下の手順を踏めばOK。
- オプションカラーを選択
- 会話風吹き出しを選択
- 吹き出し色を好きなデザイン
順番に解説しますね。
①オプションカラーを選択
まずは「外観 > カスタマイズ」に行き、次に「オプションカラー」をクリックします。
②会話風吹き出しを選択
次に画面を少しスクロールすし、「会話風吹き出し」をクリックしましょう。
③吹き出し色を好きなデザイン
そしたら、吹き出し色を好きにデザインするだけ。
番号ごとに吹き出しの背景色を好きにデザインすることができますよ。
吹き出し用のアイコンがない場合
吹き出しを使うにはアイコンを用意する必要があります。
ただ、多くの人が使うフリー素材をメインに使っていると、ブログの個性が死んでしまうので、独自の画像を用意するのがおすすめ。
「ココナラ」であれば、無料登録できて絵師さんにオリジナルアイコンを作成してもらえます。
安ければワンコインで書いてもらうこともできますし、1度作成すればSNSなどでも使いまわせるので、ぜひ作成しておきましょう。
AFFINGER(アフィンガー)で会話吹き出しを使ってブログ運営を加速させよう
アフィンガーであれば、プラグインを使わず簡単に吹き出しを活用できます。
吹き出しが記事の中にあると読者は息抜きにもなり、非常に読みやすくなるので、ぜひ活用しましょう。
また、吹き出しのアイコンは個性があった方が、ブログを覚えてくれるきっかけにもなるので、ブログに合ったアイコンを作成するのが良いですね。
\格安で個性あるアイコンが作れる/
人気記事:保存版|内部・外部SEO対策のやり方【上位表示のポイント29選】