アフィンガーで簡単にフキダシ会話を表示させる方法をご紹介します。
アフィンガーがバージョンアップされ「ver20161209」からデフォルトでフキダシ会話を作れるようになりました。
詳しい設定方法は下記記事をご参照ください。
プラグイン「Speech Bubble」を入れよう
このフキダシ会話は、WPプラグイン「Speech Bubble」を入れることによって簡単に導入できます。
ショートコードで会話形式の吹きだしを表示することができますし、吹き出しの種類もたくさん用意されていますよ。
以下の手順でSpeech Bubbleを追加してください。
管理画面⇒プラグイン⇒新規追加⇒Speech Bubble 追加
Speech Bubbleのフキダシの作り方
Speech Bubbleを使っての吹き出し会話の作り方です。
ライオンくんフキダシ会話ってなぁに？？ネコティーチャー今アナタがやってるものよ…
上記ショートコードを投稿や固定ページに入れることで、吹き出し会話を表示できます。
各パラメータの説明
type：フキダシの形を指定します。
フキダシタイプの種類については、たくさんあるので後述します。
subtype：アイコンを左に出すか、右に出すか指定します。
L1が左、R1が右です。
icon：アイコンを指定します。
ファイル名のみを記載します。
アイコン指定方法は後述します。
name：喋ってる人の名前を入れます。
subtype：会話文の尻尾を指定します。
1で会話文、2で思ってる事のようになります。
詳しくは、後述します。
会話文：ショートコード「speech_bubble」「/speech_bubble」の間に記入してください。
Speech Bubbleでアイコンを設定する方法
Speech Bubbleでは、アイコンを設定する方法だけが、ちょっと面倒です。
FTPソフトなどで直接「speech-bubble」の中にあるimgフォルダの中に画像をアップロードしなければなりません。
FTPで自分のサーバーに入って
ドメイン＞public_html＞wp-content＞plugins＞speech-bubble＞img
上記の場所にアイコン画像をアップロードしましょう。
アイコンを指定するときは、絶対パスや相対パスでなく、画像のファイル名のみを記載します。
Speech Bubbleで作れるフキダシの種類
「Speech Bubble」では紹介するのも大変なくらい吹き出しの見た目の種類が豊富です。
LINE風やfacebookチャット風の吹き出しもありますよ！
drop
std
fb
fb-flat
ln
ln-flat
pink
rtail
think
フキダシの尻尾変更方法
吹き出しの尻尾、喋ったり、心の中で思ったりしてるようなニュアンスを表す部分。
この部分だけ変更することも可能です。
こんな感じですね。
ネコティーチャーちょっと聞いてるの？！ライオンくんスヤスヤ…
subtype="L1" の数字を1にすると会話文
subtype="L2" にすると思っているような表現の尻尾にする事が出来ます。
Lは左向き、Rは右向きの尻尾になります。
Speech Bubbleのまとめ
１から作ると大変なフキダシ形式の会話文がこんなに簡単に実装できるとは、プラグインの作者に感謝です。
アイコン画像をアップロードする部分だけが少し面倒ですが、1度上げてしまえば後は簡単ですので、チャレンジしてみてください。
会話文を入れると、記事がトッツキやすくなること、うけあいですよ。
