WordPress上でLINE風の吹き出し会話を作る方法!

アリスです。

 

WP上で吹き出し会話ができるプラグイン「Speech Bubble」の紹介をします

 

[speech_bubble type=”std” subtype=”a” icon=”1.jpg” name=”A san” ]吹き出しに自由にセリフを入れることが可能[/speech_bubble]
[speech_bubble type=”std” subtype=”b” icon=”2.jpg” name=”B san” ]デフォルトはこんな感じ[/speech_bubble]

LINE風の吹き出しがこれ↓。
名前やアイコンも自由に設定できる。
[speech_bubble type=”ln” subtype=”b” icon=”1.jpg” name=”ジョナサン” ]君はディオ・ブランドーだね[/speech_bubble]
[speech_bubble type=”ln” subtype=”a” icon=”2.jpg” name=”ディオ” ]そういう君はジョナサン・ジョースター[/speech_bubble]

左右のポジションも自由自在。
[speech_bubble type=”ln” subtype=”d” icon=”1.jpg” name=”亀” ]アニメ派のヤツには
若干のネタバレ注意だぜ・・・[/speech_bubble]
[speech_bubble type=”ln” subtype=”b” icon=”2.jpg” name=”ディアボロ” ]オレのそばに近寄るなああーーーーーーーーーッ[/speech_bubble]

やり方は簡単。
下記のショートコードを貼って中身を編集するだけ。

スポンサーリンク
スポンサーリンク

type の種類

type属性に指定する値によって、吹き出しのデザインやアイコンの形が変わります。

std (デフォルト)

[speech_bubble type=”std” subtype=”a” icon=”1.jpg” name=”ジョナサン” ]なっ!
何をするだァ―――ッ
ゆるさんッ![/speech_bubble]
[speech_bubble type=”std” subtype=”b” icon=”2.jpg” name=”ジョージ” ]息子がつかまるのを見たくないはない・・・[/speech_bubble]
[speech_bubble type=”std” subtype=”c” icon=”1.jpg” name=”ジョナサン” ]なっ!
何をするんだァ―――ッ
ゆるさんッ![/speech_bubble]
[speech_bubble type=”std” subtype=”d” icon=”2.jpg” name=”ジョージ” ]息子がつかまるのを見たくはない・・・[/speech_bubble]

fb (facebook風)

[speech_bubble type=”fb” subtype=”a” icon=”1.jpg” name=”エリナ” ]きちっとやつけなさい![/speech_bubble]
[speech_bubble type=”fb” subtype=”b” icon=”2.jpg” name=”タイトル” ]ジョナサン 最後の賭け[/speech_bubble]
[speech_bubble type=”fb” subtype=”c” icon=”1.jpg” name=”エリナ” ]きちっとやっつけなさい![/speech_bubble]
[speech_bubble type=”fb” subtype=”d” icon=”2.jpg” name=”タイトル” ]ジョセフ 最後の賭け[/speech_bubble]

fb-flat

[speech_bubble type=”fb-flat” subtype=”a” icon=”1.jpg” name=”花京院” ]わたしの幽波絞で![/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”b” icon=”2.jpg” name=”承太郎” ]うっおとしいぜッ!![/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”c” icon=”1.jpg” name=”花京院” ]わたしの幽波紋で![/speech_bubble]
[speech_bubble type=”fb-flat” subtype=”d” icon=”2.jpg” name=”承太郎” ]うっとおしいぜッ!![/speech_bubble]

ln (LINE風)

[speech_bubble type=”ln” subtype=”a” icon=”1.jpg” name=”アヴドゥル” ]魔法使いの赤(マジシャンズ・レッド)[/speech_bubble]
[speech_bubble type=”ln” subtype=”b” icon=”2.jpg” name=”花京院” ]法皇の緑(ハイエロファント・エメラルド)[/speech_bubble]
[speech_bubble type=”ln” subtype=”c” icon=”1.jpg” name=”アヴドゥル” ]魔術師の赤(マジシャンズ・レッド)[/speech_bubble]
[speech_bubble type=”ln” subtype=”d” icon=”2.jpg” name=”花京院” ]法皇の緑(ハイエロファント・グリーン)[/speech_bubble]

ln-flat

[speech_bubble type=”ln-flat” subtype=”a” icon=”1.jpg” name=”テニール船長” ]星の白金(スター・シルバー)[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”b” icon=”2.jpg” name=”ホルホース” ]「9柱神」[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”c” icon=”1.jpg” name=”テニール船長” ]星の白金(スター・プラチナ)[/speech_bubble]
[speech_bubble type=”ln-flat” subtype=”d” icon=”2.jpg” name=”ホルホース” ]「9栄神」[/speech_bubble]

