【WordPress】会話形式の吹き出しプラグインWord Balloon

よくブログなどで見かける
人物と吹き出しが表示され、
会話形式の様に見えるやりとり。

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

やーまん(普通の顔)

名前は『Word Balloon』です。

このプラグインの特徴は

登場人物を予め登録して、
それ以降はメッセージの入力や吹き出しの位置を選択するだけで、
簡単に作れる事です。

登場人物(アバター)はメディアライブラリに登録している物から
選択出来るので、管理も簡単です。

Word Balloonのインストールから導入

WordPressの管理画面メニューより

プラグイン > 新規追加 を選択。

キーワードに

word balloon

と入力してください。

表示されたら今すぐインストールを選択。

インストール中と表示され、インストールされたら

有効化ボタンを押してください。
以上でインストールから導入まで出来ました。

プラグインをダウンロードしてから自前でインストールする方は
Wordpress公式プラグインディレクトリよりダウンロードしてください。

Easy to add word balloons in your post.
 wordpress.org

Word Balloonの設定

Word Balloonの設定はインストール済みプラグインもしくは
設定 > Word Ballonのいずれかから出来ます。

設定画面が表示されるとこんな感じです。

アバターの設定

設定画面では登場人物(アバター)の設定をします。

写真を選択もしくは人物像が表示されている部分を
クリックしてみてください。
Wordpressでおなじみのメディアアップローダーが表示されます。

ここでアバターとして使用する写真を選択、もしくはアップロードを行ってください。

使用したい写真を選択後、右下の選択ボタンをクリックしてください。

画像のサイズは360px以下を推奨します。
それ以上のサイズはサムネイル等を選択する仕様となっています。

写真が選択出来たらアバターの名前とコメントの入力になります。
いずれも入力は任意になります。
沢山アバターを登録される方は入力することを推奨します。

名前は実際の投稿にも表示されます。(オプションで非表示可)
コメント欄は同一名のアバターを登録した際
例えば笑い顔や泣き顔など投稿者が違いが分かるように
使う事を想定してあります。
こちらは記事内に表示される事はありません。

最後に登録ボタンをクリックして登録完了。

登録が出来ているとアバターリストに表示されます。

投稿画面で実際に使ってみる

アバターが登録できたら実際に投稿してみます。
投稿画面を表示させるとWord Balloonのボタンが表示されます。

通常のテキストモードは

ビジュアルエディタは

Gutenbergは書式設定のクラシックから

それぞれのボタンを選択すると

この様な画面が表示されます。

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

記事内に投稿されます。
ビジュアルエディタ、テキストエディタ両方に対応しています。

実際に使ってみるとこんな感じです。
↓↓↓↓↓↓

やーまん

やーまん(普通の顔)

ここに色々
セリフなどを書き込んでください。

やーまん(普通の顔)

やーまん
右からだと
こんな感じになります。
アバターの画像サイズも変更可能です。

やーまん(んが)

やーまん
考え事の吹き出しはこんな感じです。

やーまん(普通の顔)

やーまん
カラー版はこんな感じで、
初期カラーはLINE風です。

やーまん(普通の顔)

やーまん
色はカラーパレットから自由に選択出来ます。

ご注意

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

インストール済みプラグインのページから
このプラグインを削除した際に、
データベースからこのプラグインで使用した部分は削除されます。

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

また今後のバージョンアップに伴い
突然仕様が変更になる場合もあります。
その際、旧バージョンと互換性が無くなる場合もあります。
この点も予めご了承ください。

やーまん(グー)

やーまん
以上、作者からのお願いでした。
Easy to add word balloons in your post.
 wordpress.org

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

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

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