WordPressで吹き出しを表示するプラグイン「Speech Bubble」を導入してみましたっ！

【お知らせ】

本ブログで使用している吹き出しプラグインの切り替えのため、この記事は近日公開を終了します。

Hello～、ミョウガですっ♪　わたしが記事を書くのは久しぶりです。

今回はWordPressに吹き出しを追加するプラグイン「Speech Bubble」を導入したお話です。

WordPress・吹き出しプラグイン(Speech Bubble) ver.1.0公開 – ありそうでなかったものを

1. 使用例

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga02.png” name=”ミョウガ”]ハロー、シアたん♪[/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”Xiia02.png” name=”シアたん”]あら、ミョウガさん。こんにちは☆[/speech_bubble]

2. インストールと有効化

プラグインの新規追加画面で、検索ボックスに「Speech Bubble」と入力して検索し、「今すぐインストール」ボタンをクリックします。

インストールしたら、プラグインを有効化します。

3. 使い方

吹き出しを入れたいところに以下のショートコードを入力します。エディタはビジュアルモード・テキストモードのどちらでもOKですよっ。

[speech_bubble type="drop" subtype="L1" icon="Myoga02.png" name="ミョウガ"]ハロー♪[/speech_bubble]

上記のコードは以下のように表示されます。

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga02.png” name=”ミョウガ”]ハロー♪[/speech_bubble]

3.1. キャラの名前を設定

キャラの名前はname属性に設定します。表示しない時は空文字にしてもOKだよ。

[speech_bubble type="drop" subtype="L1" icon="Myoga02.png" name="ミョウガ"]やっほほ～♪[/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="Myoga01.png" name=""]こちらはname属性を空にしているよ～[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga03.png” name=”ミョウガ”]やっほほ～♪[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga01.png” name=””]こちらはname属性を空にしていますよっ！[/speech_bubble]

3.2. キャラのアイコン画像を設定

キャラのアイコンはicon属性に設定します。ファイルパスは「WordPressのインストールディレクトリ/wp-content/plugins/speach-bubble/img」からの相対パスです。imgフォルダーの中にアイコンファイルを入れておくと、ファイル名だけ入力すればOKですよっ。

なおSpeech Bubbleには、「1.jpg」と「2.jpg」があらかじめ用意されています。

[speech_bubble type="drop" subtype="L1" icon="Myoga02.png" name="ミョウガ"]ミョウガですっ♪[/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="Xiia02.png" name=""]シアです☆[/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="Nia02.png" name="ニア"]ニアです。[/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="1.jpg" name="1.jpg"]わたしです[/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="Myoga08.png" name="ミョウガ"]誰ー！？[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga02.png” name=”ミョウガ”]ミョウガですっ♪[/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”Xiia02.png” name=”シアたん”]シアです☆[/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”Nia02.png” name=”ニア”]ニアです。[/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ icon=”1.jpg” name=”1.jpg”]わたしです[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga08.png” name=”ミョウガ”]誰ー！？[/speech_bubble]

3.3. 吹き出しの種類を設定

Speech Bubbleには9種類の吹き出しのデザインが用意されています。

• drop
• fb
• fb-flat
• ln
• ln-flat
• std
• pink
• rtail
• think

type属性に使用したい吹き出しのデザインの識別子を入力します。FacebookやLINEのようなスタイルも用意されています。

[speech_bubble type=”drop” subtype=”L1″ icon=”Myoga02.png” name=”ミョウガ”]dropですよっ[/speech_bubble]

[speech_bubble type=”ln” subtype=”L1″ icon=”Myoga03.png” name=”ミョウガ”]lnです。まるでLINEみたいだね♪[/speech_bubble]

[speech_bubble type=”ln-flat” subtype=”R1″ icon=”Xiia01.png” name=”シアたん”]ln-flatのように、今どきのフラットなデザインもあります。[/speech_bubble]

[speech_bubble type=”fb” subtype=”L1″ icon=”Myoga02.png” name=”ミョウガ”]fbとfb-flatはFacebookのメッセンジャー風ですね。[/speech_bubble]

