吹き出し会話を記事に挿入する方法|AFFINGER5カスタマイズのイメージ画像

AFFINGER5

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

吹き出し会話を記事に挿入する方法|AFFINGER5カスタマイズのイメージ画像

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

Do
やってみたかったんですよねー吹き出し会話
どうせすぐ飽きるんやろ
baku
おねえさん
AFFINGER5なら簡単に設定できるわよ
わたしでもできるかな...
がか
baku
それはやってみなわからんがな
問題はユーザーが本当に求めているかどうかだよ
しゃちょう
しゅふ
あら、わたしはかわいいと思うわよ
僕はみんなが幸せならそれでいいよ
こうじょうちょう

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

baku
さすが有料テーマやな

STEP1:アイコンを登録する

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

AFFINGER5で吹き出しを設定するイメージ画像

AFFINGER5で吹き出しを設定するイメージ画像2

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

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

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

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

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

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

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

AFFINGER5で吹き出しを設定するイメージ画4

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

Do
アイコンの設定画面で吹き出しも設定できたら便利なんですけどね
あ、文句言っとる
baku

STEP3:記事に挿入する

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

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

AFFINGER5で吹き出しを記事に挿入するイメージ画像

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

baku
左からこんにちは

 

右からこんにちは
baku

 

最後に

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

僕はみんなが幸せならそれでいいよ
こうじょうちょう


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

WING(AFFINGER5)

紹介サイトはこちら

  • この記事を書いた人

Ryo Endo

bakuDESIGN+代表。 フリーランスのデザイナー・映像クリエイターとして大阪を中心に活動。

-AFFINGER5

Copyright© bakuBLOG+ , 2020 All Rights Reserved Powered by AFFINGER5.