AFFINGER

【AFFINGER5】吹き出し会話の設定からカスタマイズまですべて解説

 

AFFINGER5の吹き出し会話について教えてください。

 

このような疑問に答えます。

 

本記事の内容

・吹き出し会話_設定方法【AFFINGER5】

・吹き出し会話_対話風に見せる方法【AFFINGER5】

・吹き出し会話_カスタマイズする方法【AFFINGER5】

・【AFFINGER5】吹き出し会話の設定からカスタマイズまですべて解説:まとめ

 

当ブログも実際に「AFFINGER5」を使用してブログ運営をしています。

 

この記事ではAFFINGER5での、吹き出しの設定方法からカスタマイズ方法までを紹介しています。

 

吹き出し会話を入れることで、記事で伝えたいことが読者にも分かりやすくなる効果があるのでおすすめです。

 

3分で読めるので、AFFINGER5をこれから使いたいと考えている方や、吹き出し会話の設定方法を探している方は参考にしてみてください。

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

吹き出し会話_設定方法【AFFINGER5】

はじめに、AFFINGER5で吹き出し会話の設定方法は以下の流れで進みます。

 

吹き出し会話の設定方法手順

  1. 吹き出しアイコンを準備する
  2. 設定画面に移動する
  3. 吹き出しアイコンを設定する
  4. 吹き出しアイコンを記事に設置する

順番に解説していきます。

 

吹き出しアイコンを準備する

アイコン画像は、【100px以上の正方形画像】が推奨されているので準備しておきましょう。

 

すでに画像がある方は、とばして次に進んでください!

 

吹き出し会話によく使われているアイコン

無料でダウンロードできるので、好みのアイコンを探してみると良いですよ。

 

なお、当ブログは『いらすとや』と『ライナストック』をよく使用しています。

 

設定画面に移動する

まず、表示させたいアイコンの設定が必要です。

 

設定画面への移動方法

  1. AFFINGER5管理
  2. 会話・ファビコン等
  3. 会話風アイコン

上記の順番に移動します。

 

吹き出しアイコンを設定する

AFFINGER5では、会話風アイコンが8個まで登録できます。

 

吹き出しアイコンの設定方法

  1. アイコンの名前を決める
  2. 画像をアップロード】→【投稿に挿入
  3. 保存

上記の順番で設定すればOKです。

 

このアイコンであれば『悩む人』が名前になります。

 

アイコンが足りない場合

8個で足りないことはあまりないかもですが、もしも足りない場合は有料のプラグインを使って増やすことができます。
» 会話ふきだしプラグイン2の詳細や購入はこちら

 

吹き出しアイコンを記事に設置する

ビジュアルモードの【タグ】→【会話ふきだし】→【会話】の順でクリックして進みます。

 

上記の画像のように、] と [ の間にテキストをいれます。

 

上記の場合のプレビュー


ここにテキストを入れる

ここまでが、吹き出しアイコンを記事に入れる手順です。

 

吹き出しアイコン:まとめ

  1. 【AFFINGER5管理】→【会話・ファビコン等】で設定画面へ。
  2.   アイコン・ファビコン設定内で【会話風アイコン】を設定。
  3. 【タグ】→【会話ふきだし】→【会話】を選択する。
  4.   ] と [ の間にテキストをいれる。

 

吹き出し会話_対話風に見せる方法【AFFINGER5】

対話風ってどうやってやるの?
ビジュアルモードから、かんたんにできますよ!

 

以下では、AFFINGER5での対話風な表示方法を解説します。

 

表示方法は【半角スペース+ r 】を付け加えるだけ

 

付け加える場所

 

実際の見た目

これだけで、対話風の表示にできます。

 

【半角スペース+ r 】を付け加えるだけなので、すぐ試せますね!

 

吹き出し会話_カスタマイズする方法【AFFINGER5】

吹き出し会話の、2つのカスタマイズについて解説します。

 

・背景色・枠の色を変更する方法

・アイコンを動かす方法

 

背景色・枠の色を変更する方法

背景色と枠の色を変更する方法の解説です。

 

背景色・枠の色を変更する手順

  1. 外観
  2. カスタマイズ
  3. オプションカラー
  4. 会話風ふきだし

上記の順番で設定画面に進みます。

 

お好みで、吹き出しをカスタマイズしてみてください。

 

ちなみに、この吹き出しの設定は以下のとおり。

・【会話の背景色】#7b7b7b

・【ボーダーデザインタイプ】普通(2px)

・【ボーダーデザインタイプの背景色】#fcfcfc

 

アイコンを動かす方法

アイコンを動かす方法の解説です。

 

アイコンを動かす方法

  1. AFFINGER5管理
  2. 会話・ファビコン等
  3. 会話風アイコン】→ 一番下までスクロール
  4.   チェックを入れて【保存

進みかたは上記のとおりです。

 

どちらかにチェックを入れて保存したら完了です。

 

【AFFINGER5】吹き出し会話の設定からカスタマイズまですべて解説:まとめ

AFFINGER5の、吹き出しについてまとめます。

 

記事内での使い方【タグ】→【会話ふきだし】

  •    ] [ の間にテキストを入れる
  • 【半角スペース + r 】で対話風に

 

【AFFINGER5管理】→【会話・ファビコン等】からできること

 

【外観】→【カスタマイズ】→【オプションカラー】→【会話風ふきだし】からできること

  • 背景色と枠の色等の変更

 

今回は以上です。

 

最後まで読んでくれてありがとうございます!

\ AFFINGER公式サイト/

AFFINGER5の詳細を見る

-AFFINGER