WordPressでLINEみたいな吹き出し会話形式ができるプラグインを紹介するよ

118427177_624

こんにちは、ハワイのブロガー澤(@SawaAzumi)です。

以前、ハワイ在住の不動産投資家+毎日が日曜日の会のLEE会長と対談した事をブログにアップしました。 その時の記事はこちらです。

⇒「日米の不動産投資の違い」不動産投資家LEEさんと対談しました。

記事の文章中にLINEみたいな吹き出しで、会話形式のような形を使って対談を進めたのですが、多くの人から、どうやって吹き出し部分を作ったのか教えてほしいと連絡を頂きました。

ブログの場合、文章を単に並べるよりも会話形式で書いた方が見やすいですよね。 対話式での形式はLINEもFacebookも採用しているので、見る側も読むのに慣れていますからね。

今回は、WordPressでどのようなプラグインを使ったのか紹介致します~!

Speech Bubbleのプラグインを使おう

LINEみたいな吹き出し形式を実装するにはプラグインSpeech Bubbleをインストールしてください。

WordPress⇒プラグイン⇒新規追加と進んで「Speech Bubble」を検索してください。
2
Speech Bubbleが出てきたら「今すぐインストール」を押してインストールしてください。

WordPressにインストール出来たらプラグイン⇒インストール済みのプラグイン⇒Speech Bubble⇒プラグインを有効化すれば準備は完了です!

*プラグインは2年前に更新が止まっていて現行のWordpressのバージョンにはテストされていませんが、問題なく作動します。

Speech Bubbleを使って投稿をする方法は超簡単!

まずは以下のソースコードをコピペしてみてください。 こちらがデフォルトのキャラクターです。

A さん
こんにちは
B さん
アローハー

セリフを変更する場合は*****のソースコードの部分を変更、名前の部分はA さん、B さんの部分を変更してください。

試しに変更してみると。

こんにちはー
LEEさん
こんにちはー

キャラクター部分を変更する

これだけだと折角LINE風の会話式に変更できたのにキャラクターが変わらないと意味がありませんよね。

キャラクターを変更する場合は、WordPressのフォルダの中の「speech-bubble」の中の「img」フォルダに画像ファイルをアップしてください。 

大抵の場合はドメイン>public_html>wp-content>plugins>speech-bubble>img の順番になっているはずです。

使いたいキャラクターの画像に任意の画像名を付けて上記のimgファイルの中にアップしてください。

例えば、Leeさんの場合lee.jpg 私の場合はsawa.jpgです。 icon=の部分に任意で付けた画像ファイル名を変更したら以下のようになります。

こんにちはー
LEEさん
こんにちはー

吹き出しの種類の変更方法

Speech Bubbleのプラグインには吹き出し部分が全部で9種類用意されています。 自分のブログのデザインに合わせて変更してみてください。

変更する場合はコード部分の【type=”drop”】の部分を変更してください。デフォルトはdropになっています。

drop

こんにちはー
LEEさん
こんにちはー

std

これはシンプルですね。前回私が使用したタイプです。
?さん
なるほど、シンプルですね。

fb

これはPCのFacebookと同じタイプですね。 え? だれですか?
?さん
PCのFBは確かにこんな感じです。 え? 僕ですか?

fb-flat

スマホのFacebookをイメージした感じですね、、、そうです、貴方、誰ですか?
?さん
僕ですよ~アップの澤です~

ln

あ、アップの澤さんか~ビックリした~
アップ澤
もう~僕を忘れないで下さいよ~^^

ln-flat

これはLINE風ですね。
アップ澤
LINEは皆つかってるから、これはいいかもしれないね~ 

pink

女性向けのブログなどにこのピンクはいいかもしれませんね。
アップ澤
そうかな~ちょっと色が強すぎて、素人丸出しのデザインになりそう。

rtail

これもシンプルで見やすいですね。
アップ澤
僕は色が入っていない方が好きだな~ 

think

こいつアップで顔みると気持ち悪いな
アップ澤
僕ってよく見ると可愛い顔しているな~ムフフ 

どうですか? これだけ色々な種類があれば自分のブログのデザインに合った物を選べますよね。

人物の向きも変えられるよ

ソースのsubtypeの部分をL1にすればキャラクターが左側になります。

こうすれば2人とも左側になるよ。 え?だれ?
?
僕だよ~お風呂上りの気持ち悪い髪形している澤だよ~ 

今度は逆にR1にすれば2人とも右側にいきます。

あ、なんだお風呂上りの気持ち悪い髪型の澤さんか~
お風呂上りの気持ち悪い髪型の澤
はい~先ほどお風呂から出て自撮りしてたら、子供が僕を哀れむ目で見てました。

このように右左を変えてキャラクターを変更すれば2人以上の会話形式やインタービュー形式のブログを作成する事も簡単です。

こんな感じで、対話形式を使ってブログで紹介できるのは面白いですよね、今後はハワイに住んでいる人達とSpeech Bubbleのプラグインを使って対談した記事を作ってきたいと思っています^^

以下の4つの記事も必読の記事です!

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

シェアありがとうございます