「Speechbubble」で会話型の見せ方をしよう【コード一覧まとめました】

WordPressで運営されているホームページやブログなどで、吹き出し形式のやりとりを見られたことがあると思います。

キャラクターを含む吹き出しのあるページがあると、カタイ内容のページをうまくほぐしてくれますし、会話型の見せ方ができるとページの内容もいきいきしてきます。

WordPressのプラグイン「Speechbubble」を使用すれば以下のような吹き出しを挿入させることができます。

こんな感じのイメージの吹き出しを作ることができます。

いろいろな見せ方があります。「Speechbubble」の使い方をいくつか紹介していきます。

「Speechbubble」プラグインをインストールしよう

プラグインのインストールは簡単です。

WordPressのサイドバーのメニューよりプラグイン>新規追加をクリックします。

プラグインの検索欄に「Speechbubble」と入力し検索します。

下記のプラグインが表示されますので、「今すぐインストール」をクリックし、インストールが完了しましたら「有効化」するのも忘れないようにしましょう。

使い方を見て実際に吹き出しを作ろう

プラグイン「Speechbubble」のインストールと有効化が完了したら、設定などはもう必要ありません。

あとは、記事の投稿画面に「[speech_bubble][/speech_bubble]」のショートコードを入力するだけです。

以下のコードがベースになって、いろいろな吹き出しを作ることができます。

設定できる項目を整理しておきましょう。

type

吹き出しのタイプを選びましょう。

typeコード 見え方
std [speech_bubble type=”std” subtype=”L1″]type=”std”を使用しています
[/speech_bubble]
drop [speech_bubble type=”drop” subtype=”L1″]type=”drop”を使用しています
[/speech_bubble]
fb [speech_bubble type=”fb” subtype=”L1″]type=”fb”を使用しています
[/speech_bubble]
fb-flat [speech_bubble type=”fb-flat” subtype=”L1″]type=”fb-flat”を使用しています
[/speech_bubble]
ln [speech_bubble type=”ln” subtype=”L1″]type=”ln”を使用しています
[/speech_bubble]
ln-flat [speech_bubble type=”ln-flat” subtype=”L1″]type=”ln-flat”を使用しています
[/speech_bubble]
rtail [speech_bubble type=”rtail” subtype=”L1″]type=”rtail”を使用しています
[/speech_bubble]
pink [speech_bubble type=”pink” subtype=”L1″]type=”pink”を使用しています
[/speech_bubble]
think [speech_bubble type=”think” subtype=”L1″]type=”think”を使用しています
[/speech_bubble]

subtype

subtypeでは左右どちらからのコメントを出すかと、考えているような表現の見せ方に変更することができます。

subtypeコード 見え方
L1 [speech_bubble type=”std” subtype=”L1″]subtype=”L1″を使用しています
[/speech_bubble]
R1 [speech_bubble type=”std” subtype=”R1″]subtype=”R1″を使用しています
[/speech_bubble]
L2 [speech_bubble type=”std” subtype=”L2″]subtype=”L2″を使用しています
[/speech_bubble]
R2 [speech_bubble type=”std” subtype=”R2″]subtype=”R2″を使用しています
[/speech_bubble]

icon

iconはデフォルトで2つ入っています。

iconコード 見え方
1.jpg [speech_bubble type=”std” subtype=”L1″icon=”1.jpg”]icon=”1.jpg”を使用しています
[/speech_bubble]
2.jpg [speech_bubble type=”std” subtype=”L1″icon=”2.jpg”]icon=”2.jpg”を使用しています
[/speech_bubble]

任意のアイコンを使用したい場合

追加で画像を使用したい場合は、サーバーの「Speechbubble」のプラグインが入っている以下のフォルダに、使用したいイメージを保存する必要があります。

「wp-content>plugins>speech-bubble>img」

保存が完了したらiconコードを利用して任意の画像をアイコンとして使用しましょう。

name

nameコードの後に自由に名前をつけることができます。

冒頭では「男A」「男B」などの名前にしていたものです。

吹き出しの使い方はあなた次第

この吹き出しを使うページが最近は本当に多くなってきたと思います。

ホームページやブログに親しみやすくなりますし、内容を理解しやすくするためのワンクッションにも使われているんだと思います。

固い内容の記事を書いたうえで、キャラクターで印象を柔らかくするなんてこともできるかもしれませんね。

使い方は人それぞれだと思います。

キャラクターの設定は最初にしっかりしないと後からブレたりするのがあまり好きではないのですが、このサイトでも使っていこうか考えているところです。