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を利用させてもらいました。

「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

ピックアップ記事

  1. [Kindle] 2018年8月 月替わりセール ピックアップ
  2. 机からケーブルを落とさない NuAns WORKLIFE FOLDKEEPER …
  3. 災害時に役立つTwitterアカウント、情報サイト等まとめ
  4. [レビュー] Lenovo Ideapad 520 スタンダードな充実ノートパソ…
  5. [レビュー] Lenovo Ideacentre 720 使えば手放したくなくな…

関連記事

  1. WordPress

    Web

    WordPress HTMLタグの入力を楽にする「Wp Zen Coding」プラグイン

    ブログの記事を欠く時、タグの入力とか面倒なので以前はエディタで書いて貼…

  2. WordPress

    Google Docs から WordPress へ!

    こんにちは。@OfficeTAKU です。Jet Pack…

  3. Wordpress ビジュアルエディタ

    WordPress

    [WordPress] ビジュアルエディタならExcelの表を簡単にはりつけ可能

    こんにちは。タグは手打ち派 @OfficeTAKUです。普…

最近の記事

人気の記事

  1. Excel

    [ Excel ] 今日から役立つExcel人気記事ベスト10
  2. Word

    [Word]文字書式を解除する(標準スタイルに戻す)ショートカットキー [Ctr…
  3. Web

    2018年7月 の人気記事はこれだ!月間 アクセス数 ベスト10
  4. Lenovo ideapad 720S

    ハードウェア

    [レビュー] Lenovo ideapad 720S とThunderbolt …
  5. Security

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