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

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

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

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

小豆

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

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

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

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

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

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

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

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

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

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

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

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

小豆

でも、画像のサイズの変更ってどうやればいいの？

会話ふきだしに使用する画像の準備方法を解説していくね。

大福

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

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

ふきだし画像の準備

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

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

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

step
2トリミング

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

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

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

step
3サイズの変更

小豆

水平方向に数字を入れてみたけど、ぴったり正方形にならない・・。

ぴったり正方形にならなくても大丈夫だよ。

大福

step
4保存

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

大福

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

AFFINGER5への登録

step
1画像のアップロード

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

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

step
2名前を入力して保存

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

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

テキストを入力
テキストの入力なし（空欄）

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

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

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

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

step
2ふきだしを反転

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

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

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

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

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

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

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

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

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

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

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

AFFINGER利用者向けオリジナル特典の販売

＼ AFFINGER6にも対応済み ／

AFFINGERをすでに利用しているユーザー向けの「カスタマイズ＆役立つテクニック」集です。

目的に合わせて、以下の2つを用意しました。

特典詳細ページへ移動する