コメントのイメージ

アフィンガー5wing

アフィンガーの吹き出しの使い方徹底解説!画像の準備から吹き出しの色の変え方も図解で説明

Sponsored Link

ひよりん
こんにちは!ひよりんです。

この記事ではアフィンガー5でこの会話吹き出しの画像の作り方や設定方法、使用方法を解説していきます。

会話吹き出しの画像はどこから持ってくるの?

会話吹き出しを使ってみたいけどどうやるの?

右側設定ができない

吹き出しのカラーの変更はどこで設定するの?

等々アフィンガー5を使い始めたばかりのあなたには悩みが多いですよね?

しかもブログでよく見かけるこの会話吹き出しを使いこなしてみたい!

会話吹き出しへの憧れがあった私はブログを始めてすぐにこの設定をしました。

実際使おうとしたら・・・右側設定をする時に何度も失敗してしまうありさま。

右側設定ってこれの事
ひよりん

右側設定を解決するだけで軽く1時間はかかってしまいました。

単純にちょっとした設定のミスがあったためこうなったのでした・・・。

初心者にとってはちょっとしたミスでもつまづきやすいのです。

これから設定するあなたの為に私の失敗談も含めて初心者でもわかりやすく解説していきます。

ひよりん
初心者でも簡単に使えるの?
アフィンガー5ならとっても簡単!では順番に見ていきましょう!
はかせ

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

夕焼けとネット社会のイメージ

アフィンガーで吹き出しを設定する時の手順を順番に解説していきます。

この順番通りやれば設定から使用するところまで全て完了します!

では見ていきましょう!

画像準備&サイズ変更

まずは会話風アイコンの画像を作成します。

アイコン画像ってどこから持ってきたらいいの?

ひよりん
私はこんなのや
こんなのを使っています。
はかせ

初めは何もかもわからないので戸惑うことも。

でも大丈夫!

私は新しい仲間を迎えることにしました。

一緒に画像選びからやっていきましょう!

今回は無料でダウンロードできるサイトから画像を選びます。

アイコン画像作成手順

1. 好きな画像を選ぶ

2. 画像を加工する(サイズ調整等)

 

今回はイラスト画像を無料でダウンロードできるサイトのいらすとやから画像を選びます。

●【いらすとや】のサイトに入ります。

【いらすとや】のサイトはコチラ

 

●好きな画像を選びます

いらすとやサイト

いやすとやから画像引用

●今回は「人気のイラスト」の中にある「いろいろな顔アイコン」の中から選びました。

いらすとや画像

いらすとやから画像引用

●「動物」の中のペンギンを選びます。

いらすとや画像動物

いらすとやから画像引用

●ペンギンをクリックするとこんな画面になります。

いらすとやペンギン画像

いらすとやから画像引用

●上記の画面上で右クリックして「名前をつけて保存」をクリックします。

→するとダウンロードされて保存されます。

保存された画像をクリックすると下記のような画面になります。

アイコン画像ダウンロード後

 

これで画像を選ぶ工程は終了です。

サイズ変更

画像のダウンロードが終わったのでこのまますぐに設定して使いたい所なんですが・・・。

画像サイズが大きいので画像のサイズを加工していきます。

アフィンガー5の会話風アイコンの画像推奨サイズは100px以上の正方形となっています。

私の場合は150pxの正方形で設定しています。

お使いの画像加工ソフトで画像のサイズ修正をしていきます。

私が使っているのは無料で使える「PhotoScapeX」です。

下記のようにサイズを150に修正して保存します。

アイコン画像サイズ修正済み

これでサイズ修正まで完了しまた!

やっとここまで来ましたね!

画像設定

いよいよアフィンガー5に先ほどの画像を設定していきます。

まず、ワードプレスのダッシュボードに入ります。

●サイドメニューの中の「AFFINGER5管理」→「AFFINGER管理」→「会話・ファビコン等」をクリックします。