[speech_bubble type=”fb-flat” subtype=”R1″ icon=”Xiia02.png” name=”シアたん”]ワタシ達も、いつかFacebookページを作りたいですね☆[/speech_bubble]

[speech_bubble type=”std” subtype=”L1″ icon=”Myoga12.png” name=”ミョウガ”]stdだよ！[/speech_bubble]

[speech_bubble type=”pink” subtype=”L1″ icon=”Myoga10.png” name=”ミョウガ”]pinkです。Wow, It’ s cute![/speech_bubble]

[speech_bubble type=”rtail” subtype=”L1″ icon=”Myoga03.png” name=”ミョウガ”]rtailですよっ！[/speech_bubble]

[speech_bubble type=”think” subtype=”L1″ icon=”Myoga02.png” name=”ミョウガ”]thinkは名前の通り、考えている時用の吹き出しだよっ。[/speech_bubble]

[speech_bubble type=”think” subtype=”R2″ icon=”Xiia02.png” name=”シアたん”]L1、R1とL2、R2とで色が変わるのですね。[/speech_bubble]

3.4. 吹き出しの向きとしっぽのスタイルを設定

subtype属性に、吹き出しの向きとしっぽのスタイルの識別子を設定します。

[speech_bubble type=”std” subtype=”L1″ icon=”Myoga02.png” name=””]L1と設定すると、アイコン画像の左寄せで吹き出しふつうのしっぽになります。[/speech_bubble]

[speech_bubble type=”std” subtype=”R1″ icon=”Myoga12.png” name=””]R1と設定すると、アイコン画像の右寄せで吹き出しふつうのしっぽになります。[/speech_bubble]

[speech_bubble type=”std” subtype=”L2″ icon=”Myoga01.png” name=””]L2と設定すると、アイコン画像の左寄せで吹き出し丸しっぽになります。[/speech_bubble]

[speech_bubble type=”std” subtype=”R2″ icon=”Myoga02.png” name=””]R2と設定すると、アイコン画像の右寄せで吹き出し丸しっぽになります。[/speech_bubble]

3.5. セリフ

セリフは[[speech_bubble]～[/speech_bubble]]の中に入力します。

[speech_bubble type=”std” subtype=”L1″ icon=”Myoga02.png” name=””]Hello～♪[/speech_bubble]

[speech_bubble type=”std” subtype=”R1″ icon=”Myoga12.png” name=””]吹き出しの内のテキストはHTML上でテキストになっていますよっ！[/speech_bubble]

[speech_bubble type=”std” subtype=”L1″ icon=”Myoga03.png” name=””]テキストの装飾はもちろんのこと、画像も入れられます。

[/speech_bubble]

[speech_bubble type=”std” subtype=”R1″ icon=”Myoga01.png” name=””]Twitterのツイートを埋め込んでみましたっ！

Lunch timeだよ☕

— 水橋ミョウガ （Myoga S. S.） (@Myoga1012) 2016年2月25日

[/speech_bubble]

[speech_bubble type=”std” subtype=”L1″ icon=”Myoga10.png” name=””]なんと、Crayon Syntax Highlighterなどを使ってソースコードも入りますよっ！

printfn "Hello World!";

[/speech_bubble]

HTMLで表示できるコンテンツであれば、何でもOKです。

4. Speech Bubbleを使用している記事

早速、今までに投稿されている一部記事にて、Speech Bubbleの吹き出しを使用してみました。

• Windows 10 Technical Preview（Build9926）のCortanaを体験してみました。[その1]
• Windows 10 TP（Build9926）のCortanaを体験してみました。[その2]
• Windows 10 Insider Preview Build 10532で日本語に対応したCortanaを体験してみました
• Chronoir Stationシリーズ
• シアたんとミョウガのサーバー乗り換え大作戦！シリーズ（Vol.2以降）

Speech Bubbleを利用してみて、キャラがより生き生きとしてきましたっ♪

5. おわりに

今回はWordPressに吹き出しを追加するプラグイン「Speech Bubble」の導入と使い方について紹介しました。

複数のキャラクター同士で会話させてコンテンツを盛り上げていきたい時に、このプラグインはとても便利です。

ではでは、See youですよっ♪