アフィンガーで会話風吹き出しの設定・使い方【反対側の設置も解説】

悩む人

色んなブログのページでこんな吹き出しをよく見るけど，この会話風みたいな吹き出しって，どうやって設定するんだろう？

今回は，こんな疑問に答えます。

ヒロシ

ブログの記事のページで会話風吹き出しをうまく取り入れることで，その記事が見やすくなって印象が変わります。

今回は，WordPressテーマWING(AFFINGER5)で会話風吹き出しを設定して記事に設置する方法を紹介します。

会話風吹き出しを設置するおもな理由は，

です。

そしてこの吹き出しの設定は非常に簡単にできますので，まだやっていない人は参考にしてください。

それでは，会話風吹き出しの設定方法を紹介していきます。

アイコンを用意する

まずは，会話風吹き出しで使うアイコンを用意してください。

今回のアイコンは，Iconponで作成しています。

Iconponは，無料で使えるアイコン素材のダウンロードサイトです。

アバターの種類が豊富で使いやすいのでおすすめです。

まずはアイコン素材のサイトでアイコンをダウンロードしてください。

または，デザインの質を求めるならプロに頼んでアイコンを手に入れましょう。

アイコン作成の依頼ができるサービスですと，ココナラがおすすめです。

当ブログのアイコンも，ココナラで制作してもらいましたよ。

ヒロシ

会話風吹き出しの設定をする

WordPress管理画面で，「AFFINGER5管理」で会話風吹き出しの設定をしていきます。

「AFFINGER5管理」をクリックします。

「会話・ファビコン等」をクリックします。

ここでは，最大8つのアイコンを設定できます。

「アイコン名」と「アイコンの画像」を設定してください。

会話風吹き出しの使い方

ここでは例として，アイコンを左右に設置した吹き出しを表示させてみます。

事前に「AFFINGER5管理」で下の画像のアイコン画像をアイコン3とアイコン4に設定しています。

それでは，設定した会話風吹き出しを投稿の編集ページで設置する方法を紹介します。

上のようなショートコードが表示されます。

プレビューで確認してみると，

アイコンの吹き出しが反映されています。

次に，反対側にアイコンの吹き出しを設置する方法を紹介します。

上のように表示されたショートコードの始まりの[]内の文末に半角スペースrを入力します。

プレビューで確認すると，

左右で会話風の吹き出しが反映されています。

まとめ

悩んでいた人

会話風の吹き出しを設置するだけで記事のイメージがこんなに変わるんですね！

会話風吹き出しはこの他にも設定できる項目がありますので，色々と試してみて，記事の内容に合わせて設定していくのが良いです。

ヒロシ

いかがでしたでしょうか？

今回は以上になります。

それではまた！