AFFINGER6

アフィンガー6(AFFINGER6)の会話吹き出しの使い方・設定・カスタマイズ方法

2021年7月14日

アフィンガー6(AFFINGER6)の会話吹き出しの使い方・設定・カスタマイズ方法

 

ぎもんさん
アフィンガー6(AFFINGER6)を使っているけど、会話吹き出しを使いたい!設定やカスタマイズはどうすれば良いのかな?

 

こんな風に思っている方は必見です。

 

ブログ記事を見やすくしたりする効果がある吹き出し会話。
また、普通のテーマであれば吹き出し機能はプラグインを使わないと実装できないものですが、アフィンガー6(AFFINGER6)ではデフォルトで備わっていることから余分にプラグインを入れずに設・使用できる仕様になっています。

 

ともき
プラグインを使わないということは、アップデート時の不具合や、サイトの脆弱性発生のリスク回避・サイトが重くなることを回避できるなどメリットたくさん!

 

ということで、当記事ではアフィンガ―6(AFFINGER6)でできる吹き出し会話について、使い方と設定方法、色の変更などのカスタマイズ方法まで一気にご紹介します。

 

 

注意事項

今回の設定方法はあくまでも「手を加えすぎていないアフィンガーテーマの場合」のみ当てはまる方法です。
fanctions.phpや追加CSSでコードを書き換え・加筆して調整されていた場合は当記事でご紹介する方法でもうまく反映されない場合もあるのでご了承下さい。

 

 

アフィンガー6の会話吹き出しの概要

アフィンガー6の会話吹き出しの概要

アフィンガー6(AFFINGER6)の会話吹き出しは、初期の状態では8個までアイコンを設定し使用することが可能です。

 

ともき
喋っているように見える会話吹き出しが、
最大8種類設定できますよ。
なるほどくん

 

会話吹き出しについて、色を変えたり枠線をつけたり、アイコンの画像を大きめにしたりすることも可能です。

 

ちなみに会話吹き出しの背景色については8種類別々の色を設定することができますよ。

 

 

アフィンガー6で吹き出し会話を使うための設定方法

アフィンガー6で吹き出し会話を使うための設定方法

 

アフィンガー6(AFFINGER6)で吹き出し会話を使うための設定方法は、次の流れに沿って進めるとOK。

 

アフィンガー6で吹き出し会話を使うための設定方法

  1. 管理画面から会話吹き出しの設定画面に進む
  2. 吹き出しに使うアイコン画像と名前を設定する
  3. 吹き出しを記事に表示させる

順に詳しく解説します。

 

 

吹き出しの設定方法その1管理画面から会話吹き出しの設定画面に進む

 

まずは吹き出しを使うために、アイコン画像などの設定を行いましょう。
【管理画面】→【AFFINGER管理】→【会話アイコン】の順番でクリックして下さい。

 

吹き出しの設定方法その2吹き出しに使うアイコン画像と名前を設定する

 

次は、アイコンの名前や画像を設定してみましょう。

 

アフィンガー6(AFFINGER6)は吹き出しを最大8パターンまで登録することができるので、使いたい種類の数だけ登録するとよいです。
下の画像を参考に吹き出しの設定を行いましょう。

 

最後にページ内の下にある【Save】をクリックすると設定完了です。

 

ともき
使用する画像は100px以上の正方形サイズのものが推奨!

 

 

吹き出しの設定方法その3吹き出しを記事に表示させる

 

記事に表示させる方法もとっても簡単!

ともき
ブロックエディタとクラシックエディタの両方で表示させる方法を解説します。

 

まずブロックエディタのほうから。

吹き出し設定方法

 

左側のメニューを「ブロック」に設定しスクロールすると「簡易会話A」「簡易会話B」というものが現れます。
これをクリックすると、エディタに反映されるので、あとは会話吹き出しで表示したいテキストを入力すればOK!

 

ともき
この方法だと吹き出しの1と2しか使えません。
3~8まで使いたい場合は【ブロックの追加】→【クラシック】→【タグ】→【会話ふきだし】の順番で選択すると全部使うことができますよ。

 

他には、さらに簡単な方法として、ブロックエディタであれば投稿画面で「/STINGER:会話吹き出し」と選択すれば使えます。
こっちの方が簡単ですぐに使えるのでおすすめ。

 

次に、クラシックエディタを使用している場合を解説します。
ビジュアルエディタで【タグ】→【会話ふきだし】の順番で選択すると会話1~8までを選べるので、表示したいものをクリックして下さい。

 

アフィンガー5の吹き出しを記事に表示させる方法

 

そうすると記事にショートコードが現れます。
ショートコードの間に自由にテキストを入れてみましょう。

 

