Speech Bubbleで記事に遊び心!?記事をLINE風会話形式に出来る

まさ
皆さんこんにちは!
太郎
誰・・・?
まさ
管理人のまさですよ!

 

どうでしょうか?いつもとはちょっと変わったオープニングになっているかと思います(お決まりの挨拶自体いつもしていないんですが)。

 

今回ご紹介するプラグインは、このようにLINEやFacebookのようなチャット風に記事を書くことができるプラグインです。

 

このような吹き出しを使って「先生役」と「生徒役」に分けているブログなどよく見かけますよね。

 

一見こういったプラグインは導入やら設定やらが大変なのでは、と思われますが、このSpeech Bubbleは非常に簡単に使うことができます。

Speech Bubbleの導入方法

Speech Bubbleは、WordPress管理画面左のメニューバーから行います。

「プラグイン」から「新規追加」を選択します。

 

 

検索窓に“Speech Bubble”と入力すると、プラグインが表示されます。「今すぐインストール」をクリックしましょう。

インストールが完了したら「有効化」をクリックします。

 

 

このプラグインは特別設定をする必要がないので、これで導入は終了です。

 

Speech Bubbleを使うためのコード

Speech Bubbleは、テキストエディタに以下のコードを貼り付けるだけで機能します。

 

 

こちらのコードをテキストエディタに貼り付けると、吹き出しが機能します。

 

Speech Bubbleでは、コードを少し変更することで

  • 吹き出しの種類
  • 吹き出しを右寄せにするか、左寄せにするか
  • 吹き出しの尻尾の部分の種類
  • キャラクターの画像
  • キャラクターの名前

をそれぞれ好きなように設定できるようになっています。

 

ブログに合わせて設定を変更してみましょう。

 

吹き出しの種類

 

吹き出しの種類は、先ほどのコードの中の「type=”  “」で設定します。

デフォルトではtype=”drop”になっていますが、吹き出しの種類は全部で9種類あります。

 

以下、すべてのパターンをご紹介していきます。

 

type=”drop”

まさ
デフォルトで設定されている吹き出しです。
太郎
吹き出しが大きくてインパクトがありますね

type=”std”

 

まさ
スタンダードなモデルで、クセのない吹き出しです
太郎
色もついていないので汎用性がありますね

 

type=”fb”

 

まさ
Facebookをモデリングした吹き出しです
太郎
旧タイプのモデルですね

type=”fb-flat”

まさ
Facebook・Messengerでのメッセージをモデリングした吹き出しです
太郎
最近ではこちらの方が見慣れていますね

 

type=”ln”(エルの小文字)

まさ
昔のLINEメッセージをモデリングした吹き出しです
太郎
懐かしいですね

 

type=”ln-flat”(エルの小文字)

現LINEのメッセージをモデリングした吹き出しです。

まさ
現在のLINEメッセージをモデリングした吹き出しです
太郎
これが一番みんなに知られていて、使いやすいかもしれませんね

 

type=”pink”

まさ
枠・吹き出し・セリフがすべてピンク色になります
太郎
女性向けのブログにピッタリですね

 

type=”rtail”

まさ
吹き出しがブルーになります
太郎
スマートな印象を受けますね

 

type=”think”

まさ
吹き出しの尻尾が「心の中での発言」風になり、枠や色もほんわかした感じになります。
太郎
まささんの心の声が聞こえる・・・。まさか私もまささんもニュータイプに!?

 

吹き出しの右寄せ/左寄せ、尻尾の変更

 

コード内の「subtype=” “」で、吹き出しをすべて右寄せ/左寄せにしたり、尻尾の部分を「しゃべっている風」「心の中で思っている風」に変化させることができます。

デフォルトでは最初の話者が「L1」、次の話者が「R1」となっていますね。

 

「L」は左寄せ「R」は右寄せを表しています。

その横の数字ですが、「1」は「しゃべっている風の尻尾」「2」は「心の中で思っている風の尻尾」を表します。

 

まとめると、以下のようになります。

 

  • L1=左寄せ、しゃべる
  • L2=左寄せ、心の中
  • R1=右寄せ、しゃべる
  • R2=右寄せ、心の中

 

これを駆使して様々な会話を作ってみましょう。

 

キャラクターの画像を設定

 

キャラクター部分に画像を割り当てることで、より会話をリアルにすることができるようになります。

画像を変更する際は、コード内の「icon=”  .jpg”」の部分を変更します。

これはXServerを利用すると手っ取り早いので、こちらの動画を参考にしてみてください。

 

キャラクター名の変更

 

キャラクターの名前を変更するには、コード内の「name=”  “」に任意の名前をいれればOKです。

今回の私の例だと、「name=”まさ”」と「name=”太郎”」になっています。

 

セリフ

セリフは、先ほど表示したコード

の、「セリフ」部分を任意の文章にするだけでOKです。

 

まとめ

Speech Bubbleを利用することで、会話(チャット)形式で話を進めることができ、訪問者を惹きつけることができます。

効果的に利用してみましょう。

 

 COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Tiny6

TinyMCE Advancedの使い方、カスタマイズ方法を徹底解説!

RealFaviconGeneratorを使ってWordPressのサイトにファ...

NO IMAGE

AdSense Plugin WP QUADSでアドセンスの挿入をラクに!

定型文を自動挿入!Bottom of Every Post

TablePressの使い方!料金比較、スペック比較などに便利!

Contact Form 7の使い方、設定方法を徹底解説!