【WordPress】LINEやFaceBookぽくブログに表示させるプラグインSpeech Bubbleが簡単で便利

LINE640
 

車掌秋葉仁

こんにちは 秋葉仁です!
 
ブログの記事内で会話を書く時ってありませんか?


 
そんな時の書き方として例えば
 
様奥:「ちょっと電話くれる?」
 
秋葉:「電話壊れたの?」
 
様奥:「おい!電話が欲しい訳じゃなくて・・・」
 
様奥:「電話してくれる?」
 
秋葉:「プー・プー・プー」
 
様奥:「なに?」
 
秋葉:「話し中」
 
様奥:「しばき倒す!」
 
こんな風に書いたりしてませんでした?
 
決して悪いわけではないのですが、若干読みにくいのと面白みに欠けますよね。
 
このような会話をブログで書く時にどのようにしたら面白く表現できるのだろう?って考えていたのです。
 
で〜やっぱ誰もが見慣れていて会話としての表現ができるのが「LINE」とか「FaceBook」とかの表示方法なのではないだろうか?
 
そこで、ブログ上でも同じような表現ができないかな?って探していたのですが・・・
 
なんと!
 
プラグインで実現出来ちゃったんです! しかも簡単に。
 
 

LINE ぽくブログに表示させる「Speech Bubble」

 

様奥
あんたどこにいるの?
様奥
おい!
様奥
ちょっと電話くれる?
秋葉仁
電話壊れたの?
様奥
おい!電話が欲しい訳じゃなくて・・・
様奥
電話してくれる?
秋葉仁
プー・プー・プー
様奥
なに?
秋葉仁
話し中
様奥
しばき倒す!

 
 
これ! どうですか?
 
plug
 
この「Speech Bubble」プラグインの特徴は何と言っても簡単!
 
プラグインの追加から「Speech Bubble」を検索し、インストールします。
特に設定もないので有効化したら終了です!
 

車掌秋葉仁

使い方は簡単!
本文にショートコードを書くだけ

様奥
簡単に表示させること出来るの?
秋葉仁
すごく簡単だし いい感じでしょ〜

 
上記のLINEっぽい表示は下記のショートコードだけ

 

ショートコードの説明

 
left640
 

 アイコンを変更する

 
FFFTP(Win)やCyberduck(Mac)などの FTP ソフトで、/wp-content/plugins/speech-bubble/img/ に表示したい画像をアップロードします。
 
あとは「icon=”ファイル名” 」に画像ファイル名を記述すれば表示されるようになります。
 

 名前を変更する

 
「name=”名前”」 に表示したい名前を記述するだけです。
 

 左右どちらに表示するか指定する

 

 左側は subtype=”L1″、右側は subtype=”R1″

様奥
左側(L1)からの吹出し
秋葉仁
右側(R1)からの吹出し

 会話表示途中で左右を入れ替えても大丈夫です

様奥
R1にすると左側からの吹出しが右に
秋葉仁
L1にしたら右側からの吹出しが左に

 

 吹出しのデザインを変更する

 
「type=”吹出し”」を変更することで、全9種類( ln(LINE風), ln-flat, fb(FaceBook風), fb-flat, drop, std, pink, rtail, think)の吹出しのデザインを変更することができます。
 

 type=”ln” (LINE風)

様奥
なんか見慣れた感じだけど?
秋葉仁
LINEっぽい感じだけどボタンが作り込んであるからちょっと立体感があるでしょ?

 type=”ln-flat”

様奥
あら、これはシンプルで優しい感じね
秋葉仁
白い背景でも馴染んでるでしょ? シンプルいずベスト!

 type=”fb” (FaceBook風)

様奥
この感じはよく見るけど・・・なんだっけ?
秋葉仁
FaceBookメッセージでの表示形式っぽいよね。 これもスッと会話が入ってきていいかもね。

 type=”fb-flat”

様奥
あっ! こっちの方がfacebookっぽいのかな~?
秋葉仁
そうだね。 ちょっと右側の吹き出しの背景色が濃い感じはするけど…?

 type=”drop”

様奥
なんか奥行きのある感じね。 これは画像なのかな?
秋葉仁
これは画像じゃないよ。CSSで実現してるんだよ。シャドー効果が出てるね。

 type=”std”

様奥
これ…なんか味気ない
秋葉仁
これ、カスタマイズしやすいテンプレートみたいだよね。

 type=”pink”

様奥
これは女性好み!
秋葉仁
女子会の会話を表示する時とかに向いてるかもね。

 type=”rtail”

様奥
ポップな感じね。
秋葉仁
説明とか解説とかのポイントにいいかもね。

 type=”think”

様奥
声にならない心の声っぽい。 秋葉!たまには仕事しろ
秋葉仁
心の声が表示されてますけど…(怖)

 
 

 吹き出しの組み合わせも可能

 
吹き出しの組み合わせも自由なので、複数人の会話などで効果的かも!
 

様奥
ところでなんであたしのアイコンが鬼のお面なのよ!
秋葉仁
あれ? 似てると思ったんだどな~?
様奥
堀北真希に似てるっていわれるんだけど
秋葉仁
そんなわけないだろ! 鏡見てみろ!

 
 

「Speech Bubble」を使ってみての感想

 

車掌秋葉仁

実際に「Speech Bubble」を使ってみての感想ですが、やはり見慣れた「LINE」と同じような表現が出来るのは面白いですね。
「LINE」の面白いやり取りなどをスクショでもいいのかもしれませんが、このように表示出来ることで少しは検索にも役立つのかな〜? なんて思っています。
 
プラグインをたくさん使うとサイトが重たくなるということもよく聞くので出来れば「CSS」で表示してやろう!と・・・考えていたのですが、素人には難しすぎました(笑)
 
この「Speech Bubble」のショートコードは「addQuicktag」というプラグインを使い、すぐに取り出せるよう登録しておきました。
さすがにこれだけのコードを覚えておける自信がなかったので・・・(笑)
 
ちょっと変わった表現で楽しんでみませんか?
参考になりましたでしょうか?
 
ではまた!

 
 

HOME

管理人

秋葉仁

秋葉原で生まれて育ち、会社も秋葉原で設立し、店舗も秋葉原という秋葉原だけの生活。そんな秋葉 仁は大の機械ヲタク。 ビデオカメラ、デジタルカメラ、撮影機材、DJ機材、そしてPC!とにかく機械ならば何でもいい状態。 そんな機械ヲタクが YouTube などを使い様々な機械を紹介。 少しでも購入前の検討材料になれば幸いです。 ぜひともよろしくお願い致します。

カラーコード表

月別

秋葉のおすすめ