ともき
正確にできていれば、ページを公開したり更新すると記事に会話吹き出しが設定が表示されています。
設定したらすぐ確認してみましょう。

 

 

 

アフィンガー6の吹き出し会話のカスタマイズ方法

アフィンガー6の吹き出し会話のカスタマイズ方法

 

ここからは、会話吹き出しの見た目(背景色や枠線など)をデフォルトからカスタマイズする方法をご紹介します。

 

 

AFFINGER6会話吹き出しカスタマイズ方法その1アイコンを少し動かす

 

アフィンガー6(AFFINGER6)では吹き出しのアイコンをちょっと動かして目立たせることができます。

 

設定方法

  1. 【AFFINGER管理】をクリック
  2. 【会話アイコン】をクリック
  3. 「会話アイコンを少し動かす」にチェックを入れる
  4. 「Save」をクリック

この方法でOK!

アイコンが目に止まるように動くようになるので、注目させたい方は是非お試し下さい。

 

 

AFFINGER6会話吹き出しカスタマイズ方法その2アイコンを少し大きく表示させる

 

会話吹き出しのアイコンについて、少し大きく表示させることも可能。

 

設定方法

  1. 【AFFINGER管理】をクリック
  2. 【会話アイコン】をクリック
  3. 「会話アイコンを少し大きく」にチェックを入れる
  4. 「Save」をクリック

この方法でOK!

 

画像は80px以上が推奨であり、80pxより小さい画像を設定すると、画像が荒くなってしまうのでご注意ください。

 

 

AFFINGER6会話吹き出しカスタマイズ方法その3吹き出しの背景色を変更する

管理画面の【外観】→【カスタマイズ】→【オプション(その他)】→【会話ふきだし】で背景の色を自由に変更することができます!

メモ

文字の色が黒なので、背景色は黒が映えるよう薄めの色を選ぶのがおすすめです。

 

 

カスタマイズ方法その3アイコンのまわりの枠線を消す

 

管理画面の【外観】→【カスタマイズ】→【オプション(その他)】→【会話ふきだし】で、「アイコンの枠線を消す」にチェックを入れると一瞬で枠線を消すことができます。

 

 

カスタマイズ方法その4吹き出しを角丸にしないでカクカクにする

 

管理画面の【外観】→【カスタマイズ】→【オプション(その他)】→【会話ふきだし】で「ふきだしを角丸にしない」にチェックを入れると一瞬で枠線を消すことができます。

 

 

カスタマイズ方法その5吹き出しに枠線をつける

 

管理画面の【外観】→【カスタマイズ】→【オプション(その他)】→【会話ふきだし】で「ボーダーデザインタイプ(枠線のみ)に変更」にチェックを入れると枠線が付きます。

 

ともき
ふつうは2px、太めの線が好みの方は3pxのほうにチェックをいれてみましょう。

 

枠線を設定すると、【ボーダーデザインタイプ(2px)時の背景色】で設定した色が背景色になり、【全体又は会話1の背景色】で設定した色が枠線の色になるので、お好みの色にカスタマイズしてみましょう。

 

ともき
背景が薄い色で目立ちにくい場合は、枠線を設定すると良いですよ。

 

 

アフィンガー6の吹き出し会話で対話っぽく見せる方法

アフィンガー6の吹き出し会話で対話っぽく見せる方法

 

AFFINGER6で会話吹き出しを使い対話っぽく見せる方法は、次の2点を意識するだけでOK!

 

対話っぽく見せる方法

  • 質問→回答の流れを作る
  • 左側表示と右側表示を使い分ける

 

ぎもんさん
会話吹き出しを使って会話しているように見せたいんだけど、どうすればいいかな?
このように、質問→回答の流れで会話吹き出しを2連続で使うと良いですよ。
ともき

 

また、「左側表示と右側表示を使い分ける」という点についても文章の通り。
左右交互に並べることで言葉が行き交っているように見えるので、対話感が増します。

 

吹き出しはデフォルトで左側に配置されるので、右側に配置したい場合はショートコード内に「半角スペース + r」を入れましょう。

アフィンガーの吹き出しで右寄せにする方法

 

この2つの方法を試すとこのようになります。

 

こまりくん
アフィンガーの設定で困ったことがあるから誰か教えて欲しい...

 

それなら僕に聞いて!分かる範囲で何でも答えるよ!
ともき

 

ぎもんさん
吹き出し会話を記事に盛り込むメリットとデメリットが知りたいな

 

それならこの記事の続きに書いてるから是非見て!
ともき

 

こんな感じでテンポよく話を進めることができるので、ご興味のある際は是非お試し下さい。

 

