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

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

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

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

男A
こんな吹き出しを見たことありませんか?ありますよね?

男B
絶対見たことあるはずです!!みんな使ってるよね!!見たことあるよね!?

男AD
何を必死になることがあるのか・・・

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

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

男A
コードも一覧にしていますのでいろいろ使ってみましょう。

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

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

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

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

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

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

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

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

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

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

type

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

typeコード 見え方
std
no name
type=”std”を使用しています
drop
no name
type=”drop”を使用しています
fb
no name
type=”fb”を使用しています
fb-flat
no name
type=”fb-flat”を使用しています
ln
no name
type=”ln”を使用しています
ln-flat
no name
type=”ln-flat”を使用しています
rtail
no name
type=”rtail”を使用しています
pink
no name
type=”pink”を使用しています
think
no name
type=”think”を使用しています

subtype

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

subtypeコード 見え方
L1
no name
subtype=”L1″を使用しています
R1
no name
subtype=”R1″を使用しています
L2
no name
subtype=”L2″を使用しています
R2
no name
subtype=”R2″を使用しています

icon

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

iconコード 見え方
1.jpg
no name
icon=”1.jpg”を使用しています
2.jpg
no name
icon=”2.jpg”を使用しています

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

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

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

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

name

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

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

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

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

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

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

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

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