アフィンガー6の吹き出しの使い方完全ガイド:初心者でも簡単設定

サムネイル画像

当サイトではアフィリエイト広告を利用しています。

  • アフィンガー6で吹き出しを作りたい
  • アフィンガー6の使い方が分からない
  • ブログで稼ぎたい

このような声にお応えして参考となる記事をご用意しました。

こちらの記事ではワードプレステーマであるアフィンガー6で吹き出しを使う方法について解説しています。

記事の内容を見ていただくだけで、アフィンガー6の吹き出し機能の設定方法、使い方、効果的な使用シーンがわかりますよ。

会話吹き出しを適切に使えるようになれば、記事の読みやすさが向上し、読者をより惹きつけることができるようになります。

ただ、吹き出しは2種類あってどちらを使えばいいか迷う場合もあるのでぜひ参考にしてくださいね。

ブログマニュアルプレゼント
おかくん

超初心者向けに、ブログで稼ぐためのノウハウを無料で配布しています。
以下の画像をクリックするとプレゼント受け取りフォームに移動します。

ブログマニュアルプレゼント
おかくん

今だけ三大特典付いています。

目次

アフィンガー6の吹き出しの種類と特徴2選

特徴

アフィンガー6では、「会話吹き出し」と「簡易会話」という2種類の吹き出し機能が用意されています。

※項目をタップすると詳細に飛びます
おかくん

以下で順番に解説します。

①会話吹き出しの特徴

会話吹き出しは専用のブロックを追加する方法です。

より本格的な会話表現を実現するための機能で、特徴は以下の通りです。

  • 最大8個のアイコンを登録可能
  • アイコン下に名前を表示できる
  • 吹き出しの向きを左右に変更可能
  • ボーダーデザイン(枠線のみ)に対応
おかくん

会話吹き出しはこんな感じの見た目です。

担当者

左寄せにして会話風にもできます。

②簡易会話の特徴

簡易会話は段落ブロックのスタイル変更で簡単に適用できる方法です。

文章を書きながら吹き出しを挿入したい場合に便利で、特徴は以下の通りです。

  • 登録できるアイコンは2個まで
  • アイコン下の名前表示なし
  • 吹き出しの向きは左固定
  • ボーダーデザイン非対応

使い分け方としては、例えば複数のキャラクターを使った会話形式の記事なら会話吹き出しが適しておりシンプルな補足説明には簡易会話が向いています

おかくん

目的に合わせて使い分けましょう。

アフィンガー6の会話吹き出しの設定方法と使い方

how to

ここでは「会話吹き出し」の使い方について解説していきます。

おかくん

以下で順番に解説します。

①会話吹き出しのアイコン画像の設定方法6ステップ

会話吹き出しを記事に挿入する前に、まずアイコン画像の設定をする必要があります。

ここでは、その具体的な手順と注意点を紹介します。

STEP

アイコン画像の準備

まず、使用したいアイコン画像を用意します。アイコンのサイズは100px以上の正方形が推奨されています。

アイコン画像の入手方法ですが、無料素材を探して使用するのが最も手っ取り早いです。

オリジナリティを出したい場合は、

などのサービスで、イラストレーターに依頼して作成してもらうという流れになります。

おかくん

私のアイコンは、ココナラで依頼したものです。

STEP

アイコン画像の設定手順

WordPressの管理画面から「AFFINGER管理」→「会話アイコン」を選択します。

ワードプレスの画面
STEP

吹き出しの表示名を設定

.「アイコン名」欄に、吹き出しの下に表示したい名前を入力します。

会話アイコン設定の画面
STEP

アイコン画像のアップロード

「アップロード」ボタンをクリックし、準備したアイコン画像を選択します。

会話アイコン設定の画面
STEP

投稿に挿入

画像を選んだら「投稿に挿入」をクリックします。

会話アイコン設定の画面
おかくん

これらの手順を、使用したいアイコンの数だけ繰り返します。
最大8個まで登録可能ですが、完璧を求めず、まずは2~3個から始めるのがおすすめです。

STEP

追加設定について

必要があれば以下の設定もしておきましょう。

  • 「会話アイコンを少し動かす」:チェックを入れるとアイコンがアニメーションします。
  • 「会話アイコンを少し大きく」:チェックを入れるとアイコンサイズが拡大します。

上記の設定は、記事の雰囲気や目的に合わせて選択してください。

動きのあるアイコンは注目を集めやすいですが、使いすぎると逆に読みづらくなる可能性もあります。