吹き出し会話を記事に盛り込むデメリット

吹き出し会話を記事に盛り込むデメリット

 

当記事ではアフィンガー6(AFFINGER6)で吹き出し会話をする方法についてご紹介してきましたが、実は吹き出し会話にはデメリットがあります。

 

それはズバリ「使いすぎると内容が薄くなりがち」になるということ。
理由は、ずっと対話形式で進めていくとテンポよく話題が進むが補足説明などが抜けがちになり、内容が薄くなる傾向にあるからです。

 

しっかりと内容を伝えたい時は文章で正確に伝えることを意識しましょう。

 

 

吹き出し会話を記事に盛り込むメリット

会話吹き出しを記事に盛り込むメリット

 

吹き出し会話を記事に盛り込むメリットは次の3点。

 

吹き出し会話を記事に盛り込むメリット

  • 記事が見やすくなる
  • 堅苦しさが減る
  • 伝えたいことがわかりやすく伝わる

 

「記事が見やすくなる」と「堅苦しさが減る」は文字の通りなのですが、「伝えたいことがわかりやすく伝わる」だけ少し補足説明します。

 

これは比較するととてもわかりやすいのですが、例えば

 

朝のジョキングは清々しい気分になるのでオススメです。
体力もつくし健康にも良いし一石二鳥ですね!

 

この場合だと「体力もつくし健康にも良いし一石二鳥」という具体的なメリットがあまり伝わらないですよね。

 

朝のジョキングは清々しい気分になるのでオススメです。

ともき
体力もつくし健康にも良いし一石二鳥ですね!

 

一方こちらは吹き出しを使って目立たせてるので、よりわかりやすく伝わる可能性が高まっています。

 

使いすぎに注意して有効活用しましょう!

 

アフィンガー6をお使いの方は会話吹き出しを是非利用しよう

アフィンガー6の吹き出し会話を積極的に利用しよう

 

吹き出し会話は記事を見やすくしたり内容をわかりやすく伝えたりなどメリットたくさんなので、この機会に是非使ってみることをおすすめします!

 

アフィンガー6(AFFINGER6)ではプラグインも不要で設定も簡単なので、まだ使用していない方は是非実装してみましょうね。

 

 

最後に:アフィンガー6を持っていない方へのメッセージ

 

当記事をご覧いただいている方で、6(AFFINGER6)をまだ入手していない方へ、お得に入手する方法をご紹介いたします。

 

アフィンガー6(AFFINGER6)を購入する際は、絶対に特典付きでお得に購入することをおすすめします。

 

アフィンガー6(AFFINGER6)は特定の個人が用意したリンクから購入した場合、公式で購入するものと同じものが手に入ることに加えて「個人が用意したオリジナル特典」がもらえます。

 

つまり公式で購入するよりも確実にお得。

 

「特定の個人が用意したリンク」についてですが、もちろん私からもでもご用意しております。

 

副業ブログで月収30万稼いだノウハウや、初期設定サポートコンサル、キーワード選定や案件選定などの方法など、ブログ運営する上で役立つものばかりを12個も特典としてご用意いたしました。

 

特典付きで入手したい方は、下記リンクをクリックした先のページで購入すると特典も付与されますので、ご興味のある方はどうぞ。

 

通常版はこちら↓

\今なら当サイト限定12特典付き/

AFFINGER6の詳細や購入はこちら

 

EX版はこちら↓

\特典付きでEX版が手に入る/

AFFINGER PACK3の詳細や購入はこちら

 

特典についての詳細や使ってみた感想を知りたい方は、AFFINGER6とは?豪華特典付きレビューや詳細・使用感などを徹底紹介!の記事で詳しくまとめてますので是非目を通して頂けたらと思います。

 

CHECK!!
AFFINGER6の豪華10特典付きレビュー!詳細や使用感などを徹底紹介!
AFFINGER6(アフィンガー6)豪華12特典付きレビュー!詳細や使った感想を紹介

続きを見る

 

また、通常版のAFFINGER6(ACTION)にさらに内容が強化されたEX版や、専用プラグインとEX版がセット販売されている「AFFINGER6 PACK3」についても同様に特典付きで入手できます。
詳細は【AFFINGER PACK3】アフィンガー6 EXの豪華12特典付きレビュー!使った感想も公開に記載しているので、こちらもご興味のある方はぜひ覗いてみてください。

 

CHECK!!
AFFINGER6のEX版ってどんな感じ? 特典付きレビューや使ってみた感想を公開!
【AFFINGER PACK3】アフィンガー6 EXの豪華12特典付きレビュー!使った感想も公開

続きを見る

当記事が参考になれば幸いです。

 

-AFFINGER6
-