【AFFINGER5】吹き出し会話を記事に挿入する方法

---

AFFINGER5 2019.11.27

ブログ記事の導入部分でよく見る吹き出しの会話。記事本文に入りやすくする効果が見込めるので使えるようにしておこうと思います。

[st-kaiwa1]やってみたかったんですよねー吹き出し会話[/st-kaiwa1]

[st-kaiwa5 r]どうせすぐ飽きるんやろ[/st-kaiwa5]

[st-kaiwa2 ]AFFINGER5なら簡単に設定できるわよ[/st-kaiwa2]

[st-kaiwa3 r]わたしでもできるかな…[/st-kaiwa3]

[st-kaiwa6 ]それはやってみなわからんがな[/st-kaiwa6]

[st-kaiwa7 r]問題はユーザーが本当に求めているかどうかだよ[/st-kaiwa7]

[st-kaiwa4 ]あら、わたしはかわいいと思うわよ[/st-kaiwa4]

[st-kaiwa8 r]僕はみんなが幸せならそれでいいよ[/st-kaiwa8]

というような感じで8つまで画像を登録することができ、吹き出しのデザインも個別に変更可能でした。

[st-kaiwa6 ]さすが有料テーマやな[/st-kaiwa6]

STEP1：アイコンを登録する

ダッシュボードメニュ「AFFINGER5 管理」＞「会話・ファビコン等」からアイコン画像を登録します。

①アイコン名：記事に挿入した際にアイコンの下に表示される名前です

②画像は60px以上の正方形が推奨されています。筆者は高解像度ディスプレイに備えて120×120で作成しました

※8つ全て登録する必要はありませんが、最低でも2つは登録しないと吹き出しの意味が薄れるかと思います。

STEP2：吹き出しのデザインを変更する

次に吹き出しのデザインを変更します。（このステップはとばしてしまっても吹き出しは表示されます。）

ダッシュボードメニュ「外観」＞「カスタマイズ」を開きます。

「カスタマイズ」が開いたら、「会話風吹き出し」をクリックしてお好みの色を設定していきます。

※ちなみに筆者は下部にある「ボーダーデザインタイプ（2px）に変更」にチェックを入れています。

[st-kaiwa1]アイコンの設定画面で吹き出しも設定できたら便利なんですけどね[/st-kaiwa1]

[st-kaiwa5 r]あ、文句言っとる[/st-kaiwa5]

STEP3：記事に挿入する

アイコンと吹き出しの設定が終わったら投稿に挿入します。

ビジュアルエディタの「タグ」＞「会話吹き出し」から選択して挿入することができます。

また、コードに「r」をいれることで、吹き出しの向きを変えることが可能です。

[st-kaiwa6 ]左からこんにちは[/st-kaiwa6]

[st-kaiwa6]左からこんにちは[/st-kaiwa6]

 

[st-kaiwa5 r]右からこんにちは[/st-kaiwa5]

[st-kaiwa5 r]右からこんにちは[/st-kaiwa5]

 

最後に

少し手間が増えますが、複数画像が登録できて、記事に変化が出て楽しいので、今後もこの機能は使っていこうと思います。 

[st-kaiwa8 r]僕はみんなが幸せならそれでいいよ[/st-kaiwa8]

「稼ぐ」に特化した
本格Woredpressテーマ

WING(AFFINGER5)

紹介サイトはこちら