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

AFFINGER5の【会話ふきだし】を自分好みのデザインにカスタマイズする方法の紹介です。

記事後半では、会話ふきだしと「組み合わせて使える記事装飾」についての紹介もしています。

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

小豆

AFFINGER5の会話ふきだし機能がすごく気に入っている。
でも、もっと自分好みのデザインに変更出来たら嬉しいなぁ。

AFFINGER5で使える会話ふきだしのデザイン一覧

AFFINGER5なら、ボタン一つで簡単に会話ふきだしを作ることができます。

デフォルトの状態の会話ふきだしのデザインがこちら。

これでも十分過ぎるくらい完成されたデザインなのですが、今回はここからさらにカスタマイズをしていきます。

というわけで、今回紹介するデザイン一覧がこちらです。

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

小豆

どれも魅力的で迷っちゃうなぁ。
でも、カスタマイズって簡単にできるの？

カスタマイズ方法はめちゃくちゃ簡単！
誰でも簡単に自分好みのデザインに変更できるよ。

大福

👉会話ふきだしの使い方がわからない人は、以下の記事を参考にしてください。

カスタマイズ方法【設定は2箇所から】

会話ふきだしをカスタマイズする方法は、2種類。

それぞれ、わかりやすく解説していきます。

① カスタマイズメニューからカスタマイズ

WordPressメニュー　→　外観　→　カスタマイズ　→　オプションカラー　→　会話風ふきだし

カスタマイズメニューからは、以下のカスタマイズが可能です。

	パターンA	パターンB
デフォルト
ボーダー
角丸なし
アイコン枠なし

デフォルトのデザイン【カラー変更】

色を選択をクリックで、ふきだしの背景色を変更

ボーダー

角まるなし

ふきだしを角丸にしないで、直角デザインのふきだしに

アイコン枠なし

アイコンの枠線を消すで、アイコン回りの枠線を削除

② AFFINGER5管理からカスタマイズ

WordPressメニュー　→　AFFINGER5管理　→　会話・ファビコン等

AFFINGER5管理からは、以下のカスタマイズが可能です。

	パターンA	パターンB
アイコンを少し大きく
アニメーション

設定を変更後は、忘れずに保存ボタンをクリックします。

会話ふきだしと組み合わせて使える記事装飾

会話ふきだしは、記事装飾と組み合わせて使うことも可能です。

組み合わせの例を3つ紹介します。

文字装飾

	パターンA	パターンB
文字サイズの変更
文字色の変更
マーカー

通常のテキスト同様、ふきだし内のテキストも文字の装飾が可能です。

リンクの挿入

大福

サンプルリンクを見てみる

ふきだし内のテキストを、リンクにすることもできます。

アニメーション

大福

サンプルテキスト

サンプルテキスト

小豆

ふきだし内のテキストにアニメーションを付与することもできます。

まとめ：記事内で大活躍する会話ふきだし

会話ふきだしの最大のメリットは、記事内でめちゃくちゃ目立つことですね。

流し読みされてしまいがちな長文のテキスト内でも、会話ふきだしには必ず目が留まります。

というわけで、会話ふきだしは以下の用途で使用すると効果的です。

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

＼ AFFINGER6にも対応済み ／

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

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

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