- AFFINGER5で会話吹き出しがつくれる
- AFFINGER5の会話吹き出しのデザインを変更できる
この記事では、AFFINGER5の会話吹き出し設定について解説します。
今回は、AFFINGER5を使った会話風吹き出しの設定方法について解説致します。
Contents
会話吹き出しのメリット・デメリット
会話の吹き出しは、次のような点でメリットがあります。
吹き出しのメリット
- 感情をイラストで伝えやすい
- 記事が読みやすくなる
- 内容が伝わりやすくなる
- 堅苦しさがなくなる
- キャラクターを出すことができる
上記のように、「会話吹き出し」を入れることで、様々なメリットがあります。
ひたすら文字ばかりを並べるよりも吹き出しを使うことで、テンポを変えることができるのが特徴です。
また、吹き出し会話を使うことで前後のテキストを区切る役割にもなって、視覚的にも読みやすくなり、離脱率も減少します。
アイコンを使うと、記事の中に個人を登場させることができるので、個人のブランディングにも役立ちますね！
AFFINGER5では、こういった吹き出しをプラグインや面倒な設定なしで使用可能で、吹き出し会話のデザインも柔軟にカスタマイズできちゃいます！
文字だけだとなんだか読むのがしんどく感じてしまう方も、会話風アイコンがあれば、テンポよく読み進めることができるので、導入必須ですね！
逆にデメリットは次のような点です。
吹き出しのデメリット
- 初回のみアイコン画像の取得や設定に若干の手間がかかる
- 多用すると記事が縦に長くなる
やはり最初は、画像を取得して、設定したりするのに、若干手間がかかります。
入れすぎると、記事が縦に長くなり、読むのがしんどくなってしまうので、吹き出しを入れる箇所は前半の導入部分だけにするなど、設置場所を絞った方がいいです。
手間がかかるといっても、アイコンにこだわらなければ10分程で設定が可能なので、是非設定してみてくださいね！
会話吹き出し用のアイコン
会話吹き出しを設定するにあたって、まずはアイコン画像を取得しましょう。
アイコン画像の取得の仕方については、こちらの記事でいろんな取得方法を解説しているので、こちらを参照に、画像を取得してください。
-
-
情報発信するなら必須！SNSやブログのプロフィールアイコンの作り方！
続きを見る
フリー素材を使うのも一つの手です。
-
-
無料！会員登録不要のおすすめ写真・画像サイト20選！
続きを見る
PCサイトでお手軽に、アイコンを取得したい場合は、こちらのサイトからどうぞ。
統一されたキャラクターで、喜怒哀楽のアイコンを設定したいという方は、こちらのアプリにて作成して下さい。
- Mooone
会話吹き出しの基本設定
吹き出しに使用したいアイコンを取得できたら、AFFINGER5の設定に進みましょう。
AFFINGER5での吹き出しの設定方法は次の2種類です。
吹き出し設定方法
- アイコン基本設定：AFFINGER5管理（画像さえあれば5分で完了）
- 吹き出しデザイン設定：カスタマイズ設定（こだわらなければ設定不要）
AFFINGER5への基本設定から解説致します。
アイコン設定
ますは、AFFINGER5の管理ボタンを押して、アイコンの画像や名前を設定しましょう。
上の図の通り、WordPress管理画面より「AFFINGER5管理」→「会話・ファビコン等」→「会話風アイコン」の順で、会話風アイコンの設定画面を開きましょう。
「会話風アイコン」設定画面では、アイコン画像や名前の設定をすることができます。ちなみにアイコンは8つまで設定が可能です！
ここで、先ほど取得したアイコンを設定していきます。
まずは、名前を設定しましょう！名前はアイコンの下に表示させることができます。
そのあとに、アップロードボタンを押して、表示させたいアイコンをアップロードしましょう。
※画像は、100px以上の正方形画像が推奨されています！
画像をアップロードしたら、次のように表示されるので、下の「保存」を押してください！
下の方の保存ボタンを押して、上図のようにアイコンが更新されたら設定完了です！
次に、アイコンの動的表示です。
会話風アイコンの設定画面の下の方に、次の2つのチェックボックスがあると思います。
- 会話風アイコンを少し動かす
- 会話風アイコンを少し大きく
このサイトでは、上の二つにチェックを入れて運営しているので、参考にして下さい！
吹き出しデザイン設定
吹き出しのデザインは、次の「カスタマイズ」画面で設定可能です。
WordPress管理画面より「外観」→「カスタマイズ」を選択してください。
上のような画面が表示されたら、「オプションカラー」→「会話風ふきだし」に進んでください。
「会話風ふきだし」を選択したら、次のような画面が表示されます。
ここでは、次の設定が可能です。
- 吹き出しの背景色
- アイコン周りの枠線
- 吹き出しを角丸or四角
- 吹き出し（枠線タイプ）
吹き出しの背景色は、濃すぎると、目が疲れるので、淡薄色を使用するのがよいと思います。
アイコン周りの枠線や、吹き出しのデザインは、お好みで設定してください。
このサイトは、次の設定をしています。参考にして下さい！
- ふきだしは各丸
- ボーダーデザインは太め
以上で基本設定は終わりです！お疲れ様でした！
会話吹き出しの設置方法（左）
基本設定が完了したら、次は記事への差し込み方法について解説します。
投稿編集画面のビジュアルで、「タグ」→「会話ふき出し」で、先ほど設定した会話番号を選択してください。
選択すると、次のショートコードが表示されます。
ショートコードの間に、吹き出しに入れたい文字を入力してください。
文字が入力できたら、「プレビューボタン」を押して、きちんと吹き出しが表示されているか確認してください。
会話吹き出しの設置方法（右）
左に設定する方法は、先ほどと同様、ショートコードを表示させて、前のショートコード（［st-kaiwa2］）の後ろに、半角スペースで1文字空けて「r」を入力して下さい。
これで、左右どちらにも、会話風吹き出しを表示させることができるようになりましたね。
まとめ
今回はAFFINGER5を使って会話吹き出しを設定する方法を解説しました。
画像を取得さえすれば、超簡単に設定できるので、設定がまだ済んでないという方は、是非、設定してみて下さい。
会話吹き出しを使って、ユーザーが読みやすい記事を作っていきましょう！