おかくん

最後に忘れずに「Save」ボタンをクリックして

設定を保存しましょう。

②会話吹き出しブロックの挿入手順3ステップ

アフィンガー6の会話吹き出しブロックは簡単に記事に挿入できます。

以下の手順に従えば、初心者の方でもすぐに吹き出しを追加できます。

STEP

編集画面を開く

記事の編集画面を開きます。

ワードプレスの画面
STEP

ブロックメニューを開く

画面左上の「+」マークをクリックしてブロックメニューを開きます。

ワードプレスの画面
STEP

「AFFINGER: 会話ふきだし」を選択

検索欄に「AFFINGER」と入力するか、ブロック一覧から「AFFINGER: 会話ふきだし」を探して選択します。

ワードプレスの画面
おかくん

これで会話吹き出しブロックが挿入されます。

③会話吹き出しの内容設定手順3ステップ

吹き出しブロックを挿入したら、次は内容を設定しましょう。

STEP

会話内容の入力

吹き出し内のテキストエリアをクリックし、会話内容の文言を入力します。

ワードプレスの画面
STEP

アイコンの選択

画面右側のブロック設定パネルで、「ショートコード」から先ほど設定したアイコンを選択します。

ワードプレスの画面
STEP

吹き出しの向きを変更

必要に応じて「向きを反転」にチェックを入れ、吹き出しの向きを変更します。

ワードプレスの画面

デフォルトは吹き出しが左寄せですが、「向きを反転」にチェックを入れると右寄せになります。

おかくん

2人以上のキャラを使う場合は

この機能でうまく会話風にしましょう。

手順を覚えれば、記事内で簡単に会話吹き出しを使用できるようになります。

例えば、Q&A形式の記事で質問と回答を分かりやすく表現したり、複数の意見を対比させて紹介したりすることが可能です。

アフィンガー6|簡易会話吹き出しのメリットとデメリット

ステップ

アフィンガー6の簡易会話機能は、会話吹き出しと違いブロックを新たに追加する必要がないため、より手軽に吹き出しが挿入できる方法です。

以下では簡易会話のメリットとデメリットについて解説します。

※項目をタップすると詳細に飛びます
おかくん

以下で順番に解説します。

①簡易会話のメリット

簡易会話のメリットは以下のとおりです。

  • 操作が簡単:通常の文章入力から数クリックで吹き出しに変換できます。
  • 文章を書きながら適用可能:アイデアを書き出しながら、後からでも吹き出しに変更できます。

簡易会話は、長文の記事に変化をつけたり、重要なポイントを強調したりするのに適しています。

②簡易会話のデメリット

簡易会話のデメリットは以下のとおりです。

  • アイコンは2種類まで:複数のキャラクターを使用する場合は不向きです。
  • 吹き出しの向きは左固定:右向きの吹き出しは作成できません。
  • ボーダーデザイン非対応:枠線のみの吹き出しは作成できません。
おかくん

キャラ同士が会話している風にするなら
会話吹き出しを使ったほうが良いです。

アフィンガー6の簡易会話吹き出しの使い方2選

ポイント

アフィンガー6の簡易会話の使い方について以下の2つに分けて解説します。

おかくん

以下で順番に解説します。

①簡易会話の基本的な使い方3ステップ

簡易会話の基本的な使い方を以下の3ステップで解説します。

STEP

段落ブロックを挿入

記事編集画面で、通常の段落ブロックを挿入します。

ワードプレスの画面
STEP

文章を挿入

段落ブロック内に文章を入力します。

ワードプレスの画面
STEP

簡易会話AまたはBを選択

画面右側のブロックの設定パネルを開き、スタイルから簡易会話Aもしくは簡易会話Bを選択します。

ワードプレスの画面
おかくん

これだけで、入力した文章が吹き出し形式に変わります。

②簡易会話Aと簡易会話Bの違い

「簡易会話A」と「簡易会話B」は、それぞれ異なるアイコンを使用します。

会話吹き出しでも設定した画像アイコン1が簡易会話Aの、画像アイコン2が簡易会話Bのアイコンになります。

>> 会話吹き出しの画像アイコン設定にジャンプ

アフィンガー6の吹き出しのカスタマイズ2選

SNS

ボーダーデザインと角丸の設定を上手く使いこなすことで、記事の見た目がさらに良くなります。

以下では吹き出しのカスタマイズについて2つに分けて解説します。

