目次
【お知らせ】
本ブログで使用している吹き出しプラグインの切り替えのため、この記事は近日公開を終了します。
Hello～、ミョウガですっ♪ わたしが記事を書くのは久しぶりです。
今回はWordPressに吹き出しを追加するプラグイン「Speech Bubble」を導入したお話です。
WordPress・吹き出しプラグイン(Speech Bubble) ver.1.0公開 – ありそうでなかったものを
1. 使用例
2. インストールと有効化
プラグインの新規追加画面で、検索ボックスに「Speech Bubble」と入力して検索し、「今すぐインストール」ボタンをクリックします。
インストールしたら、プラグインを有効化します。
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のようなスタイルも用意されています。
3.4. 吹き出しの向きとしっぽのスタイルを設定
subtype属性に、吹き出しの向きとしっぽのスタイルの識別子を設定します。
3.5. セリフ
セリフは[speech_bubble]～[/speech_bubble]の中に入力します。
Lunch timeだよ☕
— 水橋ミョウガ （Myoga S. S.） (@Myoga1012) 2016年2月25日
printfn "Hello World!";
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ですよっ♪
Speach Bubbleのコードを改造し、アップロード側のディレクトリにあるアイコンを指定できるようにしてみました 
【脱プラグイン作戦】Twitterカード用のメタタグ生成をプラグインなしで設定してみよう（ついでにFacebook用OGPも設定） 
【脱プラグイン作戦】WordPressのパンくずリストを自作してみよう