[WordPress] 吹き出し会話のプラグインをまとめてみた



Nプログラマ(@Nprog128)です。

最近、トークアプリのような吹き出し会話の表現しているブログをよく見かけるようになりました。

なプ

ひだりから、こんな感じ!

みぎから、こ〜んな感じ!

なプ
上の吹き出しについて

このブログではHugoを使っているので、自分でゴリゴリとhtml + cssを書いています。。。

WordPressで上記のような会話を表示するには、プラグインを使って表示することができます。

今回は、そんな会話風の表現ができるWordPressのプラグインをまとめてみました。

なプ

新しく見つけたり、試したものがあれば追加していきます。

WP-Speech-Balloon

Tips 4 Lifeさんの管理人:RA’s さんが作られているWordPressのプラグインです。
» 「WP-Speech-Balloon」のインストール方法

5種類の吹き出しデザインが準備されていて、シンプルで使いやすいです。

会話を表示するためにショートコードを使うのですが、作者さんのサイトでテンプレートが準備されています。

そのテンプレートをコピペして、以下の情報を入力すれば簡単に吹き出し会話を作ることができます。

  • 吹き出しする人の画像URL
  • 吹き出しの内容

プラグインのアップデートも定期的に行われており、作者さんのサイトにサンプル付きの詳しい説明もあります。

なプ

自分が運営している別のWordPressのブログで使っています。

Liquid Speech Balloon

Liquid Press(有料テーマ)の プラグイン として無料で公開されています。

プラグイン自体は無料なので、他のテーマに組み込んで使うことも可能です。

WordPress5から採用されたエディタのGutenbergで使うことができます。

なプ

もちろん、レスポンシブに対応。

公式のお知らせによると2019年2月6日に公開とツイートされているので、まだ出たばかりだけど今後人気が出てきそうな感じがする。。。

ちょっとだけ使ってみた

開発用環境でちょっと使ってみましたが、メチャクチャ使いやすいです!

記事編集画面から、ブロック単位でプレビューしながらサクサクと会話を作ることができます。

吹き出し用の画像も10個以上(追加可能)登録できます。

あとは、吹き出しの縦並びもなかなか面白い機能だと思います。

なプ

これはかなりスゴイのでは。。。!

ただ個人的に、吹き出し文が短くても本文の幅いっぱいまで吹き出しのエリアが広がるのが、ちょっとだけ気になる感じです。
(この辺は好みですかね)

今のところ吹き出しデザインが2種類(標準、バブル)のみなので、もう少し種類が増えてほしいトコロ。。。

使いやすいですが機能を限定している印象です。

このプラグインを充実させたモノを有料テーマ内に組み込んでくるのではないか?とちょっと想像してしまいますw

プラグインのバージョンアップでv.1.0.5より、吹き出しの種類に四角、破線、シャドウが追加されました。

吹き出しの幅についても、オプション項目で短いに設定すると、文章の長さによって吹き出しの幅が変わるようになっていました。

なプ

無料の範囲で、かなり機能が充実してきている。。。

ぜひお試しあれ!

Liquid Speech Balloon

ブロックに表示されないとき

プラグインをインストールしてもブロックの追加で候補に表示されない時は、ブロックの検索カタカナでフキダシと入力すれば、一般ブロックのカテゴリで表示されます。

Word Balloon

最近見つけた吹き出し会話プラグイン。

Back 2 Nature のサイトの運営者:やーまん さんが開発されている プラグイン です。

Word Balloon

まだ試していないのですがデモページを見た感じだと、発言者や吹き出しにアニメーションをつけたり、吹き出し付近に音を再生するボタンなどを設定して表示できるみたいです。

デモページで一斉に吹き出しがプルプルと動くのは、大勢の人に迎えられているような感じですよ。

追加のアドオン(有償:サブスクリプション方式)で、利用できる機能が増えるらしいです。

有償のアドオンについての詳しい内容は、 公式のページ に案内があります。

番外編

Speech Bubble(開発が終了してる?)

こちらは、昔に少しだけ使っていたプラグイン。

しかし、WordPressのプラグイン検索から見つけることができなくなっていました。

以前確認できた時は、最終更新日が年単位で古かったので開発を終了したのかもしれないですね。。。

WordPressの「吹き出し会話 プラグイン」などで検索すると、こちらの情報が多くヒットするのでプラグイン名をよく確認しましょう。

なプ

似たような名前が多くて、見間違える。。。

ちなみにWordPressのプラグイン検索で、 同名の別プラグイン が検索結果の下の方にありました。

しかし、スクリーンショットの紹介を見ると画像の中に吹き出しを入れる感じになっているので、自分が以前に利用していたプラグインとは別物のようです。

おわりに

今回は、WordPressの吹き出し会話が利用できるプラグインのまとめ、という内容でした。

プラグインを利用することで簡単に吹き出し会話が表現できますが、開発が終了することも視野に入れて、代替手段を準備しておいたほうがいいかもしれないですね。

なプ

最終的には、HTML + CSSでゴリゴリっと、、、!

それでは、このへんで。
バイナリー!

\ ちょっとお買い物 /


関連した記事