おかくん

以下でそれぞれ詳しく解説します。

①吹き出しのボーダーデザインと角丸の設定

吹き出しのボーダーデザインの設定方法を3つに分けて解説します。

STEP

ボーダーデザインの設定方法

WordPressの管理画面の左メニューから外観→カスタマイズを選択します。

WordPressの管理画面
STEP

オプションの選択

遷移した先の左メニューからオプション(その他)をクリックします。

ワードプレスの画面
STEP

「会話ふきだし」の選択

さらに「会話ふきだし」をクリックします。

ワードプレスの画面
STEP

ボーダーデザインの選択

「ボーダーデザインタイプ(枠線のみ)に変更」の項目で、普通(2px)太め(3px)を選択します。

ワードプレスの画面
おかくん

このオプションを有効にすると、吹き出しが枠線のみのデザインに変更されます。

背景色が無くなり、すっきりとした印象になるため、文字が読みやすくなります

「普通(2px)」と「太め(3px)」は枠線が細いか太いかの違いです。

以下に実際に設定した画像を用意したので参考にして下さい。

吹き出しの画像
STEP

角丸の設定方法

同じ画面内にある「ふきだしを角丸にしない」にチェックを入れます。

ワードプレスの画面
おかくん

角丸のデザインは柔らかい印象を与え、四角いデザインはシャープな印象を与えます。

記事の雰囲気に合わせて選択しましょう。

実際に設定するとこのような感じになります。

吹き出しの画像
おかくん

選択し終わったら、最後に「公開」をクリックするのを忘れないようにして下さい。

ワードプレスの画面
STEP

設定の組み合わせ例

これらの設定を組み合わせることで、様々なデザインが可能になります。

  • ボーダーデザイン + 角丸 = やわらかい印象の枠線吹き出し
  • ボーダーデザイン + 四角 = クールでモダンな印象の吹き出し
  • 背景色あり + 角丸 = 従来の柔らかい印象の吹き出し
  • 背景色あり + 四角 = はっきりとした印象の吹き出し

例えば、ビジネス関連の記事では四角い枠線デザインが適しています。

日常的な話題を扱う記事では角丸のデザインが親しみやすい印象を与えます。

おかくん

記事の内容や目的にあったデザインにしましょう。

②吹き出しの背景色の設定

ボーダーや丸角以外にも、吹き出しの背景色を変えることで見た目を変えることができます。

ボーダーデザインと角丸の設定で開いた会話ふきだしの設定メニューで、「全体又は会話1~8の色」を選択して、最後に「公開」をクリックします。

ワードプレスの画面

例えば、アイコン設定で1のみを設定したなら「全体又は会話1」を、アイコン設定で1と2を設定したなら「全体又は会話1」と「全体又は会話2」の色を変更しましょう。

おかくん

ボーダーや丸角とうまく併用すれば

より読みやすい記事にできます。

アフィンガー6|吹き出しの効果的な使用シーン5選

電球

アフィンガー6で吹き出しを効果的に活用できるシーンをまとめました。

以下の5つに分けて解説します。

おかくん

各項目について詳しく説明していきます。

①Q&A形式の記事作成時

Q&A形式の記事を作成する際に吹き出しは便利です。

  • 質問者の吹き出し:左寄せ
  • 回答者の吹き出し:右寄せ

上記のように設定することで、読者は質問と回答を視覚的に区別しやすくなります。

おかくん

よくある質問とその回答を整理する際に有効です。

②複数の意見を比較する時

異なる立場や意見を比較する際も、吹き出しが役立ちます

  • 意見A:左向きの吹き出し
  • 意見B:右向きの吹き出し

対比的な意見や情報を明確に示すことができます。

おかくん

製品比較やサービス比較などで活用しやすいパターンです。

③プロセスを説明する時

手順や過程を説明する際、各ステップを吹き出しで表現すると分かりやすくなります

  • ステップ1:左向き吹き出し
  • ステップ2:右向き吹き出し
  • ステップ3:左向き吹き出し

このように交互に使用することで、プロセスの流れを視覚的に表現できます。

おかくん

手順を説明する際は吹き出しを活用してみましょう。

④注意点やポイントを強調する時

記事内で特に強調したい点や注意点がある場合、吹き出しを使用すると効果的です。

  • 通常の文章の中に、異なる背景色の吹き出しを挿入
  • アイコンを工夫して、注意を表すものを使用