pink

[speech_bubble type=”pink” subtype=”a” icon=”1.jpg” name=”承太郎” ]おれの名は空条承太郎
なんつーか血縁上は おまえの
「叔父」ってやつになるのかな
・・・奇妙だが・・・[/speech_bubble]
[speech_bubble type=”pink” subtype=”b” icon=”2.jpg” name=”仗助” ]ンなこあ―― 大した事じゃあ ねェ――だろッ![/speech_bubble]
[speech_bubble type=”pink” subtype=”c” icon=”1.jpg” name=”承太郎” ]おれの名は空条承太郎
なんつーか血縁上は おまえの
「甥」ってやつになるのかな
・・・奇妙だが・・・[/speech_bubble]
[speech_bubble type=”pink” subtype=”d” icon=”2.jpg” name=”仗助” ]ンなこた―― 大した事じゃあ ねェ――だろッ![/speech_bubble]

rtail

[speech_bubble type=”rtail” subtype=”a” icon=”1.jpg” name=”仗助” ]でらあっ[/speech_bubble]
[speech_bubble type=”rtail” subtype=”b” icon=”2.jpg” name=”ジョルノ” ]違う人だ・・・ミスタ・・・[/speech_bubble]
[speech_bubble type=”rtail” subtype=”c” icon=”1.jpg” name=”仗助” ]どらあっ[/speech_bubble]
[speech_bubble type=”rtail” subtype=”d” icon=”2.jpg” name=”ジョルノ” ]違うんだ・・・ミスタ・・・[/speech_bubble]

drop

[speech_bubble type=”drop” subtype=”a” icon=”1.jpg” name=”リゾット” ]自転車の音なんかではない・・・[/speech_bubble]
[speech_bubble type=”drop” subtype=”b” icon=”2.jpg” name=”イルーゾォ” ]その「鏡」も もうおれがいただくぞッ![/speech_bubble]
[speech_bubble type=”drop” subtype=”c” icon=”1.jpg” name=”リゾット” ]自動車の音なんかではない・・・[/speech_bubble]
[speech_bubble type=”drop” subtype=”d” icon=”2.jpg” name=”イルーゾォ” ]その「鍵」も もうおれがいただくぞッ![/speech_bubble]

think

[speech_bubble type=”think” subtype=”a” icon=”1.jpg” name=”エンポリオ” ]それだッ!![/speech_bubble]
[speech_bubble type=”think” subtype=”b” icon=”2.jpg” name=”ジョニィ父” ]ニコラスはおませのせいで死んだのだ[/speech_bubble]
[speech_bubble type=”think” subtype=”c” icon=”1.jpg” name=”エンポリオ” ]それたッ!![/speech_bubble]
[speech_bubble type=”think” subtype=”d” icon=”2.jpg” name=”ジョニィ父” ]ニコラスはおまえのせいで死んだのだ[/speech_bubble]

スポンサーリンク

subtype の種類

subtypeでは、左右のポジションや吹き出しの形を指定できる。
指定の方法はそれぞれ3種類あり、どれを使っても良い。

[speech_bubble type=”std” subtype=”a” icon=”1.jpg” name=”A san” ]L1、left1、a のいずれかを指定するとこんな感じ[/speech_bubble]
[speech_bubble type=”std” subtype=”b” icon=”1.jpg” name=”A san” ]R1、right1、b のいずれかを指定するとこんな感じ[/speech_bubble]
[speech_bubble type=”std” subtype=”c” icon=”1.jpg” name=”A san” ]L2、left2、c のいずれかを指定するとこんな感じ[/speech_bubble]
[speech_bubble type=”std” subtype=”d” icon=”1.jpg” name=”A san” ]R2、right2、d のいずれかを指定するとこんな感じ[/speech_bubble]

スポンサーリンク

icon の指定

アイコン画像を指定するには、「wp-content/plugins/speech-bubble/img/」に画像を入れておき、icon属性でファイル名を指定するだけ。
アイコン画像は表示される際に正方形に圧縮されるため、縦横の比率には注意。

スポンサーリンク

name の指定

name属性では、話している人の名前を指定できる。
名無しにしたい場合は、nameを空欄にするれば良い。
※name属性を消すと、「no name」という名前になってしまう。

スポンサーリンク
スポンサーリンク
ブログ運営



アリスと奇妙な仲間たち
タイトルとURLをコピーしました