会話風アイコン設定方法1

 

●アイコン画像の「アイコン名」に名前を入力する。今回はペンギンさんにしました。

●「アップロード」をクリックします。

会話風アイコン設定方法2

 

●①「ファイルをアップロード」をクリックします。

●②「ファイルを選択」をクリックします。

先ほど保存した画像を選択します。

会話風アイコン設定方法3

 

●①「代替えテキスト」と「タイトル」の所に画像の説明を入力します。

●②「投稿に挿入」をクリックします。

会話風アイコン設定方法4

 

●この状態では設定はまだ終わっていませんので必ず下の「保存」をクリックしてください。

会話風アイコン設定方法5

 

●しっかり画像が反映されました。

これで画像の設定は完了です!

会話風アイコン設定方法6

 

右側&左側設定

デスクワークチェック

画像選択から画像の設定まで完了しました。

いよいよ実際に使う時がやってきました!

ワクワクしますね。

アフィンガー5では設定によって右側設定にしたり、画像が動いたり大きくなったり色んな機能がついています。

そのうちのまず右側&左側設定のやり方について解説します。

左側設定

左側設定は一番基本的な使い方です。

記事投稿画面のビジュアル画面上で設定していきます。

● アイコンを設定したい会話をドラッグします。

● 「タグ」→「会話ふき出し」→「会話(自分が使いたいアイコン)」をクリックします。

会話風アイコン左側設定方法

 

● するとドラッグした文の両端に下記のような文字列が現れます。

これで左側の会話吹き出し設定は完了です。

とっても簡単ですね!

会話風吹き出し左側設定2

ペンギンさん
左側設定は簡単だよ

一番簡単でよく使う方法なのですぐ使えそうですね!

右側設定

私が一番苦労した設定です。

でもとっても簡単なんです。

初めの設定は左側設定と同じ手順です。

● アイコンを設定したい会話をドラッグします。

● 「タグ」→「会話ふき出し」→「会話(自分が使いたいアイコン)」をクリックします。

会話風吹き出し右側設定

ドラッグした両端に文字列が現れるところまでは同じです。

このままにすると左側設定のままなので、ここからひと手間必要です。

ポイント

現れた前側の文字列の最後に半角スペースを空けてからrと入力します。

半角スペースも忘れずに空けましょう。これができていないとちゃんと設定できません。

会話風吹き出し右側設定3

 

右側設定も簡単だよ! 半角スペースrを入力するだけ。
ペンギンさん

実はとっても簡単だったのに私はこの文章の右側の文字列の部分にも半角スペースを空けてからrを入力していました。

両方とも入力するものだと思い両方に入れていたのでおかしな事になってしまったのでした。

PC初心者でブログも初心者だとこんな所でつまづいたりするんですね!

吹き出し色変更

アフィンガーは吹き出しの背景色も簡単に変更することができるんです!

また、吹き出しに枠を付けたり角をとったりと色んな機能が満載です。

初心者でも簡単にすぐに変更できて私は嬉しかったんです。

色の変更方法について解説していきますね!

吹き出し色の設定や枠を付けたり取ったりの設定は全て同じ画面で行います。

まず、「外観」→「カスタマイズ」→「オプションカラー」→「会話風ふきだし」に入ります。

画像でも解説していきます。

会話風ふきだしカラー設定

会話風ふきだしカラー設定2

 

会話風ふきだしカラー設定3

会話風ふきだしカラー設定5

 

1. 背景色の設定

では実際に設定していきます。

さっき新しく設定した吹き出しアイコン画像(会話3)の背景色を変更します。

●会話3の背景色の①「色を選択」②ドラッグしながらカラーを調節③「公開」ボタンをクリックする

会話風吹き出し設定

すると・・・。

しっかり変更されていますね。

会話風アイコンカラー変更

背景色の設定はとっても簡単ですね!

色んな色で試してみてください。

その他の機能も見ていきましょう!

