WordPress

【WordPress】ワードプレスで会話風吹き出しを簡単に作れる「Speech Buble」プラグイン

こんにちは。
@OfficeTAKUです。

A san
こんにちは。今日も暑いですね。

B san
ほんとうに、いつまで続くのかしら?

WordPressで会話風吹き出し。
前からやってみたかったのです。

お客様のサイトで「利用者さまの声」みたいなページをつくるにあたって吹き出しになるといいなぁ、と思い導入してみました。

ワードプレスで会話風の吹き出しを表現する方法としてはザクッと言うと
・プラグインを利用する
・プラグインを利用しない(CSS・HTMLでコードを記述)
の二通りかと思います。

プラグインの問題点は
・ワードプレス自体が重くなったり
・更新・バージョンアップされないと新しいワードプレスのバージョンに対応できなくなる
ということ。

一方、プラグインを利用しない場合は、
・プラグインのデメリットは回避できるものの、コードの記述が面倒
・場合によってはfunction.php などのワードプレスを構成する重要なファイルに追加記述したり、手間がかかる
と言った点があげられます。

結局、ご期待通り、とにかく楽をしたい、手早く済ませたい私が選んだのは定評のある「Speech bubble (ふきだしプラグイン)」プラグインでした。

「Speech bubble (ふきだしプラグイン)」を使うとこんなことができます

「Speech bubble (ふきだしプラグイン)」プラグインをインストールして有効化したら、記事の中にショートコードを書いていきます。
指定する項目は、
type、吹き出しのスタイル
subtype、人物を左右どちらに表示するか
icon、人物の画像ファイル名
name、名前を入れていきます

[speech_bubble type="std" subtype="a" icon="1.jpg" name="A san" ]ここに台詞を入力[/speech_bubble]

上記のショートコードをコピペして、typeとsubtype、名前と台詞を書き換えると、吹き出しがちゃんと表示されます。

type: std, fb, fb-flat, ln, ln-flat, pink, rtail, drop, think
subtype: a, b, c, d (a,c が向かって左側、b,d が 向かって右側に人物が位置します。)

画像はSpeech bubbleプラグインのフォルダの中のイメージフォルダの中にアップロードします。
正方形の画像であればOKです。

ワードプレスをインストールしたフォルダの中の次の位置にあります。 
/wp-content/plugins/speech-bubble/img/

ここでは、会社の同僚(を想定)二人の会話で、「Speech bubble (ふきだしプラグイン)」プラグインでどんなスタイルの吹き出しができるか、紹介したいと思います。

スタンダード type:std, subtype:a,b,c,d(上から)

A san
おーい、なんか悩んでいるようだけど、どうしたの?
B san
ワードプレスで会話風の吹き出しを表示したいけど、どうしたらいいんだろう?って。
あまりワードプレスに詳しくないからさ。
A san
それなら、Speech bubbleっていうプラグインがおすすめだよ。
B san
Speech bubble?そうなんだ。プラグインなら楽にできそうね。

Facebook風 type:fb

A san
Speech bubbleにはいろんな吹き出しスタイルがあるよ。今までのはスタンダードの2種類。吹出口が違うだろ。ここからはFacebook風
B san
なるほど。これがフェイスブック風ね。。
A san
Facebook風で吹出口がちがうパターン。
B san
つぶやきふうね。

Facebook風フラットタイプ  type:fb-flat

A san
Facebook風でもこれはflatスタイルだよ。
B san
ほんとうだ、平面的になった。
A san
Facebook風flatスタイルの2パターン目。
B san
色もちがうのね。

LINE風 type:ln

A san
次は LINE風。
B san
うわー、あのラインの緑色の吹き出しだ。
A san
Line風の吹き出し違い
B san
名前の位置も違うのね

LINE風フラットタイプ type:ln-flat

A san
LINE風もflatタイプもあるよ。
B san
へぇ、いろいろな吹き出しがあるのね。
A san
Line風flatの吹出口違い
B san
いろいろあってどのスタイルにしようか迷うわね。

ピンク type:pink, subtype:b, a, d, c

B san
あら、どうしたの?
私達の顔ものっぺらぼうになったわ。そう言えば名前も A san , B san って安直だし。
A san
他にもまだ違うスタイルあるんだけど、もう紹介するのつかれちゃったんだよ。ちなみに、最初に入っている画像はこののっぺらぼうさんなんだよ。名前も考えるの面倒だからさ。
B san
もうしょうがないわね。じゃぁ、あたしが紹介するからそのカンペよこしなさい。
上の会話からピンクっていうスタイルね。これはその吹き出し口違い。
A san
ふう、助かった。じゃあお願いするよ。

ドロップ type:drop, subtype:b, a, d, c

B san
これはドロップというスタイル。影がついているわね。
A san
色つきなんだなぁ。
B san
ドロップの吹き出し口の違うタイプ。こちらの方が私は好きだわ。
A san
うん、ボクもそうおもうよ、

シンク type:think, subtype:b, a, d, c

B san
これはシンク。フラットですっきりしたタイプね。
A san
色がついているけど、文字もちゃんと読めるね。
B san
さあ、これで最後。これはシンクのサブタイプがちがうもの。cとdは色が変わってくるのね。こんな風にSpeech bubbleを使えば簡単に色々な吹き出しができるのよ。よく覚えておきなさい。
A san
え、それはボクのセリフだよ〜
人物素材

