【使い方】ブログにLINEの様な会話形式の吹き出しを!Speech bubble/WordPressプラグイン

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

会話形式の吹き出しを実装できるSpeech bubbleについて、インストール方法を書きましたが、実際にニーズがあるだろうなと思われる吹き出し風会話としての使い方についてご紹介します。

 

ちょっと記事が長くなったので3部構成に分けましたが、必要に応じてご覧いただければと思います。
Speech bubbleインストール方法 / Speech bubble使い方 / Speech bubbleアイコンの変更方法

Speech bubble(会話形式風吹出しプラグイン)の使い方

使い方と言ってもそれほど説明する内容はありません。基本的な使い方とLINEやFacebook風といったデザインの設定変更の説明になります。

基本的にショートコードを設置するだけ…です。
ご自身のブログにとりあえずコレを貼り付けてみてください。

[speech_bubble type="std" subtype="a" icon="1.jpg" name="ボブ" ]Hello!![/speech_bubble]
[speech_bubble type="std" subtype="b" icon="2.jpg" name="ビル" ]Yah!![/speech_bubble]

Speech bubbleのインストールが終わっていれば↓の用になるはずです

ボブ
Hello!!

ビル
Yah!!

[speech_bubble] と [/speech_bubble] の間に入れた文字が会話の中身になります。typeとかiconとか書いているものはそれぞれの設定です。
何も設定せずにこんな風に書くとこうなります。

[speech_bubble]おはようございます![/speech_bubble]

no name
おはようございます!

ちょちょっとやればすぐに変わるのですが、色々と設定があるので1つずつやってみますね。

左側と右側を変更したい

まずは会話にするために。
LINEやFacebookだと自分が右側で他の人が左側になりますよね。それを変更する方法について。

「subtype」で変更します。

[speech_bubble type="std" subtype="***" icon="1.jpg" name="ボブ" ]Hello!![/speech_bubble]
上記の「***」部分を変えると左右の位置変更の他に「コメント風」「考えてる風」の4つの変化があります。

L1かa:左側にコメント風

[speech_bubble subtype="L1"]おはようございます!!!![/speech_bubble]

no name
おはようございます!!!!

R1かb:右側にコメント風

[speech_bubble subtype="R1"]あぁ、おはよう…[/speech_bubble]

no name
あぁ、おはよう…

L2かc:左側に考えてる風

[speech_bubble subtype="L2"]なんか元気ないなぁ..[/speech_bubble]

no name
なんか元気ないなぁ..

R2かd:右側に考えてる風

[speech_bubble subtype="R2"]朝から元気だなぁ…(=_=)[/speech_bubble]

no name
朝から元気だなぁ…(=_=)

わかりますかね?右左の変化は一目瞭然ですが、「コメント風」と「考えてる風」はよく見てみると吹き出す部分が違います。

LINEやFacebook風など見た目を変更する方法

[speech_bubble type="●●●" subtype="a" icon="1.jpg" name="ボブ" ]Hello!![/speech_bubble]
上記の「●●●」部分を変えるとdrop・std・fb・fb-flat・ln・ln-flat・pink・rtail・thinkの9つ変化があります。

[drop]:Speech bubble影付きふきだし

ボブ
Hello!!

ビル
Yah!!

[std]:Speech bubbleシンプル

ボブ
Hello!!

ビル
Yah!!

[fb][fb-flat]:Speech bubble Facebook風

[fb]ノーマル版

ボブ
Hello!!

ビル
Yah!!

[fb-flat]フラットデザイン版

ボブ
Hello!!

ビル
Yah!!

[ln][In-flat]:Speech bubble LINE風

[ln]ノーマル版

ボブ
Hello!!

ビル
Yah!!

[In-flat]フラットデザイン版

ボブ
Hello!!

ビル
Yah!!

[pink]:Speech bubbleピンク装飾

冒頭でもお見せしたいたってシンプルなパターン。

ボブ
Hello!!

ビル
Yah!!

[rtail]:Speech bubbleブルー装飾

ボブ
Hello!!

ビル
Yah!!

[think]:Speech bubble思い風装飾

ボブ
Hello!!

ビル
Yah!!

喋ってる人の名前を変更する方法

[speech_bubble type="std" subtype="a" icon="1.jpg" name="▲▲▲" ]Hello!![/speech_bubble]
上記の「▲▲▲」部分を変えると名前が変わります。これまでボブとかビルになっていた部分です。

明智光秀
敵は本能寺に在り

織田信長
是非に及ばず

インストール方法や使い方から、アイコンの変更方法まで3つの記事でご紹介しています。

この記事は元々一つの記事で書いていたのですが、長くなってしまい見づらいので3つの記事に分けました。

  1. Speech bubbleインストール方法
  2. Speech bubble使い方
  3. Speech bubbleアイコンの変更方法
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメント

コメントは停止中です。