Speech Bubbleで会話風ページを作成
この記事を読むのに必要な時間は約 7 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)
Speech Bubbleをインストールする

簡単に検索できてインストールして有効化しておきます。
「Speech Bubble」で検索すると上記のように表示されるのですぐに見つかります。
追記:2019年1月7日現在、プラグインの検索でこのプラグインが表示されなくなりました。
Speech Bubbleの使い方
使い方のサンプルです。
アイコンに関しては、初期設定では2個しか入っていません。
![]() |
![]() |
上記の2つがインストールしたままの状態で入っているアイコンです。
大きさは、77ピクセルの正方形の画像を用意しておきます。
サーバー/wp-content/plugins/speech-bubble/img/
上記の場所に作成したアイコンをFTPソフトでアップロードしておきます。
FTPの使い方などは、下記のページを参考にしてください。
肝心の使い方と言うよりも投稿画面への記載方法なのですが・・・
ショートコードの書き方を覚えておく必要があります。
上記のようなショートコードになります。
最初の書き出しは、同じですが・・・
type=”” subtype=”” icon=”” name=””の部分は、それぞれ違います。
type=””
typeは、全部で9種類用意されています。
std, fb, fb-flat,ln,ln-flat,pink, rtail,drop, thinkの中で選択します。
くまはちが使用した中でln,ln-flatは、あまり使いたくないって思いましたね。
逆に女子キャラでpinkは、いいと思います。
type=”pink”
type=”std”
type=”fb”
type=”fb-flat”
type=”rtail”
type=”drop”
type=”think”
subtype=””
subtypeは、吹き出しのパターンの指定になります。
用意されている値は、a,b,c,dの4つ
上からabcdの順に並んでいます。
icon=””
iconは、イラスト画像のファイル名になります。
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
こちらは、アイコンに使えるサイズに加工してあります。
FacebookやTwitterなどのプロフィール画像をサイズダウンして使うというのもアリかもですね。
name=””
nameは、名前が表示されてる部分です。
これは、自由な名前を設定してください。
くまはちからの活用提案
このSpeech Bubbleは、 WordPressの中でボタンなどによる挿入ができません。
よって活用には、ちょっとした工夫が必要です。
Google Chromeで記事作成される方は、拡張機能でInsert Textを使われてはいかがでしょうか?
Firefoxの方は、Clippingsというプラグインが似たような機能があります。
右クリックだけで定型文化しておけば簡単に使いやすくなるでしょう。
セリフの部分だけ後で編集できれば簡単ですね。
このショートコードは、はさむことができるのでAmecareに登録するのもアリかもですね。
ちょっと最後に気になったことに対しての結果を・・・
セリフの中でリンクが使えるのかやってみたが・・・
HTMLタグがそのまま表示されるみたいで使えないですね。
というのは、間違いで・・・
コレよくあるミスなのです。
何がミスなのか?
このリンクは、ビジュアルで貼り付けられているからそのまま表示されているのです。
テキストでリンクタグを入れると表示されますよ。
Cocoonのテーマを使われる方は、このプラグインは、必要ないです。
テーマの中にあらかじめ吹き出しの機能が設定されていますので・・・
追記
上記画像にある通りクリックしてしまうと詐欺みたいなページに飛びます。
回避するためには再起動しかありません。
これがWordPressの公式プラグインのページにあるってことに驚きでした。
![]() |
くまはちLABのご利用ありがとうございます! |