こんにちは。
@OfficeTAKUです。
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(上から）
あまりワードプレスに詳しくないからさ。
Facebook風 type:fb
Facebook風フラットタイプ type:fb-flat
LINE風 type:ln
LINE風フラットタイプ type:ln-flat
ピンク type:pink, subtype:b, a, d, c
私達の顔ものっぺらぼうになったわ。そう言えば名前も A san , B san って安直だし。
上の会話からピンクっていうスタイルね。これはその吹き出し口違い。
ドロップ type:drop, subtype:b, a, d, c
シンク type:think, subtype:b, a, d, c
人物素材
今回利用させて頂いた人物の顔の素材は、ずっと前に購入した「ビジネスイラスト素材集」
社員Aと女性社員Aを利用させてもらいました。
作者 河野浩之さんのサイト：ソザイヂテン
「Speech bubble (ふきだしプラグイン)」を選んだわけ
Speech bubble (ふきだしプラグイン) | WordPress.org
利用者の多い「Speech bubble (ふきだしプラグイン)」
不安要素としては、冒頭のプラグインの問題点でも書きましたが
・使っているテーマに影響はないか
エラーがでたりするよ、っていうブログ記事もありました
・現時点で３年間程更新されていないが大丈夫か
の２点でした。
しかし、検索して関連記事を多く読んで見ましたが特に問題なく使えそうです。
上記２点に関して問題視する記事もありましたが、大丈夫だよ、ちゃんと使えてるよ、って記事も多かったです。
決定的なのが、私が現在利用しているテーマ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をいじらなくてもよい方法を紹介してくれている記事もありました。
また、時間をみて試してみたいと思います。
- コピペとクリックで簡単！WordPressでLINE風の吹き出し会話を作る方法 | CREARC（クレアーク）
- WordPressでLINE会話風の吹き出し AMP対応 プラグイン不使用 | WEB工房しずおか
- ワードプレスで会話風吹き出しをCSSとHTMLで作ってみた！｜前をむいてゆっくり歩こう
「Speech bubble (ふきだしプラグイン)」は手軽に会話風吹き出しを表現できて便利です
2018年８月３日現在、
WordPress 4.9.7 試したテーマはこのサイトの TCD MAG と、BizVektor [ ビズベクトル ] の２種類。
どちらも、問題なく表示されています。
「Speech bubble (ふきだしプラグイン)」は、WordPressで会話風吹き出しを手軽に実現できるのでおすすめです。
話しは変わりますが、5月にTCDさんのWordPressテーマMAGを購入して利用し始めました。無料のテーマを使って自分であれこれ悩んでいじっていたのが何だったんだろう、って思います。
ほんと、購入してからは記事を書くことに専念できるようになり、とても楽になりました。やはり、餅は餅屋です。
もし、ブログを本格的にやろうと思っている方。書くことに専念したい方はテーマを購入する方が絶対によいと思います。さまざまなWordPressデザインテーマがありますので自分にあったものが見つかると思います。
