目次
【お知らせ】
本ブログで使用している吹き出しプラグインの切り替えのため、この記事は近日公開を終了します。
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 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ですよっ♪