AFFINGER5

AFFINGER5(アフィンガー)吹き出しの設定方法【使わないのはもったいない】

AFFINGER5(アフィンガー)吹き出しの設定方法【使わないのはもったいない】
ぎもんくん
AFFINGER5で会話してるように見せられる吹き出し機能の使い方を教えてほしい。吹き出し機能を使うメリットとかもあれば知りたいな。

 

 

今回は、こんな疑問に答えます。

本記事の内容

  • AFFINGER5(アフィンガー)吹き出し機能の使い方
  • 吹き出しに使用するイラストについて

こんにちは、ゆうきです。

 

今回は、AFFINGER5の吹き出し機能の設定方法から使い方までを詳しく解説していきます。

 

吹き出し機能とは以下のようなものです。

 

ぎもんくん
ゆうきくん、こんにちは!僕はぎもんくんです。
ぎもんくん、こんにちは!ぼくはゆうきです。
ゆうき

 

このように会話調にすることが可能。

 

本記事を読めば、AFFINGER5の吹き出し機能をフル活用して、ブログ記事を書いていくことができるようになりますよ。

 

本記事の信頼性

当ブログでもAFFINGER5を使用しており、全ての記事で吹き出し機能を使用中です。

 

補足

なお、AFFINGER5(アフィンガー)に興味はあるけどまだ導入していない!という人はぜひ下記記事を参考にしてみてください。

 

>>アフィンガー5はブログ初心者におすすめです【理由は3つ】

 

AFFINGER5(アフィンガー)吹き出しの使い方

 

それでは、吹き出し機能の使い方を解説します。

 

解説とは言っても下記の2ステップで5分もあれば使えるようになるので安心してください。

吹き出し機能の使い方

  1. AFFINGER5管理画面の設定
  2. 編集画面で吹き出しを出す

 

AFFINGER5管理画面の設定

 

まずは、吹き出しで使用するアイコンをAFFINGER5の管理画面で設定します。

 

「AFFINGER5管理」→「会話、ファビコン等」を選択。

 

AFFINGER5管理画面の設定

 

上図のような画面になるので、赤枠部分のあなたが設定したい画像の「名前」と「URL」を入力しましょう。

 

注意ポイント

画像のサイズは100ピクセル以上の正方形が推奨されています。プレビュー画面で表示を確認しつつ、見栄えを調整するようにしましょう。

 

なお、吹き出しに使用できるアイコンは8つまでです。僕の場合は現状5つ設定して使用しています。

 

最大8つも設定できるので、色々な思いや感情を表現できると思います。

 

全ての設定が完了したら、最後に「保存」をクリックして完了です。

 

編集画面で吹き出しを出す

 

つづいて、WordPressの投稿画面で実際に吹き出しを出していきましょう。

 

出し方は投稿画面上部の編集ボタンから「タグ」→「会話吹き出し」→「会話1~8」を選択。

 

AFFINGER5編集画面での吹き出しの出し方

 

あなたが表示させたい会話を選べば表示されます。

 

例えば僕の場合、下図のように会話1と会話2を表示してみます。

 

AFFINGER5会話吹き出しの例

会話2については、デフォルトで画面左側に表示されます。しかし、会話1のように画面右側(反対側)に表示する場合はコードを変更する必要があります。

 

コードの変更は下図のとおり。

 

AFFINGER5吹き出しを反対にする方法

コードはデフォルトで「st-kaiwa1」となっているので、赤枠のようにst-kaiwa1 r」に変更しましょう。

 

rを付け足せばアイコンを反対側に表示させることができるわけです。

 

また、吹き出しの色を変更したい場合は、「外観」→「カスタマイズ」→「オプションカラー」を選択。

 

AFFINGER5吹き出しの色変更画面

 

続いて「会話風吹き出し」をクリックしましょう。

 

 

下図のように色を変えながらプレビュー画面を見て、お好みの色を吹き出しに設定しましょう。

 

AFFINGER5吹き出しの色を変更する①

 

AFFINGER5吹き出しの色を変更する②

 

基本的な吹き出し機能の使い方は以上です。

 

AFFINGER5(アフィンガー)吹き出しのイラストはどうする?

 

なやみちゃん
吹き出しの具体的な使い方は分かったけど、そもそも吹き出しに使えるイラストってどうすればいいの?

 

こんな疑問もあるかと思うので、僕がおすすめする素材サイトをご紹介します。

 

結論、下記の3サイトです。

素材サイト3選

いずれも素敵なデザインで、無料利用できるので重宝しています。

 

FLAT ICON DESIGH

FLAT ICON DESIGHさんのTOPページ

 

こちらは図のようにシンプルながらもどこから洗練された印象のデザインが特徴的な素材サイト。

 

無料でダウンロードでき、商用利用も可能なため多くのブログで使われていますね。

 

いらすとや

いらすとや

 

いらすとやは、公共施設でもよく使われている超メジャーな素材サイトの1つです。

 

余談ですが、僕の通うジムにもいらすとやの画像が使用されていました(笑)

 

とても可愛らしい雰囲気の画像がたくさんあります。

 

icons8

icons8のTOPページ

 

約14万点以上の素材をストックしているicons8。

 

非常に数が多いため、あなた好みのアイコン画像がきっと見つかると思います。

 

icons8は項目ごとに分かれていて便利

 

上図のように、項目ごとに分けてあるのも嬉しいですね。

 

アイコン画像に独自性を出したい場合

 

なやみちゃん
アイコン画像をできれば他のサイトと被らないようなオリジナリティのあるものにできたらいいんだけどな~

 

あなたがこのように考えるのであれば、ココナラの利用を検討してみるのはアリ。

 

僕も実際に当ブログとTwitterのアイコン画像、ヘッダー画像をココナラで依頼して作ってもらいました。

 

ココナラ自体は無料で登録できます。登録後にココナラで「ブログ アイコン画像」と検索し、あなた好みの画像を作ってくれそうなデザイナーに依頼すればOKです。

 

僕の場合は依頼から2~3日後に納品してもらい、「こんなに早いんだ~」と感心してしまいました。

 

なやみちゃん
それはいいわね!私あんまりデザイン自信ないから頼んでみるのもアリなのかも。
頼むのは賢い戦略だと思います。ただ納品日についてはデザイナーによってまちまちなのであくまで参考までに!
ゆうき

 

僕はアイコン画像は依頼しましたが、ブログのアイキャッチ画像は自作してなるべく人と被らないように工夫しています。

 

とはいえ、中々記事をかくのに手いっぱいでデザインまでできない!という人が多いと思います。

 

自分にできない部分は外注するというのも1つの立派な戦略なので、ぜひココナラ含めて検討してみましょう。

 

まとめ:AFFINGER5(アフィンガー)の吹き出しを使い倒そう

まとめ:AFFINGER5(アフィンガー)の吹き出しを使い倒そう

 

AFFINGER5の吹き出し機能は、読者にとっても視覚的に分かりやすいです。

 

検索エンジンもユーザビリティの高いサイトを評価する傾向にあるため、吹き出し機能を上手く活用していきたいですね。

 

今回はこのあたりにしようとおもいます。

このサイトについて

ここには、自己紹介やサイトの紹介、あるいはクレジットの類を書くと良いでしょう。

検索

-AFFINGER5

© 2021 yukiblog