WordPressに会話形式（吹き出し式）のコンテンツがショートコードで簡単に追加できるプラグイン「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”（右）の場合の表示

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

WordPressで定型タグや定型文をボタン１つで挿入できるプラグイン「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の本

Amazonの人気商品楽天市場の人気商品

(無料電話サポート付)できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 (できるシリーズ)

￥ 1,628

Amazon.co.jp

ASIN: 4295006270
インプレス

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

￥ 1,738

Amazon.co.jp

ASIN: 4295006661
インプレス

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

1,738 円 (税込)

HMV＆BOOKS online 1号店

基本情報ジャンル建築・理工フォーマット本出版社インプレス発売日2019年07月ISBN9784295006664発売国日本サイズ・ページ280p　21×19cm関連キーワード 9784295006664 出荷目安の詳細はこちら＞＞楽天市場内検索 『在庫あり』表記について　

いちばんやさしいWordPressの教本　人気講師が教える本格Webサイトの作り方／石川栄和／大串肇／星野邦敏【合計3000円以上で送料無料】

1,738 円 (税込)

bookfan 1号店 楽天市場店

著者石川栄和(著) 大串肇(著) 星野邦敏(著)出版社インプレス発行年月2019年08月ISBN9784295006664ページ数280P9784295006664内容紹介Webサイトをはじめて作る初心者でも安心！大きな画面の操作手順で迷わない。人気のテーマで、パソコン＆スマホ両対応のWebサイトを作れる！..

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

---

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

---

• 作者の記事一覧はこちら

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

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

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

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

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

WordPressでユーザーごとの投稿数やアクセス数、コメント数などを表示するプラグイン「Author and Post Statistic Widgets」

「Author and Post Statistic Widgets」はユーザーごとに投稿数やコメント数、人気の投稿などが表示できたり、人気のユーザーランキングが表示できるプラグインです

WordPressで投稿や固定ページ、ウィジェットなどにバーコードやQRコードを挿入できるプラグイン「Barcode QRcode Generator」

個人で使用することはあまりないと思いますが、「Barcode QRcode Generator」は企業サイトなどで商品の一覧や紹介ページを作成する際に役立つプラグインです。１つのプラグインでバーコードとQRコードの両方を作成することができます。

WordPressでワードプレス公式ページへのリンクをカード形式で表示するプラグイン「plugin cards」

かなりコアで用途が限定されますが、プラグイン紹介記事の中にカード形式の公式ページリンクを作成することができます。テキストリンクで味気なくなりがちな紹介記事もビジュアルライクになります。