当ページのリンクには広告が含まれています。

AFFINGER6 会話ふきだしブロックの使い方!近親感・柔らかい雰囲気を作るアイテムはこれ!

AFFINGER6 会話ふきだしの使い方

こんにちは "osaboo"です。"@osaboo_Bot"

AFFINGER6の「会話ふきだしブロックの使い方」を初心者さん向けに解説します。

  • AFFINGER: 会話ふきだし

AFFINGER6専用のブロックエディター機能です。
記事を「やさしく表現する・近親感を得る・難しい表現をわかりやすくする」等、コミカルな雰囲気を醸し出せる機能です。AFFINGER6の会話ふきだしブロックは複数のキャラクターが登録できる他、標準でアニメーション(動かす)機能がついています。複数のキャラクターを使えば会話のキャッチボールも簡単にできて、表現力が格段にUPします。

この記事でわかること!

  • AFFINGER: 会話ふきだしとは…
    1. 会話ふきだし
    2. 簡易会話
    3. 会話ふきだしと簡易会話の違い
  • 会話アイコンの登録と設定(画像・サイズ・動作)
  • 会話ふきだしのカスタマイズ(背景・枠)カスタマイザーでの設定
    1. 背景色の変更(会話8個のふきだし背景を個別に設定できる!)
    2. アイコンに枠をつける
    3. ふきだしを角丸にしない
    4. ボーダーデザインタイプ(枠線のみ)に変更
    5. ボーダーデザインタイプの背景色※一括
  • 簡易会話(段落(P)ブロック)の使い方
    1. 段落(P)ブロックを挿入→簡易会話A・Bのスタイルに変更
  • 会話ふきだしブロックの使い方
    1. 会話ふきだしブロックの挿入手順
    2. 会話ふきだしの設定(記事ごとにできること)会話ふきだしブロックのカスタマイズイメージ
  • まとめ!

それではご覧ください!

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

AFFINGER: 会話ふきだしとは…

当サイトで使用している『会話ふきだしブロック』はこんな感じです。

Question
Question

AFFINGER: 会話ふきだし『会話風アイコン1』のサンプル【Question】

AFFINGER: 会話ふきだし『会話風アイコン2』のサンプル【osaboo】

osaboo
osaboo

段落(P)Stylesタブ:スタイル『簡易会話A』のサンプル【Question】

段落(P)Stylesタブ:スタイル『簡易会話B』のサンプル 【osaboo】


AFFINGER6の会話ふきだしブロックには『会話アイコンと簡易会話』の2種類の表示パターンがあります。

上の2つはブロック挿入ツールから『AFFINGER: 会話ふきだし』ブロックを挿入したパターンです。
サンプルでは枠付きの引き出しになっています。(枠付き・枠無しのふきだし設定ができます)

下2つはブロック挿入ツールから『段落』ブロックを挿入した後に Stylesタブ で『簡易会話』スタイルに変更しています。
『AFFINGER: 会話ふきだし』ブロックのふきだしの枠色が背景になっています。(枠付きのふきだし設定はできません)

※ 枠付きのふきだし設定=ボーダーデザインタイプ(枠線のみ)

会話ふきだし

会話ふきだしは ブロック挿入ツールから投稿(記事編集)画面に挿入できる標準的なブロックです。会話風アイコン(キャラクター)が8個まで登録できます。

こんな方におすすめ!

  • たくさんのキャラクターを使って記事を作りたい
  • アイコンの下に好きな名前(アイコンのタイトル)を表示したい
  • ふきだしにカラフルな枠をつけたい

簡易会話

簡易会話は 段落ブロックのスタイルからテキスト(文章)をふきだしに(装飾)換えることができます。簡易会話では会話風アイコン(キャラクター)は2個まで登録できます。

こんな方におすすめ!

  • キャラクターは2つあれば充分!文章を作りながら簡単に会話スタイルに変更したい
  • アイコンの下に好きな名前(アイコンのタイトル)はいらない
  • ふきだしに枠はいらない

会話ふきだしと簡易会話の違い