こうすることで、読者の目を引き、重要な情報を見逃さないようにできます。

おかくん

吹き出しに重要なポイントを記載することで、読者の目に止まります。

⑤キャラクターとして活用する時

記事全体を通じて特定のキャラクターを設定し、そのキャラクターの吹き出しを使用することで、読者との親近感を高められます

例えば、初心者向け記事で読者と同じ視点のキャラクターを設定をすると、読者は自分の疑問が代弁されているように感じ、記事に親しみを感じやすくなります。

おかくん

私もキャラクターです。

アフィンガー6|吹き出し使用時の注意点とコツ4選

電球

アフィンガー6の吹き出し機能は非常に便利ですが、何も考えずに挿入したり、便利だからと使いすぎてもかえって読みづらい記事になってしまいます

コツを押さえることで、より読みやすく魅力的な記事を作成できます。

おかくん

各項目について詳しく説明していきます。

①使用頻度のバランスを考える

吹き出しの使用頻度は、記事の長さや内容に応じて調整することが重要です。

  • 短い記事(1000字以下):1〜2回程度
  • 中程度の記事(1000〜3000字):3〜5回程度
  • 長い記事(3000字以上):5〜8回程度

これはあくまでも目安であり、記事の内容や構成によって適切な回数は変わります。

おかくん

吹き出しが本文の邪魔をせず、アクセントとして機能することが重要です。

②一貫性のある使用方法を意識する

吹き出しの使い方に一貫性を持たせることで、読者の理解を助けることができます。

  • 同じキャラクターには同じアイコンを使用
  • 質問と回答のような対話形式では、左右の向きを統一
  • 補足情報や注意点には特定の色や形の吹き出しを使用

このように一貫性を保つことで、読者は記事の構造を直感的に理解しやすくなります。

③適度な情報量を意識する

吹き出し内の文章量は、可能な限り簡潔に保つことをおすすめします。

  • 1つの吹き出しに収める文字数は100字程度まで
  • 長文になる場合は改行するか、複数の吹き出しに分割する
  • 箇条書きを活用して、情報を整理する

これにより、吹き出しの視認性が向上し、読者が情報を素早く把握できるようになります。

④モバイル表示への配慮を考える

WEBサイトの閲覧はスマートフォンからのアクセスの割合も多いため、スマートフォンで見た時に読みやすいかどうかはかなり重要です。

  • 吹き出しの幅が画面からはみ出さないよう注意
  • 小さな画面でも読みやすいフォントサイズを選択
  • 画像付きの吹き出しを使用する場合は、画像サイズに注意

PCでブラウザがChromeであれば、「右クリック→検証」でスマホと同じ表示にできるため、記事を公開する前にプレビューでチェックすると良いです。

アフィンガー6の吹き出しについてのQ&A

よくある質問

アフィンガー6の吹き出しに関するQ&Aは以下のとおりです。

おかくん

皆様から特に質問が多い事項を取り上げました。順番に解説します。

アフィンガー6の吹き出し機能は初心者でも使える?

ここまでにお話した通り、吹き出し機能は初心者の方でも簡単に使用でき、ブログの読みやすさを上げる手っ取り早い方法です。

設定方法から順番に見ていけばすぐに使えるようになるので、ぜひ参考にしてくださいね。

>> 会話吹き出しの設定方法にジャンプ

ワードプレスの吹き出しの左右を変えるには?

吹き出しの左右を変更するには、「会話吹き出し」ブロックを記事の編集画面で挿入した後に行います。

記事内で詳しく解説しているので参考にして下さい。

>> 会話吹き出しの内容設定にジャンプ

アフィンガー6の吹き出しを活用して読みやすいブログを作ろう

まとめ

以上、アフィンガー6の吹き出しの使用方法について解説しました。

最後にあらためて確認です。

※項目をタップすると詳細に飛びます
  • アフィンガー6には会話吹き出しと簡易会話の2種類の機能がある
  • 会話吹き出しはブロックから挿入
  • 簡易会話は段落のスタイル変更で適用
  • ボーダーデザインや角丸の設定でデザインをカスタマイズできる

アフィンガー6の吹き出し機能を活用して、読みやすいブログを作ろう。

ブログマニュアルプレゼント
おかくん

超初心者向けに、ブログで稼ぐためのノウハウを無料で配布しています。
以下の画像をクリックするとプレゼント受け取りフォームに移動します。

ブログマニュアルプレゼント
おかくん

今だけ三大特典付いています。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次