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

By | Date : 2016/05/03 ( Last Update : 2016/11/19 ) | 200 views

Myoga-SB-SDF-A12

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

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

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

 

1. 使用例

ミョウガ
ハロー、シアたん♪
シアたん
あら、ミョウガさん。こんにちは☆

 

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

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

plugin

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

 

3. 使い方

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

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

ミョウガ
ハロー♪

 

3.1. キャラの名前を設定

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

ミョウガ
やっほほ~♪

こちらはname属性を空にしていますよっ!

 

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

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

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

ミョウガ
ミョウガですっ♪

シアたん
シアです☆
ニア
ニアです。
1.jpg
わたしです
ミョウガ
誰ー!?

 

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

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

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

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

ミョウガ
dropですよっ
ミョウガ
lnです。まるでLINEみたいだね♪
シアたん
ln-flatのように、今どきのフラットなデザインもあります。
ミョウガ
fbとfb-flatはFacebookのメッセンジャー風ですね。
シアたん
ワタシ達も、いつかFacebookページを作りたいですね☆
ミョウガ
stdだよ!
ミョウガ
pinkです。Wow, It’ s cute!
ミョウガ
rtailですよっ!
ミョウガ
thinkは名前の通り、考えている時用の吹き出しだよっ。
シアたん
L1、R1とL2、R2とで色が変わるのですね。

 

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

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

L1と設定すると、アイコン画像の左寄せで吹き出しふつうのしっぽになります。
R1と設定すると、アイコン画像の右寄せで吹き出しふつうのしっぽになります。
L2と設定すると、アイコン画像の左寄せで吹き出し丸しっぽになります。
R2と設定すると、アイコン画像の右寄せで吹き出し丸しっぽになります。

 

3.5. セリフ

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

Hello~♪
吹き出しの内のテキストはHTML上でテキストになっていますよっ!
テキストの装飾はもちろんのこと、画像も入れられます。

Twitterのツイートを埋め込んでみましたっ!


なんと、Crayon Syntax Highlighterなどを使ってソースコードも入りますよっ!

 

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

 

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

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

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

 

5. おわりに

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

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

 

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

 

この記事をシェアする
Chronoir.netのRSSフィードを購読する

About : ミョウガ(Myoga)

Hello~! 「ミョウガ」です。よろしくお願いします!(≧▽≦)/ 主にC#/XAML/C++などをメインにプログラミングやアプリの開発をしています。好きな物はカフェラテとハーブティ、趣味は写真撮影と艦これです。

コメントを残す

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

*