吹き出しはどういう時に使うのがいいの?
そんな方向けの記事です。
ブログでよく見る会話風の吹き出しは、アクセントになって記事を読みやすくしてくれます。
この記事ではAFFINGER6(アフィンガー6)で会話風の吹き出しを作る方法を画像つきで詳しく解説しています。
吹き出しを使うポイントについても解説しているので、ブログ記事の装飾を1段階レベルアップさせたい方はぜひ最後までご覧ください。
目次(お好きなところからどうぞ!)
アイコンを設定する
↑
こんな感じの会話吹き出しを作る手順をご紹介します。
吹き出しを作るにはまず、「AFFINGER管理」→「AFFINGER管理」→「会話アイコン」からアイコンを設定します。
「アイコン名」に入力した文字がアイコンの名前として表示されます。
(空欄でもOK!)
任意の画像をアップロードして「Save」をクリックすることで、アイコンの画像が決定します。
アイコンのサイズは100px以上の正方形が推奨です。
アイコンは自分の写真やフリー素材のイラストなどがおすすめ。
ココナラなどでイラストを描いてもらうのもオリジナリティがあっていいですね。
アップロードされた画像が表示されればOKです。
アフィンガー6での会話吹き出しの作り方
アイコンを設定したら投稿画面から吹き出しを挿入することができるので、その手順についてエディタ別に紹介します。
ブロックエディタの場合
ブロックエディタの場合、吹き出しを入れたいところを左クリックで選択し、右側メニューの「ブロック」をクリック。
スクロールしたところにある「簡易会話A」をクリックすると、吹き出しが挿入されます。
会話は吹き出しの中に直接打ち込めばOKです。
ただブロックエディタの場合、
- アイコンが2つまでしか選べない
- アイコンの位置を右側にできない
という仕様だったので、カスタマイズ性を考えるとクラシックエディタを利用したほうが良さそうです。
クラシックエディタの場合
クラシックエディタの場合、吹き出しを入れたいところを左クリックし、ビジュアルの「タグ」→「会話吹き出し」→「会話1」をクリックすればOKです。
コードの最後に「r」を加えるとアイコンが右にある吹き出しに変更できます。
テキストエディタの場合は下記コードを打ち込めばOKです。
「st-kaiwa1」「/st-kaiwa1」 ▼右側にアイコンを表示させる場合 「st-kaiwa1 r」「/st-kaiwa1 r」
※コピーして貼り付ける場合は「」を[]に変換してください。
会話はコードの間に入力すれば反映されます。
会話吹き出しのカスタマイズ方法
デフォルトだと吹き出しはこのような形なんですが、アイコンの大きさや吹き出しの色などをカスタマイズすることができます。
アイコンのカスタマイズ手順
「AFFINGER管理」→「AFFINGER管理」→「会話アイコン」から、アイコンの動き・大きさを変更することができます。
変更したい部分にチェックを入れて、「Save」をクリックすれば変更完了です。
ちなみに動きを加えて大きくした吹き出しはこんな感じ。
以前よりも目立つようになりましたね!
吹き出しの色の変更手順
吹き出しの色や線の太さは「外観」→「カスタマイズ」→「オプション(その他)」→「会話ふきだし」から変更することができます。
会話ごとに設定できるので、アイコンによって吹き出しの色を変えることも可能です。
下にスクロールすると
- アイコンに枠線をつける
- ふきだしを角丸にしない
- 枠線の太さ
- ボーダーデザインタイプの背景色
の設定ができます。
吹き出しを使うポイントと注意点
吹き出しを使うポイントはズバリ、読んでほしいところに使うということ。
というのも吹き出しはテキストのみと比べて目立つので、ユーザーの目を引くことができますからね。
たまに「へー、そうなんだね」といった感じで、ただの相槌やテキストばかりのところに無理やり装飾として吹き出しを入れている記事がありますが、これは重要な情報ではないのでNGです。
また、吹き出しの内容が長すぎると読みづらいので、できるだけ端的に伝えたい内容をまとめるのがベストかなと思います。
ちなみに、調べていると「ブログ 吹き出し うざい」などのキーワードがあったので、多用はNGです。
先に結論を端的にまとめ、補足情報として使うのがいいと思います。
吹き出しをうまく使って記事にアクセントを
吹き出しは思わず目を引く装飾なので、重要なことや伝えたい情報に使うのが効果的です。
アフィンガーというテーマを使えば簡単に吹き出しを挿入できるので、ここぞというポイントで使って伝わりやすい記事を作成してくださいね。
アフィンガーの特典つきレビューや詳しい機能は以下の記事で紹介しているので、興味があればぜひご覧ください。
【AFFINGER6 豪華33特典付きレビュー】1年使ってわかったメリット・デメリット
続きを見る
解説動画
YouTubeでも吹き出しの作り方を解説しているので、動画で観たい!という方はご参考ください。