会話形式（吹き出し式）のコンテンツがショートコードで簡単に追加できるプラグイン「Speech bubble (ふきだしプラグイン)」

全く更新のないプラグインですが、特に機能として更新する必要がないからだと思います。似たプラグインでさらに更新されていないものがありますので、選択を間違えないように注意してください

【Speech bubble (ふきだしプラグイン)】プラグインの基本的な機能・できること

1. 本文に吹き出し（会話）形式のコンテンツが挿入できる
2. 表示パターンがたくさんあり、ショートコードで使い分けられる
3. オリジナル画像への入れ替えが可能

<表示例>

※この紹介ページの下の方にパターンすべてのショートコードと例を表示しています

この記事を参考にプラグインの導入をする際以下に留意ください

【Speech bubble (ふきだしプラグイン)】プラグインの設定画面や表示の日本語化と翻訳

【Speech bubble (ふきだしプラグイン)】プラグインは設定項目がないので特に必要ないと思います

【Speech bubble (ふきだしプラグイン)】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名で検索してインストールするか、ページ先頭の画像をクリックして表示されるWordpressのプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

Knowledge Base

【Wordpress】プラグインのインストール＆追加方法とエラー対処の方法

https://www.momosiri.info/cms/wordpresspluginerror/

Wordpressと言えばさまざまな追加機能を使って思い通りの表現や動作ができるのがブログやHTMLで作ったサイトと違って楽しいところですね。ここでは基本的なプラグインの導入の仕方とトラブルが発生した場合の対処方法について解説します。いちばん簡単にプラグインを...

【Speech bubble (ふきだしプラグイン)】プラグインの基本的な使い方

設定はありません。ショートコードのパラメーター値を変えることでさまざまな表現ができます。

パラメーターは

1. type・・・吹き出し部分（文字が入る部分）のデザインの違いです
2. subtype・・・吹き出しと画像の間の部分のデザインです（aとb、cとdがそれぞれ対になります）
3. icon・・・左右の画像の相対URLです（オリジナルの画像を使う場合には「speach-bubble / img /」フォルダ内へ画像をアップロードして指定します）
4. name・・・画像の下の名前です（サンプルはA San B Sanとなっています）

の４つです。これらを変更することでいろいろな吹き出しコンテンツが作れます。

とはいっても全部試してからというのは大変なので、ショートコードとサンプルを用意しましたので好みのショートコードをコピペして使うといいでしょう。

表示の種類と表示例

type=”std” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”std” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”std” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”std” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”std” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”std” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”fb” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”fb” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”fb” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”fb” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”fb” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”fb” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”fb-flat” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”fb-flat” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”fb-flat” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”fb-flat” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”fb-flat” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”fb-flat” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”ln” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”ln” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”ln” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”ln” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”ln” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”ln” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”ln-flat” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”ln-flat” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”ln-flat” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”ln-flat” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”ln-flat” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”ln-flat” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”pink” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”pink” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”pink” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”pink” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”pink” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”pink” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”rtail” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”rtail” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”rtail” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”rtail” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”rtail” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”rtail” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”drop” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”drop” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”drop” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”drop” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”drop” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”drop” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

type=”think” subtype=”a”（左）”b”（右）の場合の表示

[speech_bubble type=”think” subtype=”a” icon=”1.jpg” name=”A san” ]Ask something. [/speech_bubble]

[speech_bubble type=”think” subtype=”b” icon=”2.jpg” name=”B san” ]Answer something.[/speech_bubble]

type=”think” subtype=”c”（左）”d”（右）の場合の表示

[speech_bubble type=”think” subtype=”c” icon=”1.jpg” name=”A san” ]Think something. [/speech_bubble]

[speech_bubble type=”think” subtype=”d” icon=”2.jpg” name=”B san” ]Think something, too.[/speech_bubble]

画像の上２つが「a」と「b」、下２つが「c」と「d」の組み合わせです

【Speech bubble (ふきだしプラグイン)】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、Wordpressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

使用するにはショートコードを都度挿入する必要がありますので

Knowledge Base

定型タグや定型文をボタン１つで挿入できるプラグイン「Add quick tag」

https://www.momosiri.info/wppi/addquicktag/

定型HTMLタグや定型文をボタン１つで挿入できる、Wordpressプラグイン「Add quick tag」は昔からある定番のプラグインですが、本当に便利でどんどんボタンを増やしたくなってしまうほどシンプルかつ高機能な無料追加プラグインなので、あえて紹介します。【Add quick...

