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

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

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

 

1. 使用例

 

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

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

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

 

3. 使い方

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

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

 

3.1. キャラの名前を設定

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

 

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

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

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

 

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

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

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

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

 

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

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

 

3.5. セリフ

セリフは[speech_bubble]～[/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ですよっ♪