AFFINGER

【AFFINGER5会話ふきだし】使い方とぼやけず鮮明な画像を設定する方法

AFFINGER5画像

AFFINGER5の「会話ふきだし画像」をぼやけず鮮明に表示する方法の紹介です。

画像の準備~設定方法まで詳しく解説していきます。

 

こんな人のお役に立てる記事です。

小豆
AFFINGER5の会話ふきだし画像が、ちょっとぼやけてしまう。
もっと鮮明に表示する方法ってないの?

AFFINGER5【会話ふきだし画像がぼやける】は画像サイズが問題

まずは、こちらの画像を見て下さい。

ボケた画像の会話ふきだし

画像はぼやけて鮮明ではなく、なによりもちょっとズレているために見栄えもよくありませんよね。

これでは、せっかくの「会話ふきだし」機能も残念な感じです。

で、今回紹介する方法で設定し直したものがこちら。

鮮明な画像の会話ふきだし

画像も鮮明、変なズレもなくきれいに会話ふきだしを表示することができました。

 

画像がぼやけるのは「画像サイズ」が原因

先ほどのように会話ふきだしの画像がぼやけてしまうのは、用意した画像のサイズが原因です。

異なる画像サイズごとの表示のされ方がこちらです。

画像サイズ 表示のされ方
30px × 30xp 30px画像
50px × 50px 50px画像
100px × 100px 100px画像
200px × 200px 200px画像
300px × 300px 300px画像

表からもわかる通り、「100px × 100px」以上の画像を用意すれば鮮明に表示することができそうですね。

このブログ内では【200px × 200px】の画像を会話ふきだしに使用しています。

小豆
でも、画像のサイズの変更ってどうやればいいの?
会話ふきだしに使用する画像の準備方法を解説していくね。
大福

準備編【ふきだし画像の準備~AFFINGER5への登録】

まずは、会話ふきだしに使用する画像の準備の方法から解説していきます。

ふきだし画像の準備

手順

  1. ふきだしに使用する画像を入手
  2. トリミング
  3. サイズの変更
  4. 保存

 

step
1
ふきだしに使用する画像を入手

ふきだし用アイコン

まず最初に行うのは、会話ふきだしに使う画像の入手から。

画像はなんでもいいですが、以下の画像サイトを使用すると便利です。

  • イラストAC:高品質な画像が無料でダウンロード可能
  • シルエットAC:ふきだしで使いやすい人物シルエットが豊富
  • ココナラ:自分だけのオリジナル画像の作成が可能

 

ココナラの利用は有料(1,000円程度~)ですが、自分だけのオリジナル画像の作成が可能です。
「他人と被る画像は使いたくない」と言う人におすすめです。

 

step
2
トリミング

続いて、画像編集ソフトを使用して画像のトリミングを行っていきます。

画像編集ソフトは何を利用しても大丈夫ですが、ここではWindows標準ソフトの【ペイント】を例に解説していきます。

ペイントで画像を開く

ファイル → 開く → 画像を選択

トリミング

  1. 選択をクリック
  2. 会話ふきだしに使用したい部分を囲む
  3. トリミングキーで不要な部分を削除

このトリミング作業を行うことで、ふきだしにしたときに画像がピッタリと収まるようになります。

 

step
3
サイズの変更

サイズの変更

  1. サイズ変更をクリック
  2. ピクセルを選択し、任意のサイズに

縦横比を維持するにチェックをしておくと、変に画像が縦長になってしまったりするのを防ぐことができます。
この場合、入力するのは「水平方向」のみ。
「垂直方向」には自動的に数字が入力されます。

小豆
水平方向に数字を入れてみたけど、ぴったり正方形にならない・・。
ぴったり正方形にならなくても大丈夫だよ。
大福

 

step
4
保存

名前を付けて保存

ファイル → 名前を付けて保存 → ファイル形式を選択

イラスト画像の場合は「PNG画像」での保存がおすすめです。
写真の場合は「JPEG画像」を選択します。

 

大福
これで画像の準備は完了!
続いて、この画像をAFFINGER5に登録していくよ。

 

AFFINGER5への登録

手順

  1. 画像のアップロード
  2. 名前を入力して保存

 

step
1
画像のアップロード

AFFINGERへ画像の登録

WordPressメニュー → AFFINGER5管理 → 会話・ファビコン等 → アップロード

ファイルをドロップ

ファイルをアップロード → 画面内に画像をドロップ

ファイルを選択から登録することも可能です。

画像の設定

  1. 代替テキスト・タイトルを入力
  2. フルサイズを選択
  3. 投稿に挿入をクリック

代替テキストとタイトルは、同じものを入力すれば大丈夫です。

 

step
2
名前を入力して保存

名前を入力して保存

  1. 画像の名前を入力
  2. 保存

ここで入力したテキストは、会話ふきだし下に表示されます。

画像だけを表示したい場合は、空欄のままにします。

テキストを入力 名前あり
テキストの入力なし(空欄) 名前なし

実践編【会話ふきだしの使い方】

続いて、会話ふきだしを使う実際の手順を解説してきます。

手順

  1. テキストを入力後、会話ふきだし装飾
  2. ふきだしを反転

 

step
1
テキストを入力後、会話ふきだし装飾

会話ふきだし装飾

テキストを入力 → テキストを選択した状態でタグ → 会話ふきだし

 

step
2
ふきだしを反転

ふきだしを反転させるには、ショートコード内に【半角スペース+r】を入力

  表示のされ方 ショートコード
通常 通常表示 [st-kaiwa1]サンプルテキスト[/st-kaiwa1]
反転 ふきだしを反転 [st-kaiwa1 r]サンプルテキスト[/st-kaiwa1]

 

会話ふきだしのデザイン変更

会話ふきだしは、以下のように自分好みにカスタマイズすることもできます。

  パターンA パターンB
デフォルト デフォルトのデザイン1 デフォルトのデザイン2
ボーダー ボーダー1 ボーダー2
角丸なし 角丸なし1 角丸なし2
アイコン枠なし アイコン枠なし アイコン枠無し2
アイコンを少し大きく アイコンを大きく1 アイコンを大きく2
アニメーション アニメーション1 アニメーション3

 

詳しいカスタマイズ方法は、こちらの記事内で解説しています。

AFFINGERサンプル
AFFINGER5【会話ふきだしのデザイン一覧とカスタマイズ】

続きを見る

 

まとめ:ブログには見やすい鮮明な画像を使おう

今回紹介した「会話ふきだし画像」含め、ブログには鮮明な画像の使用がおすすめです。

画像のぼやけているブログは、それだけで読者の「見る気」を損ないかねないですからね。

ただし、「鮮明であればどんな画像でもいい」というわけではないのが難しいところ。

このへんのことに関しては、以下の記事内で詳しく解説しています。

ブログにおすすめの画像サイズ
ブログに載せる画像のおすすめサイズと容量【GIMPで変更】

続きを見る

 

当ブログAFFINGER5オリジナル特典

AFFINGER5限定特典
【AFFINGER5購入特典】当ブログ限定オリジナル特典を7つ紹介

続きを見る

こちらの記事もよく読まれています

  • この記事を書いた人

大福

人間関係に嫌気がさして10年間務めた会社を退職。その後3年間のニート生活を送る。自宅にいながらパソコン1台で稼げることを知り、現在はストレスフリーな毎日を送っています。このサイトではブログやアフィリエイトで稼ぐ方法を発信しています。自宅にいながら稼げるって素晴らしい♪

-AFFINGER

© 2021 大福日記