・吹き出しの色や枠線をカスタマイズしたい
・吹き出しでオリジナリティを出したい
このようなお悩みにお答えします。
AFFINGER5(アフィンガー5)では、吹き出し機能が標準で使えます。
吹き出しをうまく使うことで、記事のポイントを分かりやすく・読みやすく伝えることができます。
また、アイコンや枠線・色などでオリジナリティを出すことも可能。
本記事を読めば、AFFINGER5(アフィンガー5)の吹き出しの設定方法とカスタマイズが分かりますよ。
本記事の内容
- アフィンガー5の吹き出しの設定方法とカスタマイズ
- 吹き出しのおすすめの使い方
本記事を書いた人
まだアフィンガー5を導入していないという方は、こちらの記事をどうぞ。
続きを見る【初心者におすすめ?】AFFINGER5(アフィンガー5)を初心者がレビュー
目次
アフィンガー5の吹き出しの設定方法
アフィンガー5の吹き出しは、標準機能として搭載されており、AFFINGER5管理から簡単に設定することができます。
吹き出しの設定方法は以下の通りです。
- アイコンをアップロード
- アイコンの名前をつける
AFFINGER5管理→会話・ファビコン等
アイコンの名前
画像をアップロード
また、ページ下部に設定変更できる項目が2つあります。
- 会話風アイコンを少し動かす
- 会話風アイコンを少し大きく
個人的には、動かす+少し大きくの設定が好みです。
吹き出しを設定するときには、以下気を付けるポイントがあります。
- 画像サイズは、100px以上の正方形推奨
- 登録できるのは8種類まで
画像サイズは、100px以上の正方形にします。
理由は、公式マニュアルの推奨サイズだからですね。
設定した画像がボヤける場合は、アップロードした画像サイズが小さいことが原因の可能性があります。
また、吹き出しとして登録できるのは8種類までとなっています。
もし8種類以上に増やしたい場合は、会話吹き出しプラグイン2という有料プラグインを使えば可能です。
プラグイン | 価格(税込) | 機能 |
会話吹き出しプラグイン | 2,980円 | 吹き出しキャラをほぼ無限に作成可能 キャラ別に吹き出しの色やカテゴリを設定可能 |
個人的には8種類あれば十分という感覚です。
8種類別々でも、2つのアイコンで喜怒哀楽を揃えてもOKです。
アフィンガー5の吹き出しのカスタマイズ
アフィンガー5の吹き出しのカスタマイズ種類は、以下の通りです。
- 背景色
- アイコンの枠線を消す
- ふきだしを角丸にしない
- 枠線のみにする
カスタマイズのやり方
カスタマイズ→オプションカラー→会話風吹き出しで実施可能。
ひとつずつ解説していきますね!
アフィンガー5 吹き出しカスタマイズ
①背景色
背景色を好きな色にカスタマイズすることができます。
変更したいアイコンのところで、カラーコードを入力すれば完了です。
カラーコードについては、以下のサイトが使いやすいです。
アフィンガー5 吹き出しカスタマイズ
②アイコンの枠線を消す
「アイコンの枠線を消す」を切り替えることで設定が可能です。
イメージは以下の通りです。(タブで切り替えできます)
アフィンガー5 吹き出しカスタマイズ
③ふきだしを角丸にしない
ふきだしの形を角丸、四角で選択できます。
「ふきだしを角丸にしない」を切り替えることで設定が可能です。
イメージは以下の通りです。(タブで切り替えできます)
アフィンガー5 吹き出しカスタマイズ
④枠線のみにする
枠線のみのデザインにカスタマイズも可能です。
ボーダーデザインタイプ(枠線のみ)に変更をチェックすれば完了します。
イメージは以下の通りです。(タブで切り替えできます)
「なし」にすると背景色ありとなります。
ポイント
『ボーダーデザインタイプの背景色※一括』を白(#ffffff)にすると、枠線のみの綺麗なデザインになります!
ちなみに、本ブログでは以下の設定にしています。
- 背景色:#cecece
- アイコンの枠線を消す:チェックしない
- ふきだしを角丸にしない:チェックしない
- ボーダーデザイン(枠線のみ)に変更:普通(2px)
- ボーダーデザインタイプの背景色:#ffffff
アフィンガー5の吹き出しの利用方法
吹き出しの利用方法は以下の流れです。
- 本文を入力
- ドラッグして範囲選択
- タグ→会話吹き出し→会話1-8を選択
このように表示されていれば、OKです。
実際の見えかたはこんな感じ。
また、アイコンの位置を右側に表示することもできます。
[st-kaiwa〇]に半角スペース+rを入力するだけです。
入力後はこんな感じ。
実際の見えかたはこんな感じ。
アフィンガー5の吹き出しの使いどころ
アフィンガー5の吹き出しを使うことで、以下のような効果が期待できます。
- ポイントを分かりやすく伝える
- 記事を見やすくする
- 親近感を持たせる
例えば、以下のような文章があったとします。
検索上位に表示させるには、SEOが不可欠です。
SEOは内部対策と外部対策で構成され、内部対策はインデックスとクロール最適化。
外部対策は、被リンクの獲得とSNSでの拡散です。
もう少し分かりやすい文章にしたいですよね。
そこで吹き出しを使えば、
外部対策は、被リンク獲得とSNSの拡散。
いかがでしょうか?
ポイントが分かりやすく、記事も見やすく、会話形式にすることで親近感を感じますよね。
マンガ感覚で、読者に負担が少なく読めるというのが重要です。
一方で、吹き出しを使いすぎると文章に重みが無くなることがデメリットです。
ところで、吹き出しを使うことでオリジナリティを出すことも可能です。
特にアイコンについては、フリー画像サイトではなく、ココナラ等でオリジナルアイコンを頼む方がおすすめ。
自作するよりも完成度が高くて愛着が湧きますし、ブログの顔にもなってくれるからです。
僕はココナラは利用したことはありませんでしたが、プロのイラストレーターにお願いして満足いくアイコンが完成しました。
【ココナラ初心者向け】自分だけのヘッダー・アイコンを外注する方法という記事に、当時の体験談をまとめていますので参考にしてみてください。
続きを見る【ココナラ初心者向け】自分だけのヘッダー・アイコンを外注する方法
まとめ:アフィンガー5の吹き出しでオリジナリティを出そう!
本記事の内容を簡単にまとめます。
吹き出しの設定
- AFFINGER5管理→会話・ファビコン等で簡単に設定
- アイコンを動かす、大きく見せるといったことも可能
吹き出しのカスタマイズ
- 背景色
- アイコンの枠線を消す
- ふきだしを角丸にしない
- 枠線のみにする
アフィンガー5では、吹き出しの基本的な設定はデフォルトで搭載されています。
吹き出しを使うことで、マンガ感覚で、ポイントを分かりやすく記事を見やすく、親近感を持たせることも可能です。
アイコンについては、ココナラ等でプロに依頼しオリジナリティを演出しても良し。
吹き出しをうまく使いこなして、読み手にとって分かりやすい記事を書きましょう!
関連記事
アフィンガー5では、デザインのテンプレートが用意されています。
初心者にも優しいテーマですので、購入を検討されている方は以下の記事を参考にしてくださいね。