Word Balloon 公式ページ 会話形式の吹き出しプラグイン 使い方 WordPress

WEBサイトで見かける人物と吹き出しが表示され、
会話形式やインタビューの様に見えるやりとり。

これを簡単に作れるように
Wordpressで使えるプラグインを作ってみました。

2018年3月、Wordpress.org公式ディレクトリに登録され、
アクティブインストール数が2,000を超え、
累計ダウンロード数は18,000を突破した無償のプラグインです。

Word Balloon(吹き出し) ブロックエディタ(Gutenberg)対応。かんたんに吹き出しを表示して会話している様に見せる
 ja.wordpress.org
名前は『Word Balloon』です。
やーまん
やーまん

このプラグインの特徴は

  • 画像の管理はWordpress標準のメディアアップローダーを使うので、
    FTPソフトを使用した画像のアップロードは不要。
  • 投稿画面でふきだしのプレビューを見ながら作成出来る。
  • ふきだしの色はCSSの知識0でカスタマイズ出来る。
  • アイコンや効果を使うと動きが出せておもしろい。
  • CSSは使用している吹き出しの種類によって個別に出力し、容量を最低限に抑える。
  • ブロックエディタ(Gutenberg)、ビジュアルエディタ、テキストエディタそれぞれに対応

クイックマニュアル

ここではクイックマニュアルとして
ザックリした内容です^^;

より詳しい使い方は次の項目になりますのでスクロールして
移動してください。

ビジュアルエディタ、テキストエディタで
投稿画面のWord Balloonボタンを押すとこの様な画面が表示されます。

各機能は下記の通り

①:セリフの記入
②:アバターの変更
③:アバターの位置変更
④:吹き出しの変更
⑤:投稿内に挿入

それぞれのオプション選択やセリフの入力が出来たら
挿入ボタンを選択してください。

記事内にショートコードが入力されます。

Ver2.0.0よりブロックエディタ(Gutenberg)にも対応しました。

デモ

吹き出し一覧やアイコンや効果を使ったデモページはこちら

Word Balloon 公式デモ 吹き出し一覧 Word Balloonで使える吹き出し一覧です。 当サイトで実際に使っているので、 一部吹き出しは初期カラーを変更しています。 Word Balloon PROを使用すると、 初期カラーを設定可能になり…
 back2nature.jp
Word Balloon 公式デモ アイコンや効果を使った使用例 https://back2nature.jp/plugins/word-balloon/word-balloon-demo-1 https://back2nature.jp/plugins/word-balloon/word-balloon-demo-3 https://back2nature.jp/plugins/word-balloon
 back2nature.jp
Word Balloon 公式デモ 壁紙を使った使用例 https://back2nature.jp/plugins/word-balloon/word-balloon-demo-1 https://back2nature.jp/plugins/word-balloon/word-balloon-demo-2 https://back2nature.jp/plugins/word-balloon/…
 back2nature.jp
Word Balloon 公式デモ 横並び機能の使用例 デバイスの画面に左右されますが、 トリッキーな使い方ですが 麻雀を再現!? 無理矢理1行にする事も出来ますが、 吹き出しが縦長になったりするので、 現状では改行する様にしています。…
 back2nature.jp

使い方・説明書

Word Ballonはまだまだ開発途上のため、
仕様変更に伴いマニュアルと実際の画面が異なる場合があります。
予めご了承ください。

インストール

使ってみよう

登場人物(アバター)の位置変更

ふきだしの変更

登場人物(アバター)の変更

ステータスの使い方

ショートコードの属性一覧

復元機能の使い方

ブロックエディタでの使い方

設定

作者からのお願い

注意点としてアバターの登録情報は
WordPressのデータベースにWord Balloon専用で新規登録を行っていることです。
プラグインにデータベースを触られたく無い方は、
このプラグインのご使用はお控えください。

尚インストール済みプラグインのページから
Word Balloonを削除した際には、
プラグインで使用したデータベースとオプション部分は削除され、
クリーンアンインストール仕様となっています。