会話ふきだしと簡易会話の違いを整理すると以下の表のようになります。
サイトのスタイルに合うタイプをお好みで選択してみてください。もちろん混合して使うのもOKかと…

相違項目会話ふきだし簡易会話
アイコンの向き左右
アイコンの登録数8個2個
アイコンのタイトルありなし
ボーダーデザイン(枠線のみ)対応非対応
挿入ブロックAFFINGER: 会話ふきだし段落(P)
操作効率普通良い

「アイコンの登録数!」と「アイコンの向きをどうするか!」が ネックになると思います。

会話アイコンの登録と設定(画像・サイズ・動作)

この章では、会話アイコンの登録と設定(画像・サイズ・動作)をご紹介します。
会話ふきだしブロックを使うための準備です。

それでは順番に見ていきましょう。

会話アイコン設定手順

  1. 『アップロード』をクリック→『メディアを追加』で画像を選択→『投稿に挿入』をクリックします。
  2. 『アイコン名』に任意の名前を入力します。
  3. 『会話アイコンを少し動かす』のチェックを ON/OFF
  4. 『会話アイコンを少し大きく』のチェックを ON/OFF

必要なアイコン画像の設定が完了したら『Save』をクリックします。

『WordPress管理>ダッシュボード>AFFINGER 管理>会話アイコン』をクリックします。

以下の画面が表示されます。

アイコン画像の登録は8個まで可能です。但し、簡易会話に適応しているのは 赤波線部分の2個です。

❶〜❹ を処理して 最後に『Save』クリックして完了です。

AFFINGER管理:会話アイコン設定

メディアの追加方法:補足説明

  1. アイコン用画像を選択します。(メディアライブラリ・ファイルをアップロードどちらかより)
  2. 右側の「添付ファイルの詳細」を下側にスクロールします。(最下部)
  3. 添付ファイルの表示設定:サイズ(枠内) をクリック→ドロップダウンメニューより
    『会話風アイコン-100x100』を選択します。(画像が大きい場合)
  4. 『投稿に挿入』をクリックします。

❶〜❹ を処理します。

メディアを追加

アイコンサイズにつて…

公式でのアイコン画像サイズは「100px以上の正方形」です。当サイトでは最小推奨サイズの「100px正方形」を使用しています。

イラスト等の比較的軽い画像データであれば 512px 程度まで大きくても良いと思います。

おすすめ画像サイズは以下のようになります。

  • 画像サイズ:100〜512px 正方形(※ 添付ファイルの表示設定で100x100pxに設定します)
  • 画像ファイルサイズ:5KB以下を推奨(15KB程度を最大の目安とする)

会話ふきだしのカスタマイズ(背景・枠)カスタマイザーでの設定

この章では、会話ふきだしのカスタマイズ(背景・枠)カスタマイザーでの設定をご紹介します。

カスタマイザーでの設定は、すべての「会話ふきだし・簡易会話」ブロックに影響します。

まずは、カスタマイザーを起動します。

『WordPress管理>ダッシュボード>外観>カスタマイズ』をクリックします。

カスタマイザーが起動すると以下の画面が表示されます。左から順番にメニューをクリックしていきます。

『オプション(その他)』をクリックします。

カスタマイザー:オプション(その他)

『会話ふきだし』をクリックします。

カスタマイザー:オプション(その他)|会話ふきだし

各詳細項目をクリックして設定します。

カスタマイザー:オプション(その他)|会話ふきだし詳細

会話ふきだしの個々の設定を順番に説明していきます。

背景色の変更(会話8個のふきだし背景を個別に設定できる!)

会話1〜8のそれぞれを『全体または会話xxの背景色』を設定することで『会話アイコン設定』で登録したアイコン画像に対するふきだしの背景色設定ができます。

会話ふきだし:全体または会話1の背景色

『色を選択』をクリックすると左画面が表示されるので任意の色を設定します。

会話1〜8の変更手順は全て同じです。
会話1には『#fafafa』デフォルト
会話2〜8は『#RRGGBB』デフォルト

任意のカラーナンバーを入力すればOKです。

注意 会話2〜8の色がデフォルト『#RRGGBB』の場合、会話1の色設定と同じになります。

