こんな悩みに答えます。
AFFINGER（アフィンガー）では、記事内に吹き出しを入れることができる機能が搭載されています。
以下のように吹き出しを設置するやり方です。
本記事では、記事前半にアフィンガーで吹き出しを入れるやり方からカスタマイズ方法、記事後半では、吹き出し用のアイコンを作成する方法までを紹介しています。
とても簡単に設置することができますので、ぜひ参考にしてみてください！
目次
AFFINGERで吹き出しを設定する方法
AFFINGER5で吹き出しを設定する方法
それでは、AFFINGER（アフィンガー）で吹き出しを設置するやり方を紹介します。
step
1アイコンの設定
まずは、「①AFFINGER → ②会話・ファビコン」をクリックして、会話風アイコンの設定をします。
すると、以下の画面になるので、項目を入力していきます。
- アイコン名：アイコンの下に表示されるテキストを入力
- 画像のURL：アイコン用の画像URLを入力
キャプチャでお見せすると、以下の箇所に入力した内容が反映される感じです。
画像のURLは、「アップロード」のボタンをクリックすることで、アイコンをアップロードできます。
設置ができましたら、ページ下の「保存」ボタンをクリックして完了です。
step
2会話アイコン用のショートコードを入れる
続いて、記事の投稿画面を開き、エディタの「①タグ → ②会話吹き出し → ③会話（1~8）」をクリックします。
会話用の数字が「1~8」まであるので、設置したい吹き出しの番号をクリックします。
今回は、試しに「会話１」を選択してみます。選択すると、以下のようにショートコードが表示されます。
ショートコードが追加されましたら、以下のように、ショートコード内に入れたいテキストを入力します。
これで吹き出しの完成です！
後は、プレビュー画面で以下のように、吹き出しが表示されていればOKです！
ちなみに、アイコンを右側に配置したい場合には、半角スペースで小文字の「r」を入れます。
これで、吹き出しが反対側になります！
続いて、吹き出しのカスタマイズ方法について紹介していきます！
AFFINGERの吹き出しをカスタマイズする方法
AFFINGERの吹き出しをカスタマイズする方法
会話吹き出しの色や、アニメーションを付けるやり方について、紹介します。
１.吹き出しの色
吹き出しの色は、「外観 → カスタマイズ → オプションカラー」から設定できます。
オプションカラーの画面になりましたら、「会話風ふきだし」の項目があるので、「会話１〜８」までの色変更ができます。
その他にも、アイコンの罫線を消したり、ボーダーの太さの調整もできるので、お好みで吹き出しのカスタマイズをしてみてください！
カスタマイズができましたら、「公開」をクリックして完了です！
2.アニメーションの付け方
吹き出しにアニメーションを付けるには、「①AFFINGER5管理 → ②会話・ファビコン等」で設定します。
するとページ下に「会話風アイコンを少し動かす」という項目があるので、チェックを付けます。
チェックができましたら、「保存」ボタンをクリックします。
また、その下にある「会話風アイコンを少し大きく」にチェックすると、アイコンが少し大きくなりますので、お好みで調整してみてください！
AFFINGERの吹き出し以外で吹き出しを作る方法
AFFINGERの吹き出し以外で吹き出しを作る方法
AFFINGERに搭載されいてる吹き出し以外で、吹き出しを作成してみたいと思う方はサルワカさんが無料で提供している吹き出し用のCSSを使用してみるのがオススメです！
※クリック後、外部リンクに飛びます
ちなみに、AFFINGERでは、以下のように作ることができます。
作成方法を解説していきます！
step
1CSSをコピー&ペースト
まずは、サルワカさんのサイトから設置したい吹き出し用のCSSをコピーします。
今回は、以下のCSSを使います。
CSS .balloon4 { position: relative; margin: 2em 0 2em 40px; padding: 15px; background: #fff0c6; border-radius: 30px; } .balloon4:before { content: ""; position: absolute; left: -38px; width: 13px; height: 12px; bottom: 0; background: #fff0c6; border-radius: 50%; } .balloon4:after { content: ""; position: absolute; left: -24px; width: 20px; height: 18px; bottom: 3px; background: #fff0c6; border-radius: 50%; } .balloon4 p { margin: 0; padding: 0; }
CSSのコピーできましたら、「外観 → カスタマイズ → 追加CSS」に貼ります。
貼り付けが完了しましたら、「公開」をクリックします。
step
2投稿画面で編集
続いて、投稿画面を開き、吹き出し用のHTMLを設置していきます。
まずは、エディタ画面の「タグ → レイアウト → 全サイズ → 左右50%」をクリックします。
すると、以下の画面が表示されますので、「左：画像」「右：吹き出し用のHTMLコード（テキスト）」をそれぞれ設置していきます。
画像の設置方法は、左側をクリックして、「メディアを追加」で画像を追加できます。
右側は、以下、吹き出し用のHTMLコードをコピー&ペーストします。
※HTMLコードを貼る際には、「ビジュアル」から「テキスト」に切り替えて貼ります。
HTML <div class="balloon4"> <p>ここに文章</p> </div>
以下のように、テキストモードで<div class="rbox"></div>内に貼り付ければOKです。
「テキスト」画面
最後に、「ビジュアル」に切り替えて、「このテキストは最後に消して下さい（50%）」の文言を削除したら完成です！
念のため、PC,スマホで問題なく表示されているか確認してみてください！
吹き出し用のアイコンを作成する方法
最後に、吹き出し用のアイコンを作成する方法を紹介します。
吹き出し用のアイコンを使用するには、著作権の侵害にならないフリー画像を使用しましょう。
以下のサイトでは、アイコンを作成することができますので、参考にしてみてください！
>> 無料アイコンメーカー・似顔絵アプリ・アバター作成サイト58選
※クリック後、外部リンクに飛びます
ココナラで依頼するのはおすすめ！
また、アイコンを自分で作成するのはメンドウと思う方は、ココナラでイラストレーターさんに作成をお願いができます。
要望に合わせたアイコンを作成してくれ、何より自分で作成するより高品質のアイコンを格安で作成してくれます！
また、多種多様な表情のアイコンを作成してくれるので、ブログで吹き出しを使い分けたいときなんかにも利用ができますよ！
※会員登録で300円クーポンあり
AFFINGERで吹き出しを設置する方法とカスタマイズ：まとめ
いかがでしたか？
今回は、AFFINGER5の吹き出しを設置するやり方からカスタマイズする方法について、紹介しました。
今回紹介したやり方で、アフィンガー５での吹き出しの設置やアイコンの作成方法が分かりましたら幸いです。
なお、吹き出し以外でAFFINGERでできるカスタマイズについては以下で紹介していますので気になる方は参考にしてみてください！
ここまで読んでいただきありがとうございました！