このプラグインを使用した事によって生じた
トラブルや障害などに対して作者は一切の責任を持たないものとします。
このプラグインの利用はすべて利用者の責任において行ってください。

Word Balloonを使用した投稿をチェックしているテーマは
Simple DaysとTwenty Nineteenのみです。

特定のテーマに依存する様な形では製作していませんので、
多くのテーマでご利用可能と思います。

但し、

お使いのテーマによっては、
Word Balloonが使用するdivタグやimgタグに
テーマ独自のスタイルが適応されます。
その際は作者が意図したアバターや吹き出しの配置になりません。
コンテンツ内のdivやimgタグにmarginが指定されているテーマだと絶望的です。
やーまん
やーまん

また今後のバージョンアップに伴い
突然仕様が変更になる場合もあります。
その際、旧バージョンと互換性が無くなる場合もあります。
アップデートされる場合は事前にテストサイト等で動作確認を行って下さい。
この点も予めご了承ください。

ブラウザのキャッシュ機能により、
Word Balloonをバージョンアップして動作しないケースがあります。
お手数ですがブラウザのキャッシュクリアをお試し下さい。

Internet Explorer10以前は動作非対応です。
11は初期設定で設定されている色のみが表示されます。
CSSの変数非対応のため、吹き出し画面で設定した吹き出しの色は表示されません。
なるべく新しいブラウザをご利用下さい。

やーまん
やーまん
以上、作者からのお願いでした。

旧バージョンへのダウングレード

互換性維持のため旧バージョンもwordpress.orgにて配布しています。
下記リンク先より旧バージョンをダウンロードをして、
必要に応じてダウングレードを行ってください。

Word Balloon(吹き出し) ブロックエディタ(Gutenberg)対応。かんたんに吹き出しを表示して会話している様に見せる
 ja.wordpress.org

ダウングレードはFTPソフトを利用するか、
下記の記事を参照にアンインストーラのプログラムを作動させずに、
プラグインを削除、その後に再アップする方法があります。

WordPress プラグインのアンインストーラを作動させない方法 WordPressのプラグインを削除した際、 そのプラグインが保存してたデータを削除するシステムを導入する様に、 wordpress.orgは作者に対して推奨しています。 私もいくつかプラグインは…
 back2nature.jp

上記方法で行ったver1.0.xからver0.6.6へのダウングレードは
保存データを維持したまま可能です。

旧バージョンのサポートは基本的に行いません。
数多くのバージョンが存在するため、
各バージョンの内容を鮮明にこちらでは記憶していない為です。
お応えできる内容でしたら対応出来ますが、
失念してる場合もありますので、予めご了承ください。

バグ報告

もし不具合などありましたら、
まずはこちらをお試し下さい。

WordPressのテーマやプラグインが動かないときに試すこと テーマやプラグインを作成して公開していますが、 それらが動作しないお問い合わせがあります。 動作しない原因が開発者側のミスやバグもありますが、 使用者側のご利用環境に原因があ…
 back2nature.jp

解決出来ない場合は、
下記Word Press公式サポートページよりお願いいたします。
英語表記ですが、もちろん日本語で投稿OKです。

やーまん
やーまん
むしろ日本語でお願いいたします^^;

[Word Balloon] Support | WordPress.org Support
 wordpress.org

アドオンプラグインの紹介

Word Balloonの機能を強化させるWord Balloon PROを
サブスクリプション方式で展開しています。
新規ご契約を現在募集中です。

こちらもどうぞよろしくお願いいたします。

Word Balloon PRO 公式ページ Word Balloonの追加アドオンプラグイン Word Balloon PROはWord Balloonの各種設定を可能にするアドオンプラグインです。 最新のバージョンは Word Balloon PRO単体では動作しませんので、必ずWord Balloonもご用意下さい。 W…
 back2nature.jp

ガンダムで例えるなら
Word Balloonはコア・ファイター、
Word Balloon PROがガンダム本体です。

開発後記

是非フォローしてください

最新の情報をお伝えします

やーまん
  • やーまん
  • 山奥に移住し、自然に囲まれ暮らしています。
    日々の事で感じた事や考え方などを備忘録として残しています。