AFFINGER5の「会話ふきだし画像」をぼやけず鮮明に表示する方法の紹介です。
画像の準備～設定方法まで詳しく解説していきます。
こんな人のお役に立てる記事です。
もっと鮮明に表示する方法ってないの？
AFFINGER5【会話ふきだし画像がぼやける】は画像サイズが問題
まずは、こちらの画像を見て下さい。
画像はぼやけて鮮明ではなく、なによりもちょっとズレているために見栄えもよくありませんよね。
これでは、せっかくの「会話ふきだし」機能も残念な感じです。
で、今回紹介する方法で設定し直したものがこちら。
画像も鮮明、変なズレもなくきれいに会話ふきだしを表示することができました。
画像がぼやけるのは「画像サイズ」が原因
先ほどのように会話ふきだしの画像がぼやけてしまうのは、用意した画像のサイズが原因です。
異なる画像サイズごとの表示のされ方がこちらです。
| 画像サイズ | 表示のされ方 |
| 30px × 30xp |  |
| 50px × 50px |  |
| 100px × 100px |  |
| 200px × 200px |  |
| 300px × 300px |  |
表からもわかる通り、「100px × 100px」以上の画像を用意すれば鮮明に表示することができそうですね。
このブログ内では【200px × 200px】の画像を会話ふきだしに使用しています。
準備編【ふきだし画像の準備～AFFINGER5への登録】
まずは、会話ふきだしに使用する画像の準備の方法から解説していきます。
ふきだし画像の準備
手順
- ふきだしに使用する画像を入手
- トリミング
- サイズの変更
- 保存
step
1ふきだしに使用する画像を入手
まず最初に行うのは、会話ふきだしに使う画像の入手から。
画像はなんでもいいですが、以下の画像サイトを使用すると便利です。
ココナラの利用は有料（1,000円程度～）ですが、自分だけのオリジナル画像の作成が可能です。
「他人と被る画像は使いたくない」と言う人におすすめです。
step
2トリミング
続いて、画像編集ソフトを使用して画像のトリミングを行っていきます。
画像編集ソフトは何を利用しても大丈夫ですが、ここではWindows標準ソフトの【ペイント】を例に解説していきます。
ファイル → 開く → 画像を選択
- 選択をクリック
- 会話ふきだしに使用したい部分を囲む
- トリミングキーで不要な部分を削除
このトリミング作業を行うことで、ふきだしにしたときに画像がピッタリと収まるようになります。
step
3サイズの変更
- サイズ変更をクリック
- ピクセルを選択し、任意のサイズに
縦横比を維持するにチェックをしておくと、変に画像が縦長になってしまったりするのを防ぐことができます。
この場合、入力するのは「水平方向」のみ。
「垂直方向」には自動的に数字が入力されます。
step
4保存
ファイル → 名前を付けて保存 → ファイル形式を選択
イラスト画像の場合は「PNG画像」での保存がおすすめです。
写真の場合は「JPEG画像」を選択します。
続いて、この画像をAFFINGER5に登録していくよ。
AFFINGER5への登録
手順
- 画像のアップロード
- 名前を入力して保存
step
1画像のアップロード
WordPressメニュー → AFFINGER5管理 → 会話・ファビコン等 → アップロード
ファイルをアップロード → 画面内に画像をドロップ
ファイルを選択から登録することも可能です。
- 代替テキスト・タイトルを入力
- フルサイズを選択
- 投稿に挿入をクリック
代替テキストとタイトルは、同じものを入力すれば大丈夫です。
step
2名前を入力して保存
- 画像の名前を入力
- 保存
ここで入力したテキストは、会話ふきだし下に表示されます。
画像だけを表示したい場合は、空欄のままにします。
| テキストを入力 |  |
| テキストの入力なし（空欄） |  |
実践編【会話ふきだしの使い方】
続いて、会話ふきだしを使う実際の手順を解説してきます。
手順
- テキストを入力後、会話ふきだし装飾
- ふきだしを反転
step
1テキストを入力後、会話ふきだし装飾
テキストを入力 → テキストを選択した状態でタグ → 会話ふきだし
step
2ふきだしを反転
ふきだしを反転させるには、ショートコード内に【半角スペース+ｒ】を入力
| 表示のされ方 | ショートコード | |
| 通常 |  |
[st-kaiwa1]サンプルテキスト[/st-kaiwa1] |
| 反転 |  |
[st-kaiwa1 r]サンプルテキスト[/st-kaiwa1] |
会話ふきだしのデザイン変更
会話ふきだしは、以下のように自分好みにカスタマイズすることもできます。
| パターンA | パターンB | |
| デフォルト |  |
 |
| ボーダー |  |
 |
| 角丸なし |  |
 |
| アイコン枠なし |  |
 |
| アイコンを少し大きく |  |
 |
| アニメーション |  |
 |
詳しいカスタマイズ方法は、こちらの記事内で解説しています。
-
-
AFFINGER5【会話ふきだしのデザイン一覧とカスタマイズ】
続きを見る
まとめ：ブログには見やすい鮮明な画像を使おう
今回紹介した「会話ふきだし画像」含め、ブログには鮮明な画像の使用がおすすめです。
画像のぼやけているブログは、それだけで読者の「見る気」を損ないかねないですからね。
ただし、「鮮明であればどんな画像でもいい」というわけではないのが難しいところ。
このへんのことに関しては、以下の記事内で詳しく解説しています。
-
-
ブログに載せる画像のおすすめサイズと容量【GIMPで変更】
続きを見る
当ブログAFFINGER6オリジナル特典
-
-
【AFFINGER6購入特典】当ブログ限定オリジナル特典を13個紹介
続きを見る
AFFINGER利用者向けオリジナル特典の販売
＼ AFFINGER6にも対応済み ／
AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。
目的に合わせて、以下の2つを用意しました。
- AFFINGER5利用者向けカスタマイズ集 9選
- AFFINGER利用者向けカスタマイズ＆役立つテクニック 14選
2022年1月1日より期間限定で割引販売いたします。
・利用者向けカスタマイズ集 9選：2,980円 → 2,480円
・カスタマイズ＆役立つテクニック 14選 4,980円 → 3,980円