yajirusi-sita-80x40
会話ふきだし:全体または会話1・2・3の背景色イメージ

アイコンに枠をつける

登録した会話アイコンの画像を丸枠で囲むことができます。「画像の色合いによって枠の有無検討してみましょう」

会話ふきだし:アイコンに枠をつける

ふきだしを角丸にしない

ふきだしの角の”R”を無くすことができます。「シャープな印象を与えれますね」筆者は好きです!

会話ふきだし:ふきだしを角丸にしない

ボーダーデザインタイプ(枠線のみ)に変更

ふきだしを枠付きにすることができます。ボーダーの太さは(2px)又は(3px)でどちらかを選べます。
注意 背景色は全ての会話アイコン共通となり別途設定します。

普通(2px)を選択した場合のイメージ

会話ふきだし:ボーダーデザインタイプ(枠線のみ)に変更|普通(2px)
yajirusi-sita-80x40

太め(3px)を選択した場合のイメージ

会話ふきだし:ボーダーデザインタイプ(枠線のみ)に変更|太め(3px)

ボーダーデザインタイプの背景色※一括

ボーダーデザインタイプを選択した場合のみ有効で背景色が設定できます。
注意 背景色は全ての会話アイコン共通となります。

会話ふきだし:ボーダーデザインタイプの背景色※一括

記事をたくさん書く前に!
なるべく早い段階で「会話ふきだし」の色を決めると良いかと…

osaboo
osaboo

簡易会話(段落(P)ブロック)の使い方

この章では、簡易会話(段落(P)ブロック)の使い方をご紹介します。
前章で、「会話アイコンの登録と設定」を済ませた ふきだしブロックを簡易会話(段落(P)ブロック)として記事に挿入します。

簡易会話(段落(P)ブロック)の使い方

  • 段落(P)ブロックを挿入→簡易会話用のテキスト(文章)を入力
  • 段落(P)ブロックを簡易会話A・Bのスタイルに変更

それでは順番に見ていきましょう。

段落(P)ブロックを挿入→簡易会話A・Bのスタイルに変更