同じ画面の下の方にスクロールしていくと・・・。

下記のような画面がでてきます。

設定したらどうなるか一つづつ解説していきますね。

会話風吹き出し設定

 

アイコンの枠線を消す

会話風アイコンの画像の周りの線を消します。

どうなるかやってみましょう。

①「アイコンの枠線を消す」にチェック→②「公開」ボタンをクリックする

アイコン枠線消す方法

じゃじゃーん!

少し分かりにくいけどペンギンさんの周りの丸い枠が消えたよ。

アイコン枠線消す比較

 

吹き出しを角丸にしない

次に吹き出しの背景の角を丸くしないとどうなるか・・・。

①「ふきだしを角丸にしない」にチェック→②「公開」をクリック

吹き出し角丸にしない

 

角ばりました!

角を丸くしない

 

ボーダーデザインタイプ(枠線のみ)に変更

枠線のみに設定する項目は2種類あります。

太さが違いますがどれぐらい違うのか見ていきましょう!

普通(2px)」か「太目(3px)」にチェックを入れて②「公開」をクリックします。

枠線のみに設定

どうですか?

あんまり違いがわからないですが・・・。

実際に試してみてください。

枠線太さの違い

 

ボーダータイプの背景色の設定

この枠線のみの設定の場合も「背景の色」が変更できます。

やってみましょう。

①「色を選択」をクリックして色を選びます。

ドラッグしながら濃淡を調節します。

③「公開」をクリックします。

枠線のみの背景色変更

こうなりました!

吹き出し設定機能説明

アフィンガーの会話吹き出しの色の設定や形の設定等本当にワクワクします!

画像を大きくする

アフィンガーには画像アイコンのサイズを少し大きく設定する機能が付いています。

設定方法はとっても簡単です。

●「AFFINGER5管理」→「AFFINGER管理」→「会話・ファビコン等」をクリックします。

会話風アイコンの一番下までスクロールすると設定画面が出てきます。

● 「会話風アイコンを少し大きくする」にチェックを入れ、「保存」をクリックします。

これで設定は完了です。

とっても簡単ですね。

会話風アイコン大きくする設定

 

大きさが変わります。

大きさの比較

画像アイコンを揺らす

画像アイコンを揺らす機能も付いているのでこちらもお好みで設定してみてください。

設定方法は、さっきと同じく、「AFFINGER5管理」→「AFFINGER管理」→「会話・ファビコン等」をクリックします。

会話風アイコンの一番下までスクロールすると設定画面が出てきます。

● 「会話風アイコンを少し動かす」にチェックを入れ、「保存」をクリックします。

会話風アイコンを動かす設定

こちらは例として画像を載せる事ができませんでしたが画像が「ほわ」っと少し動きます。

色々試してお好みで設定してみてください。

まとめ

まとめのイメージ

せっかくアフィンガー5を購入したので色んな機能を試してみたいですよね?

初心者でも簡単にこんな素敵な吹き出し設定ができるなんて嬉しい限りですね。

私はこの会話風吹き出しに憧れていたので真っ先に設定しました。

右側設定に苦労しましたが(笑)

ブログを書いていく上でとっても便利な機能なので最初から設定して使っていきたい機能の一つだと思います。

今回の画像は無料のサイトからダウンロードして使用しましたが、無料なので他の人と被る可能性が!

もしオリジナルがいい!という方は有料で作成依頼してもいいと思います!

有料でアイコン作成依頼ができる【coconala】というサイトが有名です。

【coconala】のサイトはコチラ

参考にしてみてください。

いろんな機能満載のアフィンガー5ですが他にはどんな機能があるんでしょうか?

もっと色んな機能に出会えると思うとワクワクします。

これからも前進あるのみ!

また見に来てください。

最後まで読んでくださりありがとうございました。

Sponsored Link

Sponsored Link

-アフィンガー5wing

© 2021 ブログ日和