WordPressプラグイン「Speech bubble」による吹き出しを利用した会話

この記事は約6分で読めます。

とある仕事の案件で、WordPressで制作したWebサイトに吹き出しを使って会話するようにしてくれと、クライアントから依頼を受けたので、自身の備忘録も兼ねて記事化しておきます。今回の実装方法はググると、WordPressのプラグインをインストールして有効化するだけで利用できるものです。

当プラグインをインストールした時のWordPressバージョンは、4.9.4です。

スポンサーリンク

「Speech bubble」のインストール

WordPress管理画面のサイドメニューから「プラグイン」を選択し、「新規追加」を選択します。プラグイン検索ワードに「Speech bubble」と打てば、結果結果に表示されます。

上図から「今すぐインストール」を選択し、インストール後「有効化」にしてください。これで、記事上で吹き出しを利用することが可能になります。

「Speech bubble」の利用方法

サイドメニューから「投稿」を選択し、新規投稿追加の画面を開いてください。
投稿内容に下記のコードを記載し、プレビューすると、下のサンプルのように表示されます。

[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"]こんにちは![/speech_bubble]
[speech_bubble type="drop" subtype="R1" icon="2.jpg" name="Bさん"]こんにちは!Aさん[/speech_bubble]
[speech_bubble type="drop" subtype="L1" icon="1.jpg" name="Aさん"]今日もいい天気だね[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ name=”Aさん”]こんにちは![/speech_bubble]

[speech_bubble type=”drop” subtype=”R1″ name=”Bさん”]こんにちは!Aさん[/speech_bubble]

[speech_bubble type=”drop” subtype=”L1″ name=”Aさん”]今日もいい天気だね[/speech_bubble]

オプションの設定内容

Speech Bubbleのオプション設定は下表の通りになります。

オプション値内容
type吹き出しの種類
subtypeアイコンの左右の向きと吹き出しのしっぽの種類
iconアイコン画像の設定
対応している拡張子は、「jpg, png, gif, svg, tif」
nameアイコン名の設定

アイコン画像の設定

「../wp-content/plugins/speech-bubble」にある「img」フォルダに設定したい画像をFTPツールなどを使ってアップロードします。設定した画像は、100×100にリサイズして表示されます。Speech Bubbleの「icon=”画像ファイル名”」の部分を、先ほどアップロードした画像ファイル名に変更すればアイコン画像が適用されます。

↓こんな感じ

[speech_bubble type=”drop” subtype=”L1″ icon=”honoka_kousaka.jpg” name=”高坂穂乃果”]ファイトだよ![/speech_bubble]

アイコン名の設定

アイコン名は、Speech Bubbleの「name=””」の部分を任意の名前に変更すれば適用されます。

吹き出しの設定

吹き出しの種類は9種類も用意されており、「type=””」の部分を下記の吹き出しコード内容に変更されば適用されます。

drop・std・ fb・ fb-flat・ln・ ln-flat・ pink・ rtail・ think
ちなみに、それぞれの吹き出しコード指定した感じは下記のようになります。
drop

[speech_bubble type=”drop” subtype=”L1″ icon=”honoka_kousaka.jpg” name=”高坂穂乃果”]うん、ファイトだよ![/speech_bubble]

std

[speech_bubble type=”std” subtype=”L1″ icon=”kotori_minami.jpg” name=”南ことり”]ちゅんちゅん[/speech_bubble]

fb

[speech_bubble type=”fb” subtype=”L1″ icon=”umi_sonoda.jpg” name=”園田海未”]ラブアローシュート[/speech_bubble]

fb-flat

[speech_bubble type=”fb-flat” subtype=”L1″ icon=”rin_hosizora.jpg” name=”星空凛”]学校の許可ぁ?認められないわぁ[/speech_bubble]

ln

[speech_bubble type=”ln” subtype=”L1″ icon=”hanayo_koizumi.jpg” name=”小泉花陽”]ダレカタスケテー[/speech_bubble]

ln-flat

[speech_bubble type=”ln-flat” subtype=”L1″ icon=”maki_nishikino.jpg” name=”西木野真姫”]何それ、意味わかんない![/speech_bubble]

pink

[speech_bubble type=”pink” subtype=”L1″ icon=”nico_yazawa.jpg” name=”矢澤にこ”]にっこにっこにー[/speech_bubble]

rtail

[speech_bubble type=”rtail” subtype=”L1″ icon=”nozomi_touzyou.jpg” name=”東條希”]スピリチュアルやね[/speech_bubble]

think

[speech_bubble type=”think” subtype=”L1″ icon=”eri_ayase.jpg” name=”絢瀬絵里”]ハラショー[/speech_bubble]

アイコンの向きと吹き出しのしっぽの設定

アイコンを左右への配置と吹き出しのしっぽは、「subtype=””」の部分を変更すれば適用されます。左に配置する場合はLを、右に配置する場合はRを指定します。

アイコンが左右に配置され、吹き出しが会話している感じ

[speech_bubble type=”fb” subtype=”L1″ icon=”honoka_kousaka.jpg” name=”高坂穂乃果”]私が、”subtype”が”L1″になっているんだ。ことりちゃんは?[/speech_bubble]

[speech_bubble type=”fb” subtype=”R1″ icon=”kotori_minami.jpg” name=”南ことり”]ことりは、”subtype”が”R1″だよ。[/speech_bubble]

アイコンが左右に配置され、吹き出しが思考している感じ

[speech_bubble type=”fb” subtype=”L2″ icon=”rin_hosizora.jpg” name=”星空凛”]”subtype”が”L2″になってるにゃ。[/speech_bubble]

[speech_bubble type=”fb” subtype=”R2″ icon=”hanayo_koizumi.jpg” name=”小泉花陽”]”subtype”を”R2″にしています。[/speech_bubble]

まとめ

一通り「Speech bubble」のインストールと利用方法等をまとめてみて、簡単なショートコードのみでアイコン同士の会話風なのが作れるのは大きいメリットですし、ブログコンテンツの幅が広がるのではないかと思いますので、ぜひ利用してみてはいかがでしょうか。

今回の吹き出しアイコンで利用した画像は、ラブライブ!公式サイト 様よりいただいたものです。

コメント