みなさんこんにちはコイトです。
みなさんは会話風の吹き出しを使っていますか?
吹き出しを使って会話をしているように使うブログの書き方なのですが、そこの内容にポイントを入れるとわかりやすく、読みやすくなります。
不思議ですね。


会話風吹き出しのメリットは
・設定しちゃえば簡単に使える
・ポイントを伝えやすい
・読者に読んでもらいやすい
伝えたいことのポイントをただの文で伝えても味気ないですが
会話風吹き出しを使うと見栄えも良くなりますよね。
アフィンガー6の初期設定で使うことができるのでありがたいですよね。
注意ポイント
今回の記事はアフィンガー6という有料テーマの吹き出し設定方法になります。
Contents
完成したらこんな感じになります。



最初のアイコン画像だけしっかりと作れれば設定はかなり簡単です。
AFFINGER6の会話風吹き出しの作り方・アイコン画像を作ろう
まずはアイコン画像を作って行きましょう。
アイコン画像が無い状態だと、吹き出しの顔が映る部分が空欄になってしまい会話感が出ません。
私はOppa dollというアプリを使い作成しています。
作成して、画像を顔付近だけ残しトリミングします。
そうするとこんな感じになります。
このような画像を二つ以上作成してください。
ちなみに私は「コイト」と「悩む人」を多用しています。
「悩む人」場合は悩んでる風のアイコンにすることがいいかもしれません。
私の失敗
アイコン作成時に、背景のことを考えていませんでした。
ブログの背景が白系でアイコンの背景も白系だと同化してしまい、目立ちません。他の方を参考にすると、あえて黄色や青など目立つ色にしているようです。
AFFINGER6の会話風吹き出しの作り方・吹き出しの設定
アイコン画像が用意できたところで吹き出しの設定をしていきましょう。
場所
【AFFINGER 管理】⇒【AFFINGER 管理】⇒【会話アイコン】
開くとこのような画面が表示されます。
①「アイコン名」に名前を決める
②画像を添付してください。
画像の貼り方
画像の貼り方は「アップロード」をクリックすると、パソコン内の画像を貼り付けることができます。
①と②が完了したら「save」を押しましょう。
AFFINGER6の会話風吹き出しの使い方
設定したものをしっかりと使っていきましょう。
会話を使う
場所
【タグ】⇒【会話ふきだし】⇒【会話1】(自分の使用したい会話)
このような流れで選択しましょう。
選択するとコードが入力されます。
上記の画像のように、会話をカッコの中に入れてみましょう。
入力後プレビューで見るとこんな感じになります。
会話を右側に表示
右側に表示させる方法は
左側「st-」から始まる最後の部分に『半角スペース+r』を入力したら完了です。
全角スペースでは右側表示にならないので注意しましょう。
プレビューで見るとこんな感じです。
後は自分なりに会話を作ってみましょう。
AFFINGER6の会話風吹き出しの作り方・そのほかの設定
他にも設定をすることができます。
・アイコンを少し大きくできる。
・アイコンを少し動かす。
この二つを設定できます。
設定方法は
先ほどの【会話アイコン】の設定画面の一番下のあたりに☑を付けることができる場所があります。
試しにチェックを入れてみるとアイコンが変化します。
変化させることで協調ができるので試してみてくださいね。
AFFINGER6の会話風吹き出しの作り方・まとめ
最後になりますが、
会話風吹き出し設定することで
吹き出しのメリット
・設定しちゃえば簡単に使えるから便利
・ポイントを伝えやすい
・読者に読んでもらいやすい
このようなメリットが得られます。
記事を書いている本人もポイントが簡単に伝えられるので楽ですよね。

ぜひ会話風吹き出しを使い記事を書いてみてください。
最後までご覧いただきありがとうございました。