Word Balloon
Word Balloonとは、記事内に吹き出しを表示する無料でも利用可能なプラグインで
エフェクト、フィルター、アイコン、サウンドなどのカスタマイズができます。
このプラグインは、ブロックエディタ(Gutenberg)とクラシックエディタでも使用でき
デザインの調整もプレビューで確認しながら作業できるので簡単に吹き出しを追加するこができます。
本記事では、mixhostで簡単に吹き出しの追加とカスタマイズができる「Word Balloon」の設定方法を紹介します。
導入方法
プラグイン導入
WordPress管理画面より「①プラグイン欄:新規追加」→「②キーワードに【Word Balloon】と入力」→「③【今すぐインストール】」→「④【有効化】」の順に選択しプラグインの有効化しましょう。
アバターの追加及び設定方法
設定画面へは、WordPress管理画面の【設定欄:Word Balloon】をクリックし設定画面へ移動しましょう。
プラグイン設定画面では、アバターの管理とプラグインの設定を行うことができ
簡単にアバター登録と設定変更を行うことが出来ます。
アバターの作成方法
①アバターの新規登録
プラグインの設定画面のアバタータブで「アバターの新規登録」メニュー欄で
アバターの【アイコン画像】の選択と【名前】を入力し「アバターの登録」ボタンから
登録を行いましょう。
②新規登録したアバター
①にて新規登録したアバターについては、新規登録を行ったページの下部にある
【アバターのリスト】に最大3つまで登録でき、アバターの「ID」、「名前」、「メモ」を
いつでも変更を行うことが出来ます。
吹き出しの表示方法
吹き出しの追加方法は、ブロックエディターとビジュアル/テキストエディターの両方とも可能で
挿入するボタンは以下のようになっています。
※ページビルダーや使用されているテーマやプラグインによってうまくボタンが表示されないことがあります。
ビジュアルエディターを使用した場合を例として紹介します。
ビジュアル/テキストエディターの場合①と②の2つのボタンがありますが
機能に差はありませんが②のセリフセットの場合、ドラッグされている文章を
吹き出し内の文書として読み込むので基本的に②のセリフセットを使用するのをオススメします。
①吹き出しの挿入ウィンドウ
ボタンをクリックすると「吹き出しの挿入」ウィンドウがポップアップします。
ブロックエディターの場合
ブロックエディターの場合は、カスタマイズを行いたい吹き出しをクリックし
ブロックメニュー欄から同様にカスタマイズが行えます。
②ポップウィンドウの操作確認
②ー1:台詞の挿入
文章についてポップアップウィンドウの編集を完了し記事内へ挿入したあとからでも
編集することができるので仮の短い文書を入れ確認しながら作業するとカスタマイズ欄が
画面下部へ展開できるスペースができるのでオススメです。
②ー2:アバターアイコンの変更
ここでアバターアイコンを変更した場合、②‐3:アバターの呼び出し欄が
「名無しの権兵衛」に変更されアバター登録をしなくても利用することができます。
②ー3:登録したアバターの呼び出し
②ー4:台詞の位置変更
矢印をクリックし、吹き出し位置を逆にすることで
Q&Aや対話形式などで利用する場合に簡単に切り換えが行えます。
②ー5:吹き出しのデザイン変更
②ー6:吹き出しの微調整
ポップアップウィンドウ下部のアイコンをクリックすることで
記事内の表示位置や色、サウンドなど以下のカスタマイズ項目を展開するこができます。
- アバター:サイズ、向き、枠、表示名など
- 吹き出し:文字色、文字サイズ、
- アイコン:アイコンへの装飾
- エフェクト:アニメーション演出
- フィルター:セピア、コントラスト、透過など
- ステータス:吹き出しへのコメント、サウンドの追加
②ー7:吹き出しの挿入
ポップアップウィンドウ右端にあるアイコンをクリックすると
記事内にショートコードの埋め込みを行います。
②ー8:作成した吹き出しの確認
WordPressのプレビュー機能を使用し、Webサイトテーマや表示位置を
確認し吹き出しの追加作業は完了です。
ショートコード
ショートコードの直接編集を行いたい場合、下記公式ドキュメント詳細にて
確認をすることができます。
ショートコードの属性(公式ドキュメント)詳細へはこちら 外部リンク先を新しいタブで開きます。
設定項目
設定タブでは、無料版では以下の項目を設定をするこができます。
基本的には、設定項目の変更は不要ですが吹き出しのアニメーション演出が
不要な場合は設定を無効化しましょう。
項目 | 内容 | オススメ設定 |
吹き出しが画面に表示される際に
アニメーションさせる |
吹き出しが画面に表示される際に
アニメーション演出をします。 |
|
インナーブロックモード | ブロックエディタ使用時に、吹き出し内で自由なブロックが使用可能になります。 | |
Word Balloonボタンを表示する | Word Balloon(吹き出し)のボタンをWordPress画面上に表示します。 | |
アンインストール時にWord Balloonの
オプションを削除する |
||
投稿時にWord Balloonを使用するために
必要なユーザーの権限 |
WordPressのユーザー権限から指定した権限内に
Word Balloonを使用できる権限を付与します。 |
・投稿者 |
設定を使用するために必要なユーザーの権限 | WordPressのユーザー権限から指定した権限内に
上記設定項目を変更できる権限を付与します。 |
・管理者 |