【初心者向け】AFFINGER5（アフィンガー）で吹き出しを使う方法！

こんな疑問に答える記事になります。

というのも本記事を書いている私自身、吹き出しの使い方がわからず四苦八苦しておりました…

慣れてしまえばなんてことない動作ですが、備忘録として残しておきます！

ブログ初心者の方や、アフィンガー導入したての方は是非参考にしてみてください。

吹き出しの設定

アフィンガーでは吹き出しをワンクリックで呼び出すことができます。

そのための準備として、吹き出しに必要な画像を用意しておきましょう。

私はFLAT ICON DESIGNのものを使用しています。

※オリジナルアイコンに変更しました。

関連記事 【ココナラ】ブログ用アイコンを依頼してみた！オリジナルのメリットと完成までの流れ！

その名の通り、フラットデザインで可愛らしいアイコンがずらりと並んでいます。

吹き出しに設定するアイコンがまだ決まっていない方は、上記のサイトをのぞいてみるといいかもしれませんよ！

設定する画像が決まったらワードプレスのメディアにアップロードします。

左側にあるワードプレスのメニューから「AFFINGER5 管理」→「会話・ファビコン」へ移り、用意した画像をアップロードすると反映されます。

アイコン画像の下にあるボックスは、吹き出し画像の名前になるので必要であれば打ち込んでおきましょう。

プラグインの導入

WordPressをインストールした直後は、記事のフォーマットがGutenberg（グーテンベルグ）になっています。

グーテンベルグは吹き出しを呼び出す「タグ」が標準では搭載されていません。

色々調べていくとアフィンガーではClassic Editor（クラシックエディタ）を推奨していることがわかりました。

他のブロガーさんがアフィンガー5を紹介している記事と、自分の投稿画面が「なんか違うなー」と感じていたのは、この設定の違いからだったんですね。

さっそく「クラシックエディタ」を導入してみました。

すると…

記事上部にこのような編集コマンドが出ています。

この中の「タグ」→「会話ふきだし」で呼び出すことができます。

使い方

これでワンクリックで吹き出しを呼び出すことができるようになったわけですが、この吹き出しも色々いじることができます。

ワードプレス左側にある「外観」→「カスタマイズ」→「オプションカラー」→「会話風ふきだし」で上記の画面に移ります。

ここで吹き出しの背景色を変更したり、吹き出しの線を調整することが可能。

こんな感じに会話形式で話を進めていくこともできますね。

ちなみに吹き出しのデフォルトは左側になっていますが、右側にする場合はちょっと注意です。

吹き出しを呼び出す際にも、右側表示をするためのアナウンスが出てるんですが

[st-kaiwa1 r][/st-kaiwa1]

1の後ろに「半角スペース＋r」を入れないと反映されません。

これに気付くまで結構な時間を費やしました笑

吹き出しを使う方法まとめ

他のテーマだと吹き出し専用のプラグインや、HTML・CSSを打ち込んだりするようですが、アフィンガーならワンクリックで作成できます。

こういった装飾が文字の中にワンポイント入るだけで、読みづらさを和らげる効果も期待できますね。

かといって使いすぎると、それはそれで読みづらいので、用法容量は守って使っていきましょう。

吹き出しの使い方がわからない方の参考になれば幸いです。

今回は以上になります。