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

WordPress

こんにちは。
@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
¥241 (2024/03/19 00:13:07時点 Amazon調べ-詳細)

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

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

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

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

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

の2点でした。

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

今回、実装するにあたって特に参考になったサイトは下記の 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

情報航海術 - Office TAKU -をもっと見る

今すぐ購読し、続きを読んで、すべてのアーカイブにアクセスしましょう。

続きを読む

タイトルとURLをコピーしました