★このサイトにはPRが含まれます★

★この記事にはPRが含まれます★

アフィンガー4応用編

アフィンガーで超簡単に、フキダシ会話を表示させる方法

投稿日:2016年12月1日 更新日:

アフィンガーで簡単にフキダシ会話を表示させる方法をご紹介します。

ライオンくん
フキダシ会話ってなぁに??

ネコティーチャー
今アナタがやってるものよ…

 

アフィンガーがバージョンアップされ「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

ネコティーチャー
type="drop"で、このフキダシよ
ライオンくん
雲ぽいフキダシが作れるね

std

ネコティーチャー
type="std"で、このフキダシよ
ライオンくん
シンプルでいいねー

fb

ネコティーチャー
type="fb"で、このフキダシよ
ライオンくん
facebookのチャットぽくなるね

fb-flat

ネコティーチャー
type="fb-flat"で、このフキダシよ
ライオンくん
facebookのチャットがフラットデザインになってカッコよくなったねー

ln

ネコティーチャー
type="ln"で、このフキダシよ
ライオンくん
LINEだー!

ln-flat

ネコティーチャー
type="ln-flat"で、このフキダシよ
ライオンくん
LINEがフラットになった!

pink

ネコティーチャー
type="lpink"で、このフキダシよ
ライオンくん
ピンクいね

rtail

ネコティーチャー
type="rtail"で、このフキダシよ
ライオンくん
シンプルでかっこいい

think

ネコティーチャー
type="think"で、このフキダシよ
ライオンくん
こいつ直接脳内に・・・

 

フキダシの尻尾変更方法

吹き出しの尻尾、喋ったり、心の中で思ったりしてるようなニュアンスを表す部分。

この部分だけ変更することも可能です。

ネコティーチャー
ちょっと聞いてるの?!
ライオンくん
スヤスヤ…

こんな感じですね。

ネコティーチャー
ちょっと聞いてるの?!
ライオンくん
スヤスヤ…

subtype="L1" の数字を1にすると会話文
subtype="L2" にすると思っているような表現の尻尾にする事が出来ます。

Lは左向き、Rは右向きの尻尾になります。

ネコティーチャー
左向きで思ってるような尻尾は「subtype="L2"」よ
ネコティーチャー
右向きで思ってるような尻尾は「subtype="R2"」よ
ライオンくん
分かったよー

 

Speech Bubbleのまとめ

1から作ると大変なフキダシ形式の会話文がこんなに簡単に実装できるとは、プラグインの作者に感謝です。

アイコン画像をアップロードする部分だけが少し面倒ですが、1度上げてしまえば後は簡単ですので、チャレンジしてみてください。

会話文を入れると、記事がトッツキやすくなること、うけあいですよ。

購入特典「オリジナル子テーマ」付きアフィンガー5

最新版WING(アフィンガー5)に対応した、オリジナル子テーマ付き購入特典は上記のページをご参照ください。
  • この記事を書いた人
アバター画像

ネコティーチャー

WordPressのカスタマイズが好きです。 魔改造したりプラグインやテーマを作ったりしています。

-アフィンガー4応用編
-, , ,

Copyright© WING(アフィンガー5)カスタマイズ講座 , 2024 All Rights Reserved.