PR AFFINGERカスタマイズ

アフィンガーの会話吹き出しの使い方・カスタマイズ方法【デザイン追加あり】

11月 26, 2022

アフィンガーの会話吹き出しの使い方・カスタマイズ方法【デザイン追加あり】
  • アフィンガー6の会話吹き出しはどこから設定できるの?
  • 会話吹き出しのデザインを変えてみたい・・・
  • 会話吹き出しを無制限に増やしたい・・・

記事に緩急をつけたり、読者に寄り添う表現ができる「吹き出し」はブログを書くうえで何かと便利な機能です。

この記事ではアフィンガー6の「会話吹き出し機能」の使い方やカスタマイズ方法について徹底的に解説します。

ゆう

記事の後半では、標準機能では実現できない「吹き出しデザインの変更方法」や、「無料で吹き出し追加する方法」も紹介します!

この記事を書いた人

サイト運営者シャイニーゆう

サラリーマンブロガー

シャイニーゆう

shiny_yu2209

プロフィール

  • ブログ歴4年&月収6桁達成
  • 30歳&0歳児と3歳児のパパ

本業に追われながらも副収入を得て今より楽な生活を送りたいに向けて、副業ブログについての情報を発信中

詳細プロフィール

【準備編】アフィンガー6の会話吹き出しの作り方・使い方を解説

まずは【準備編】ということで、アフィンガー6で会話吹き出しを使うための基本的な設定方法について解説します。

準備編:吹き出しの作り方会話吹き出しを管理画面で設定

まず、[AFFINGER管理] > 会話アイコンからアイコン画像アイコン名の設定をします。

  • アイコンサイズは100px以上(正方形)を準備!
  • アフィンガー標準機能では、最大8つまで設定可能

吹き出しが足りない場合は、アフィンガー公式の会話ふきだしプラグイン2(有料)を使うか、当記事の【番外編】で紹介している方法で追加することができます。

準備編:吹き出しの使い方投稿画面で会話ふきだしを使う方法

アイコンの設定が完了したら、ブロックエディタで出力するだけで使用可能です。

アフィンガー6で吹き出しを出には、次の2つの方法があります。

  • 会話ふきだしブロックを使う方法
  • 段落ブロックの「簡易会話」を使う方法

個人的には会話ふきだしブロックの方がデザイン的におすすめです。

ただし、どちらを使っても問題はないので、これから説明する使い方特徴を見て使いやすい方を選択すると良いと思います。

会話ふきだしブロックの使い方・特徴

会話吹き出しブロックは、以下のブロックを選択することで使用できます。

会話吹き出しブロック

登録した会話アイコンはサイドバーの「会話ショートコード」のプルダウンから選択します。

会話吹き出し編集画面

会話吹き出しブロックの特徴

  • 吹き出しの向き変更が可能
  • 設定したデザインが全て反映される

「ふきだしブロック」なら、この吹き出しのようにアイコンを右側配置にすることができますよ!

ゆう

段落ブロックの「簡易会話」の使い方・特徴

簡易会話は段落ブロックのスタイル変更で使用可能です。

段落ブロック選択

『簡易会話A』が管理画面で設定した1つ目のアイコン、『簡易会話B』は2つ目のアイコンが反映されます。

段落ブロックのスタイル変更

簡易会話の特徴

  • 段落ブロックでスタイル変更可(ブロック選択不要)
  • 向きが変えられない(左アイコンのみ)
  • 一部カスタマイズが反映されない(例. 枠線が付けられない)

簡易会話Aの吹き出しです。枠線のデザインが効かなかったり、アイコン名も表示されません。

同じアイコンでも、会話ふきだしブロックだとこんな感じです。文字周りの余白も少し変わりますね。

ゆう

【装飾編】アフィンガーの吹き出しカスタマイズ方法

アフィンガーで吹き出しデザインをカスタマイズするには、2カ所の設定が必要です。

各設定画面から変更できる要素は次のようなイメージです。

  • 会話アイコン設定:アイコンのサイズ、動き
  • カスタマイザー:各種カラー、吹き出しデザイン設定

アイコンのサイズ変更、動きをつける

以下のアイコンを設定した画面から、アイコンサイズ変更アイコンを動かす設定ができます。

会話アイコン設定画面

各種カラー、吹き出しデザインを変更する

カラーや枠線などのデザインは、外観 > カスタマイズ > オプション(その他) > 会話ふきだしから設定できます。

