今回は、こんな疑問に答えます。
本記事の内容
- AFFINGER5（アフィンガー）吹き出し機能の使い方
- 吹き出しに使用するイラストについて
こんにちは、ゆうきです。
今回は、AFFINGER5の吹き出し機能の設定方法から使い方までを詳しく解説していきます。
吹き出し機能とは以下のようなものです。
このように会話調にすることが可能。
本記事を読めば、AFFINGER5の吹き出し機能をフル活用して、ブログ記事を書いていくことができるようになりますよ。
本記事の信頼性
当ブログでもAFFINGER5を使用しており、全ての記事で吹き出し機能を使用中です。
補足
なお、AFFINGER5（アフィンガー）に興味はあるけどまだ導入していない！という人はぜひ下記記事を参考にしてみてください。
＞＞アフィンガー５はブログ初心者におすすめです【理由は３つ】
もくじ
AFFINGER5（アフィンガー）吹き出しの使い方
それでは、吹き出し機能の使い方を解説します。
解説とは言っても下記の2ステップで5分もあれば使えるようになるので安心してください。
吹き出し機能の使い方
- AFFINGER5管理画面の設定
- 編集画面で吹き出しを出す
AFFINGER5管理画面の設定
まずは、吹き出しで使用するアイコンをAFFINGER5の管理画面で設定します。
「AFFINGER5管理」→「会話、ファビコン等」を選択。
上図のような画面になるので、赤枠部分のあなたが設定したい画像の「名前」と「URL」を入力しましょう。
注意ポイント
画像のサイズは100ピクセル以上の正方形が推奨されています。プレビュー画面で表示を確認しつつ、見栄えを調整するようにしましょう。
なお、吹き出しに使用できるアイコンは８つまでです。僕の場合は現状5つ設定して使用しています。
最大8つも設定できるので、色々な思いや感情を表現できると思います。
全ての設定が完了したら、最後に「保存」をクリックして完了です。
編集画面で吹き出しを出す
つづいて、WordPressの投稿画面で実際に吹き出しを出していきましょう。
出し方は投稿画面上部の編集ボタンから「タグ」→「会話吹き出し」→「会話1~8」を選択。
あなたが表示させたい会話を選べば表示されます。
例えば僕の場合、下図のように会話1と会話2を表示してみます。
会話2については、デフォルトで画面左側に表示されます。しかし、会話1のように画面右側（反対側）に表示する場合はコードを変更する必要があります。
コードの変更は下図のとおり。
コードはデフォルトで「st-kaiwa1」となっているので、赤枠のように「st-kaiwa1 r」に変更しましょう。
rを付け足せばアイコンを反対側に表示させることができるわけです。
また、吹き出しの色を変更したい場合は、「外観」→「カスタマイズ」→「オプションカラー」を選択。
続いて「会話風吹き出し」をクリックしましょう。
下図のように色を変えながらプレビュー画面を見て、お好みの色を吹き出しに設定しましょう。
基本的な吹き出し機能の使い方は以上です。
AFFINGER5（アフィンガー）吹き出しのイラストはどうする？
こんな疑問もあるかと思うので、僕がおすすめする素材サイトをご紹介します。
結論、下記の3サイトです。
素材サイト3選
いずれも素敵なデザインで、無料利用できるので重宝しています。
FLAT ICON DESIGH
こちらは図のようにシンプルながらもどこから洗練された印象のデザインが特徴的な素材サイト。
無料でダウンロードでき、商用利用も可能なため多くのブログで使われていますね。
いらすとや
いらすとやは、公共施設でもよく使われている超メジャーな素材サイトの１つです。
余談ですが、僕の通うジムにもいらすとやの画像が使用されていました（笑）
とても可愛らしい雰囲気の画像がたくさんあります。
icons8
約14万点以上の素材をストックしているicons8。
非常に数が多いため、あなた好みのアイコン画像がきっと見つかると思います。
上図のように、項目ごとに分けてあるのも嬉しいですね。
アイコン画像に独自性を出したい場合
あなたがこのように考えるのであれば、ココナラの利用を検討してみるのはアリ。
僕も実際に当ブログとTwitterのアイコン画像、ヘッダー画像をココナラで依頼して作ってもらいました。
ココナラ自体は無料で登録できます。登録後にココナラで「ブログ アイコン画像」と検索し、あなた好みの画像を作ってくれそうなデザイナーに依頼すればOKです。
僕の場合は依頼から2～3日後に納品してもらい、「こんなに早いんだ～」と感心してしまいました。
僕はアイコン画像は依頼しましたが、ブログのアイキャッチ画像は自作してなるべく人と被らないように工夫しています。
とはいえ、中々記事をかくのに手いっぱいでデザインまでできない！という人が多いと思います。
自分にできない部分は外注するというのも1つの立派な戦略なので、ぜひココナラ含めて検討してみましょう。
まとめ：AFFINGER5（アフィンガー）の吹き出しを使い倒そう
AFFINGER5の吹き出し機能は、読者にとっても視覚的に分かりやすいです。
検索エンジンもユーザビリティの高いサイトを評価する傾向にあるため、吹き出し機能を上手く活用していきたいですね。
今回はこのあたりにしようとおもいます。