※ 作業は 投稿(記事編集画面での作業になります。

段落(P)ブロックを挿入し、簡易会話に切り替える手順をご紹介します。

STEP1投稿(記事編集)画面を準備

『WordPress管理>ダッシュボード>投稿>新規追加』をクリックします。

投稿画面が表示されます。
(編集する場合は、投稿一覧から対象記事を選択してください。)

段落(P)ブロックを挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿(記事編集)画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

投稿画面:ブロック挿入ツールを切り替え

STEP3ブロックタブメニューから『段落』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『段落』をクリックします。

『段落』をクリックします。

ブロックタブメニュー:テキスト|段落

STEP4段落(P)ブロックを挿入→簡易会話用のテキスト(文章)を入力

投稿(記事編集)画面に『段落(P)ブロック』が表示されます。
簡易会話用のテキスト(文章)を入力します。
以下の画面のように表示されていればOKです。

投稿(記事編集)画面:簡易会話(段落(P)ブロック)|デフォルト

※ 投稿(記事編集)画面右側のブロックタブメニューが閉じている場合は 設定アイコンから開きます。

ブロックタブメニューの表示:補足説明

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

設定アイコン閉(ブロックタブメニュー閉)

投稿:記事編集画面右側タブメニュー閉
yajirusi-sita-80x40

設定アイコン開(ブロックタブメニュー開)

投稿:記事編集画面右側タブメニュー開

STEP5段落(P)ブロックを簡易会話A・Bのスタイル変更

・Stylesタブを開いて『スタイル項目の簡易会話A』をクリックします。
・テキスト(文章)が『簡易会話A』のスタイルに切り替わります。

投稿(記事編集)画面:簡易会話(段落(P)ブロック)|簡易会話A

・Stylesタブを開いて『スタイル項目の簡易会話B』をクリックします。
・テキスト(文章)が『簡易会話B』のスタイルに切り替わります。

投稿(記事編集)画面:簡易会話(段落(P)ブロック)|簡易会話B

簡易会話では…アイコンの向きやふきだし枠の設定はできません。(前述対比表参照)

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

この章では、会話ふきだしブロックの使い方をご紹介します。
前章で、「会話アイコンの登録と設定」を済ませた ふきだしブロックを記事に挿入します。

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

  • 会話ふきだしブロックの挿入手順
  • 会話ふきだしの設定(記事ごとにできること)

それでは順番に見ていきましょう。

会話ふきだしブロックの挿入手順

※ 作業は 投稿(記事編集画面での作業になります。

基本的な会話ふきだしブロックの挿入手順をご紹介します。

STEP1投稿(記事編集)画面を準備

『WordPress管理>ダッシュボード>投稿>新規追加』をクリックします。

投稿画面が表示されます。
(編集する場合は、投稿一覧から対象記事を選択してください。)

会話ふきだしブロックを挿入する箇所をクリックします。

ブロック挿入ツールを切り替えてブロックメニューを開きます。

STEP2ブロック挿入ツールを切り替え

投稿(記事編集)画面の左上部のブロック挿入ツール切り替えアイコン『+』をクリックします。

『+』をクリックします。

投稿画面:ブロック挿入ツールを切り替え

STEP3ブロックタブメニューから『AFFINGER: 会話ふきだし』を選択

ブロック挿入ツール切り替えアイコンが『 x 』に変わり 以下の画面が表示されます。

ブロックタブのメニューから『AFFINGER: 会話ふきだし』をクリックします。

『AFFINGER: 会話ふきだし』をクリックします。

ブロックタブメニュー:AFFINGER!AFFINGER: 会話ふきだし

STEP4会話ふきだしブロック挿入完了

投稿(記事編集)画面に『会話ふきだしブロック』が表示されます。

挿入直後では、以下のように表示されます。
『会話風アイコン1』が選択された状態で挿入されます。右側ブロックタブメニューの会話ふきだしの下枠部をクリックしてアイコンの変更ができます。(後述詳細説明あり)

投稿(記事編集)画面:会話ふきだしブロック挿入直後

会話ふきだしの設定(記事ごとにできること)

AFFINGER: 会話ふきだしの設定をご紹介します。

会話ふきだしブロックの挿入直後は以下のように表示されます。
会話ふきだしブロック専用のツールバーが表示され、青枠で囲まれた部分がブロック領域です。
以下の画面のように表示されていればOKです。

投稿(記事編集)画面:会話ふきだしブロック挿入直後|拡大

設定メニューの場所は、投稿(記事編集)画面の右側に表示されるブロックタブメニューです。

ブロックタブメニューの表示:補足説明

表示されていない場合は、以下の画面を参考に設定アイコンをクリックしてください。

設定アイコン閉(ブロックタブメニュー閉)

投稿:記事編集画面右側タブメニュー閉
yajirusi-sita-80x40

設定アイコン開(ブロックタブメニュー開)

投稿:記事編集画面右側タブメニュー開

ブロックタブメニュー詳細

ブロックタブメニュー:AFFINGER: 会話ふきだし

ショートコード

  • 会話ふきだし:『ドロップダウンメニューより選択』

    会話アイコン:ドロップダウンメニュー
  • 向きを反対 :『ON/OFF』

高度な設定

  • 追加 CSS クラス:『任意』

初心者でも安心!コスパ最強の洗練されたWordPressテーマ

AFFINGER6 購入 ▶︎ 詳しくはこちら

\\『すごいもくじLITE』が付いてくる!限定特典キャンペーン実施中!//

まとめ!AFFINGER6 会話ふきだしブロックの使い方!近親感・柔らかい雰囲気を作るアイテムはこれ!

AFFINGER6の会話ふきだしブロックの使い方をご紹介しました。記事の雰囲気を柔らかくしたいときに会話ふきだしブロックを使うと効果的だと思います。ピンポイントで「一言のキャラクター付のふきだし」があるだけで…ずいぶん変わるかと!
是非、試してみてください。

「最後まで、ご観覧いただきありがとうございました。」
また、次の記事で…お会いしましょう。\^^/

-Function AFFINGER
-

PAGE TOP