カスタマイザー会話ふきだし設定

会話1〜会話8までの背景色が個別に設定できるほか、ボーダーデザインに変更することも可能です。

ただし、ーダーデザインタイプの背景色」は「各会話の背景色」よりも優先順位が高いことに注意しましょう。

【応用編】アフィンガーの吹き出しデザインに「考える風」を追加する方法

通常は標準で搭載されているふきだし形状は1つのみですが、ここでは「考える風」のふきだしデザインを追加する方法を紹介します。

ゆう

こんな感じで「考える風」デザインを追加します!

アイコン向きも変更できるよ\(^o^)/

ゆう

テーマエディターのstyle.cssカスタマイザーの追加CSSコードをにコピペするだけで実装できるので、よかったら使ってみてください。

以下のサンプルコードは「会話アイコン2」を考える風にした場合です。kaiwaicon2の数字の部分を変更して使ってください。

【番外編】アフィンガー6に吹き出しを追加する方法

アフィンガーの標準機能では作成できる吹き出しは8つまで

ここでは会話吹き出しを追加する方法を紹介したいと思います。

アフィンガーで会話吹き出しを追加する方法は具体的には次の3つの方法があります。

おすすめは、無料でカスタマイズの自由度も高いLIQUID SPEECH BALLOONを使う方法です!

ゆう

アフィンガー公式プラグインを使う

  • アフィンガー公式のプラグイン
  • 購入料金:2,980円(税込)

公式プラグインだけあって、カスタアイズ性やブロックエディタの使いやすさなどアフィンガーとの相性は抜群

ただし、有料プラグインなので無理に公式プラグインにこだわる必要はないかなと思います。

無料プラグイン「LIQUID SPEECH BALLOON」を使う

  • LIQUID PRESSが提供する無料プラグイン
  • 購入料金:無料

『LIQUID SPEECH BALLOON』はLIQUID PRESSが提供している無料のプラグインの一つです。

ブロックエディタ(Gutenberg)対応で、無料とは思えないほどのクオリティのプラグイン。

お金をかけずにプラグインで簡単に吹き出し追加したい方におすすめです。

ふきだしプラグイン以外にも、無料プラグインが複数あるので一度LIQUID PRESSのサイトを覗いてみるといいですよ!

ゆう

HTML・CSSで吹き出しを実装する方法

最後にHTML・CSSを使って吹き出しを実装する方法を紹介します。

多少HTML・CSSの知識が必要ですが、極力プラグインを入れたくないという方にはおすすめです。

HTML・CSSで吹き出しを追加する手順

  • HTMLをコピー
  • カスタマイズHTMLに貼り付け、マイブロック登録
  • マイブロックを投稿記事に呼び出す

HTMLをコピー

以下のHTMLコードをコピー(右上のマークをクリック!)

<div class="st-kaiwa-box clearfix">
  <div class="st-kaiwa-face">
    <img src="アイコンURLを入力" width="60px">
    <div class="st-kaiwa-face-name">アイコン名を入力</div>
  </div>
  <div class="st-kaiwa-area">
    <div class="st-kaiwa-hukidashi">ここに吹き出しの中身を入力</div>
  </div>
</div>

カスタムHTMLに貼り付け、マイブロック登録

アフィンガーの機能である「マイブロック」を新規追加し、カスタムHTMLに先ほどコピーしたHTMLを貼り付け。

マイブロックの編集画面
  • アイコンURLを入力
  • アイコン名を入力

この2ヶ所を登録したいアイコンの内容に変更して、マイブロックに登録しておきます。

※アイコンURLは以下から確認できます。

これでアイコン登録は完了です。

投稿画面でマイブロックを呼び出す

あとは、投稿画面でマイブロックを呼び出して、吹き出しの中身の部分を編集してあげれば完成です!!

なおこの方法では、アフィンガーの管理画面から登録した「会話アイコン1」と同じデザインで表示されます。

それでは、今回はこれで以上です。

アフィンガーの会話ふきだし機能を使って、テンポの良い読みやすい記事を作りましょう!

  • この記事を書いた人
  • 最新記事

シャイニーゆう

ブログ歴4年|月収収益6桁達成
30代前半サラリーマン&子育てパパ
副収入で生活を楽にしたいという方向けにブログの魅力を発信中!

-AFFINGERカスタマイズ
-