今回利用させて頂いた人物の顔の素材は、ずっと前に購入した「ビジネスイラスト素材集」
社員Aと女性社員Aを利用させてもらいました。

created by Rinker
¥310 (2023/09/22 12:57:24時点 Amazon調べ-詳細)

作者 河野浩之さんのサイト:ソザイヂテン

「Speech bubble (ふきだしプラグイン)」を選んだわけ

Speech bubble (ふきだしプラグイン) | WordPress.org

利用者の多い「Speech bubble (ふきだしプラグイン)」

不安要素としては、冒頭のプラグインの問題点でも書きましたが
・使っているテーマに影響はないか
 エラーがでたりするよ、っていうブログ記事もありました
・現時点で3年間程更新されていないが大丈夫か

の2点でした。

しかし、検索して関連記事を多く読んで見ましたが特に問題なく使えそうです。
上記2点に関して問題視する記事もありましたが、大丈夫だよ、ちゃんと使えてるよ、って記事も多かったです。
決定的なのが、私が現在利用しているテーマTCDさんのブログでも紹介されていたことから、導入してみようと思ったわけです。

LINEっぽい会話調の記事が作れるWordPressプラグイン「Speech Bubble」が面白い!

今回、実装するにあたって特に参考になったサイトは下記の Knowledge Base さんの記事です。ショートコードが全て紹介されていたので大変ありがたかったです。
これからSpeech bubbleプラグイン入れてみようという方は参考になります。

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

プラグインを使用しないかつfunction.phpをいじらなくてよい方法が紹介されているおもな記事

プラグインを使わず、なおかつfunction.phpをいじらなくてもよい方法を紹介してくれている記事もありました。
また、時間をみて試してみたいと思います。

「Speech bubble (ふきだしプラグイン)」は手軽に会話風吹き出しを表現できて便利です

2018年8月3日現在、
WordPress 4.9.7 試したテーマはこのサイトの TCD MAG と、BizVektor [ ビズベクトル ] の2種類。
どちらも、問題なく表示されています。

「Speech bubble (ふきだしプラグイン)」は、WordPressで会話風吹き出しを手軽に実現できるのでおすすめです。

話しは変わりますが、5月にTCDさんのWordPressテーマMAGを購入して利用し始めました。無料のテーマを使って自分であれこれ悩んでいじっていたのが何だったんだろう、って思います。
ほんと、購入してからは記事を書くことに専念できるようになり、とても楽になりました。やはり、餅は餅屋です。
もし、ブログを本格的にやろうと思っている方。書くことに専念したい方はテーマを購入する方が絶対によいと思います。さまざまなWordPressデザインテーマがありますので自分にあったものが見つかると思います。
WordPressテーマ「MAG(TCD036)」 ロゴマルシェ - LogoMarche

2018年7月 の人気記事はこれだ!月間 アクセス数 ベスト10前のページ

[Excel] 今日から役立つExcel人気記事ベスト10次のページ

ピックアップ記事

  1. 【Google】Chrome 拡張機能「Password Checkup」導入翌…
  2. プリンター ブラザー DCP-J973N 導入記。お手頃価格でセッティングも取り…
  3. Apple Music や Amazon Musice でクラシック音楽の楽曲・…
  4. 【Instagram】iPhoneアプリ版インスタグラムアカウントを非公開アカウ…
  5. 【レビュー】これはおすすめ!13インチ MacBook Pro にぴったりな I…

関連記事

  1. WordPress

    【WordPress】サイトヘルスチェックで指摘された問題点を解消

    こんにちは。@OfficeTAKUです。今まで気づかな…

  2. Web

    WordPress:Instagramの写真を表示するプラグイン 「Instagram Embed」…

    こんにちは。写真、撮られるのは嫌いだけど撮るのは好きな@OffieTA…

  3. WordPress

    【WordPress】ロリポップサーバーで不要になったWordPressサイトを削除する方法

    こんにちは。@OfficeTAKUです。別れと新たな出会いの季節…

  4. Photo by Hannes Wolf on Unsplash
  5. WordPress

    [lolipop] WordPress に ログインしようとしたら 403 エラー

    こんにちは。@OfficeTAKUです。オリジナルドメイン…

  6. WordPress

    [WordPress] ロリポップさんからお願いされていた 『SiteGuard WP Plugin…

    こんにちは。@OfficeTAKUです。ここの大家さん(レ…

LINE公式アカウント:OfficeTAKU

OfficeTAKU Line公式アカウントバナー

最近の記事

人気の記事

  1. Photo by Samuel Zeller on Unsplash
  1. Facebook

    【Facebook】名前の変更方法と旧姓やニックネームを表示する方法 2023年…
  2. Web

    2020年プログラミング教育必修化が不安!!というお母さんお父さんに伝えたいこと…
  3. Security

    【注意!】「2018 年間ビジターアンケート」というフィッシングサイトに騙されな…
  4. Windows

    【Windows】仮想デスクトップを利用する方法とショートカットキーとタッチパッ…
  5. EZCON RemoEZ

    Hard・Acc

    【レビュー】Alexa専用スマートリモコン「Remo Ez」-アレクサに声をかけ…
PAGE TOP