などのクイックタグ作成プラグインを使って挿入するとコンテンツの作成がとても楽になります

プラグインのテスト環境＆個人的評価

最後に【Speech bubble (ふきだしプラグイン)】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。

テストした環境

1. WordPressのバージョン：4.7.5
2. PHPのバージョン：7.0
3. テーマ：Simplicity バージョン2.3.0g
4. プラグインのバージョン：１．０．３

このプラグインの最新バージョンは現在Wordpress公式サイトに "speech-bubble" は存在しません（配布されていません）です。バージョンが異なる場合には設定の仕方や動作仕様が変更になっている可能性があります。

個人的な評価・感想ほか

５段階評価
1. 設定のしやすさ：★★★★★
2. 使いやすさ：★★★★★
3. おすすめ度：★★★★★

いろいろな表現（吹き出しデザイン）がセットされているので使い勝手がいいと思います。例えば４人での会話といった表現でもデザインパターンを工夫すればきれいに表示できると思います。

テーマに当サイトと同じ【Simplicity2】を使用している方は似た機能が標準で装備されていますので試してみてください。

Knowledge Base

【Simplicity】古くから搭載されていた機能を活かそう！！「LINEのタイムライン風...

https://www.momosiri.info/cms/simplicity-balloon/

更新情報などないかなぁと思ってWordpressのテーマ「Simplicity」のサイトを訪問し、過去の情報などいろいろ見ていたら、なんとLINEのタイムライン風表示（左右からのバルーン表示）できる機能があることが分かりました。私が「Simplicity」を使い始めたのは1.8あた...

このページを紹介いただいているサイト

　インターネットの世界はネットワークが命。私の拙いページをご紹介いただいているありがたいサイト様へ少しでも恩返しを・・ということでサイトへのリンクを張らせていただきます。ぜひご覧ください。

情報航海術 - Office TAKU -

[WordPress] いまさらですが、ワードプレスで会話風吹き出しを簡単に作れる「Speec...

https://office-taku.com/201808/web/wordpress/10013.html

こんにちは。 @OfficeTAKUです。 WordPressで会話風吹き出し。 前からやってみたかったのです…

※Google Analyticsでのリファラアクセスデータを元にリンクさせていただいております（リンクを張っていただいている方でも本ページへアクセスのないサイト様は残念ながら掲載できておりません）

※リンクを張っていただいているサイト様でも長期間本ページへのアクセスがない場合にはリンクを解除させていただく場合があります

Wordpress関連の本

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)

インプレス

大きな画面の操作手順で迷わない。人気のテーマで、パソコン＆スマホ両対応のＷｅｂサイトを作れる！ソーシャルメディアとの連携やＳＥＯ対策、バックアップなどの運用面も丁寧に解説。

Amazonで詳細を見る

楽天市場で探す

Yahoo!で探す

できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ

インプレス

WordPressは無料かつ高機能で、シェア率No.1のCMS（コンテンツ管理システム）です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。

Amazonで詳細を見る

楽天市場で探す

Yahoo!で探す

• 記事の作者: ひまあーと（管理人）

---

• ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
  ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
  ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。

---

いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。

記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

投稿本文の任意の場所へ広告を表示できるプラグイン「Insert Post Ads」

「Insert Post Ads」は本文の先頭末尾や本文内のpタグの数に合わせて広告を挿入できるプラグインです。例えば３番目のpタグの後ろに設定した広告を入れるというようなことができ、いくつでも設定できるので文章をいつも通り書いているだけで勝手に広告を挿入してくれる優れたプラグインです。

閲覧画面の左右いずれかに追従型のアコーディオンメニューが作成できるプラグイン「CodeFlavors floating menu」

「CodeFlavors floating menu」表示画面の右または左にスクロール追従型のアコーディオンメニューが作成できるプラグインです。ナビゲーションメニューと別にメニューを設けることができるので、アコーディオンの機能を活用して、短い名前の親メニューを表示し、マウスオーバーすると詳しいメニューを表示することも可能ですからサイト表示の邪魔になりません。

Google map Apiを使わず簡単にグーグルマップを挿入できるプラグイン「Pronamic Google Maps」

Wordpressでコンテンツを作る上で切り離せない地図表示。実際に地図を見て調整したそのものが挿入できるのがこのプラグインの一番気に行っているところです。「Pronamic Google Maps」は最近Google関連のツールで必須になりつつあるGoogle Apiキーの取得が不要なのも魅力の一つです。