AFFINGER

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

2021年1月31日

AFFINGERサンプル

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

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

 

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

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

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

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

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

会話ふきだしデザイン

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

 

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

  パターンA パターンB
デフォルト デフォルトのデザイン1 デフォルトのデザイン2
ボーダー ボーダー1 ボーダー2
角丸なし 角丸なし1 角丸なし2
アイコン枠なし アイコン枠なし アイコン枠無し2
アイコンを少し大きく アイコンを大きく1 アイコンを大きく2
アニメーション アニメーション1 アニメーション3
小豆
どれも魅力的で迷っちゃうなぁ。
でも、カスタマイズって簡単にできるの?
カスタマイズ方法はめちゃくちゃ簡単!
誰でも簡単に自分好みのデザインに変更できるよ。
大福

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

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

続きを見る

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

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

カスタマイズ方法

  1. カスタマイズメニューからカスタマイズ
  2. AFFINGER5管理からカスタマイズ

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

 

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

会話風ふきだしカスタマイズメニュー

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

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

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

 

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

吹き出し内の背景色を選択

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

 

ボーダー

ふきだしのボーダー設定

  1. ボーダーデザインタイプに変更をクリックで、ふきだしに枠線
  2. ボーダーデザインタイプの背景色で、ふきだし内のカラーを変更

 

角まるなし

ふきだし角丸なし

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

 

アイコン枠なし

ふきだしアイコン枠なし

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

 

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

AFFINGER5管理

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

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

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

吹き出しの全体設定

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

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

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

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

組み合わせで使える記事装飾

  1. 文字装飾
  2. リンクの挿入
  3. アニメーション

 

文字装飾

  パターンA パターンB
文字サイズの変更 文字サイズ大 文字サイズ小
文字色の変更 文字色赤 文字色白
マーカー マーカー赤 マーカー黄

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

設定方法

テキストを入力 → 会話ふきだし装飾 → テキストを選択 → 任意の文字装飾を選択

 

リンクの挿入

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

設定方法

テキストを入力 → 会話ふきだし装飾 → テキストを選択 → リンクの挿入

 

アニメーション

大福
サンプルテキスト
サンプルテキスト
小豆

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

設定方法

テキストを入力 → 会話ふきだし装飾 → テキストを選択 → スタイル → アニメーション

 

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

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

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

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

  • 「これだけは伝えたい」という流し読みされたくないポイント
  • 長くなってしまった文章の要点を伝えたいとき

 

  • AFFINGER5関連でよく読まれている記事

 

AFFINGER6オリジナル特典

AFFINGER購入アイキャッチ
【AFFINGER6購入特典】当ブログ限定オリジナル特典を13個紹介

続きを見る

 

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

オリジナル特典バナー

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

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

  • AFFINGER5利用者向けカスタマイズ集 9選
  • AFFINGER利用者向けカスタマイズ&役立つテクニック 14選

 

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

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

  • この記事を書いた人

大福

ブロガー兼アフィリエイター歴4年目。
当ブログのアクセス数は月7万PVほど。
月に20万円ほどのブログ収入で、田舎でのんびりと暮らしています。
人懐っこい性格ですが、人見知りです。

-AFFINGER

© 2021 大福日記