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

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

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

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

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

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

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

テストした環境

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

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

個人的な評価・感想ほか

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

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

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

Knowledge Base

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

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

更新情報などないかなぁと思ってWordPressのテーマ「Simplicity」のサイトを訪問し、過去の情報などいろいろ見ていたら、なんとLINEのタイムライン風表示（左右からのバルーン表示）できる機能があることが分かりました。この機能は1.3.8から実装されており、今このサイトで使っている2.3.0でも拡張クラスがそのまま継承されていました（要するに下のコードを使うとそのままLINE風の表示ができるということです）。

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

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

情報航海術 - Office TAKU -

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

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

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

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

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

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

インプレス

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

参考価格：１,７３８円

※参考価格です。サービスやショップ、掲載時期などにより価格は異なりますのでご注意ください

Amazonで詳細を見る

楽天市場で探す

Yahoo!で探す

WordPressのカスタマイズ・不具合対応などご相談ください

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