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

  |   2016/05/03 ( 2018/12/31 ) | 383 views
 0

【お知らせ】

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

Myoga-SB-SDF-A12

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」と入力して検索し、「今すぐインストール」ボタンをクリックします。

plugin

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

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のツイートを埋め込んでみましたっ!


[/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の吹き出しを使用してみました。

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

5. おわりに

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

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

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

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

ミョウガ(Myoga)

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

コメントを残す

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

*

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください