この記事ではアフィンガー5でこの会話吹き出しの画像の作り方や設定方法、使用方法を解説していきます。
「会話吹き出しの画像はどこから持ってくるの？」
「会話吹き出しを使ってみたいけどどうやるの？」
「右側設定ができない」
「吹き出しのカラーの変更はどこで設定するの？」
等々アフィンガー5を使い始めたばかりのあなたには悩みが多いですよね？
しかもブログでよく見かけるこの会話吹き出しを使いこなしてみたい！
会話吹き出しへの憧れがあった私はブログを始めてすぐにこの設定をしました。
実際使おうとしたら・・・右側設定をする時に何度も失敗してしまうありさま。
右側設定を解決するだけで軽く1時間はかかってしまいました。
単純にちょっとした設定のミスがあったためこうなったのでした・・・。
初心者にとってはちょっとしたミスでもつまづきやすいのです。
これから設定するあなたの為に私の失敗談も含めて初心者でもわかりやすく解説していきます。
目次
アフィンガーの吹き出しの使い方
アフィンガーで吹き出しを設定する時の手順を順番に解説していきます。
この順番通りやれば設定から使用するところまで全て完了します！
では見ていきましょう！
画像準備&サイズ変更
まずは会話風アイコンの画像を作成します。
「アイコン画像ってどこから持ってきたらいいの？」
初めは何もかもわからないので戸惑うことも。
でも大丈夫！
私は新しい仲間を迎えることにしました。
一緒に画像選びからやっていきましょう！
今回は無料でダウンロードできるサイトから画像を選びます。
アイコン画像作成手順
1. 好きな画像を選ぶ
2. 画像を加工する(サイズ調整等)
今回はイラスト画像を無料でダウンロードできるサイトのいらすとやから画像を選びます。
●【いらすとや】のサイトに入ります。
●好きな画像を選びます
いやすとやから画像引用
●今回は「人気のイラスト」の中にある「いろいろな顔アイコン」の中から選びました。
いらすとやから画像引用
●「動物」の中のペンギンを選びます。
いらすとやから画像引用
●ペンギンをクリックするとこんな画面になります。
いらすとやから画像引用
●上記の画面上で右クリックして「名前をつけて保存」をクリックします。
→するとダウンロードされて保存されます。
保存された画像をクリックすると下記のような画面になります。
これで画像を選ぶ工程は終了です。
サイズ変更
画像のダウンロードが終わったのでこのまますぐに設定して使いたい所なんですが・・・。
画像サイズが大きいので画像のサイズを加工していきます。
アフィンガー5の会話風アイコンの画像推奨サイズは100px以上の正方形となっています。
私の場合は150pxの正方形で設定しています。
お使いの画像加工ソフトで画像のサイズ修正をしていきます。
私が使っているのは無料で使える「PhotoScapeX」です。
下記のようにサイズを150に修正して保存します。
これでサイズ修正まで完了しまた！
やっとここまで来ましたね！
画像設定
いよいよアフィンガー5に先ほどの画像を設定していきます。
まず、ワードプレスのダッシュボードに入ります。
●サイドメニューの中の「AFFINGER5管理」→「AFFINGER管理」→「会話・ファビコン等」をクリックします。
●アイコン画像の「アイコン名」に名前を入力する。今回はペンギンさんにしました。
●「アップロード」をクリックします。
●①「ファイルをアップロード」をクリックします。
●②「ファイルを選択」をクリックします。
先ほど保存した画像を選択します。
●①「代替えテキスト」と「タイトル」の所に画像の説明を入力します。
●②「投稿に挿入」をクリックします。
●この状態では設定はまだ終わっていませんので必ず下の「保存」をクリックしてください。
●しっかり画像が反映されました。
これで画像の設定は完了です！
右側&左側設定
画像選択から画像の設定まで完了しました。
いよいよ実際に使う時がやってきました！
ワクワクしますね。
アフィンガー5では設定によって右側設定にしたり、画像が動いたり大きくなったり色んな機能がついています。
そのうちのまず右側&左側設定のやり方について解説します。
左側設定
左側設定は一番基本的な使い方です。
記事投稿画面のビジュアル画面上で設定していきます。
● アイコンを設定したい会話をドラッグします。
● 「タグ」→「会話ふき出し」→「会話（自分が使いたいアイコン）」をクリックします。
● するとドラッグした文の両端に下記のような文字列が現れます。
これで左側の会話吹き出し設定は完了です。
とっても簡単ですね！
一番簡単でよく使う方法なのですぐ使えそうですね！
右側設定
私が一番苦労した設定です。
でもとっても簡単なんです。
初めの設定は左側設定と同じ手順です。
● アイコンを設定したい会話をドラッグします。
● 「タグ」→「会話ふき出し」→「会話（自分が使いたいアイコン）」をクリックします。
ドラッグした両端に文字列が現れるところまでは同じです。
このままにすると左側設定のままなので、ここからひと手間必要です。
ポイント
現れた前側の文字列の最後に半角スペースを空けてからrと入力します。
半角スペースも忘れずに空けましょう。これができていないとちゃんと設定できません。
実はとっても簡単だったのに私はこの文章の右側の文字列の部分にも半角スペースを空けてからrを入力していました。
両方とも入力するものだと思い両方に入れていたのでおかしな事になってしまったのでした。
PC初心者でブログも初心者だとこんな所でつまづいたりするんですね！
吹き出し色変更
アフィンガーは吹き出しの背景色も簡単に変更することができるんです！
また、吹き出しに枠を付けたり角をとったりと色んな機能が満載です。
初心者でも簡単にすぐに変更できて私は嬉しかったんです。
色の変更方法について解説していきますね！
吹き出し色の設定や枠を付けたり取ったりの設定は全て同じ画面で行います。
まず、「外観」→「カスタマイズ」→「オプションカラー」→「会話風ふきだし」に入ります。
画像でも解説していきます。
↓
↓
↓
1. 背景色の設定
では実際に設定していきます。
さっき新しく設定した吹き出しアイコン画像（会話3）の背景色を変更します。
●会話3の背景色の①「色を選択」→②ドラッグしながらカラーを調節→③「公開」ボタンをクリックする
すると・・・。
しっかり変更されていますね。
背景色の設定はとっても簡単ですね！
色んな色で試してみてください。
その他の機能も見ていきましょう！
同じ画面の下の方にスクロールしていくと・・・。
下記のような画面がでてきます。
設定したらどうなるか一つづつ解説していきますね。
アイコンの枠線を消す
会話風アイコンの画像の周りの線を消します。
どうなるかやってみましょう。
①「アイコンの枠線を消す」にチェック→②「公開」ボタンをクリックする
じゃじゃーん！
少し分かりにくいけどペンギンさんの周りの丸い枠が消えたよ。
吹き出しを角丸にしない
次に吹き出しの背景の角を丸くしないとどうなるか・・・。
①「ふきだしを角丸にしない」にチェック→②「公開」をクリック
角ばりました！
ボーダーデザインタイプ（枠線のみ）に変更
枠線のみに設定する項目は2種類あります。
太さが違いますがどれぐらい違うのか見ていきましょう！
「普通（2px）」か「太目(3px)」にチェックを入れて②「公開」をクリックします。
どうですか？
あんまり違いがわからないですが・・・。
実際に試してみてください。
ボーダータイプの背景色の設定
この枠線のみの設定の場合も「背景の色」が変更できます。
やってみましょう。
①「色を選択」をクリックして色を選びます。
②ドラッグしながら濃淡を調節します。
③「公開」をクリックします。
こうなりました！
アフィンガーの会話吹き出しの色の設定や形の設定等本当にワクワクします！
画像を大きくする
アフィンガーには画像アイコンのサイズを少し大きく設定する機能が付いています。
設定方法はとっても簡単です。
●「AFFINGER5管理」→「AFFINGER管理」→「会話・ファビコン等」をクリックします。
会話風アイコンの一番下までスクロールすると設定画面が出てきます。
● 「会話風アイコンを少し大きくする」にチェックを入れ、「保存」をクリックします。
これで設定は完了です。
とっても簡単ですね。
大きさが変わります。
画像アイコンを揺らす
画像アイコンを揺らす機能も付いているのでこちらもお好みで設定してみてください。
設定方法は、さっきと同じく、「AFFINGER5管理」→「AFFINGER管理」→「会話・ファビコン等」をクリックします。
会話風アイコンの一番下までスクロールすると設定画面が出てきます。
● 「会話風アイコンを少し動かす」にチェックを入れ、「保存」をクリックします。
こちらは例として画像を載せる事ができませんでしたが画像が「ほわ」っと少し動きます。
色々試してお好みで設定してみてください。
まとめ
せっかくアフィンガー5を購入したので色んな機能を試してみたいですよね？
初心者でも簡単にこんな素敵な吹き出し設定ができるなんて嬉しい限りですね。
私はこの会話風吹き出しに憧れていたので真っ先に設定しました。
右側設定に苦労しましたが(笑)
ブログを書いていく上でとっても便利な機能なので最初から設定して使っていきたい機能の一つだと思います。
今回の画像は無料のサイトからダウンロードして使用しましたが、無料なので他の人と被る可能性が！
もしオリジナルがいい！という方は有料で作成依頼してもいいと思います！
有料でアイコン作成依頼ができる【coconala】というサイトが有名です。
参考にしてみてください。
いろんな機能満載のアフィンガー5ですが他にはどんな機能があるんでしょうか？
もっと色んな機能に出会えると思うとワクワクします。
これからも前進あるのみ！
また見に来てください。
最後まで読んでくださりありがとうございました。