漫画でお馴染みの表現方法「フキダシ」。
キャラクターのセリフをつつむように囲んでいるアレです。
今回は、そんなフキダシをブログ記事内に簡単に表示させる方法を紹介します。
吹き出しを使えば、会話形式、インタビュー形式、独り言などを画像を付けて表現することができます。
最近はブログ内でもよく見かける「フキダシ」ですが、Wordpressの標準機能では準備されていなく、以下のようなカタチで実現されます。
- ■ テーマ付属のフキダシ機能を使う。
- 吹き出し機能のついているテーマはそれほど多くはないのですが、最近、特に日本製のテーマは吹き出し機能を持つものが増えてきました。
無料テーマのCocoonや、このサイトでも使っているJINにも搭載されています。【短所】テーマ独自の機能でフキダシを実現しているので、テーマを変えるとすべてのフキダシレイアウトが崩れたり、表示されなくなったりする。
ショートコードを使用している場合は、ショートコードがそのまま表示される。 - ■ 自力でつくる。
- CSS等を駆使してフキダシを作ったり、自力でプラグインを作ったりすることで実現可能です。【短所】
知識があればつくることも可能だが、そこそこ面倒。
- ■ 吹き出しプラグインを使う。
- 以前はSpeech Bubbleというプラグインがあって、使い勝手はあまり良くはなかったものの、コレといったプラグインがなかった為にフキダシのプラグインとしてはなんとなく使っている人も多かったかもしれません。
現在Speech BubbleはWordpress公式サイトでも公開停止となっていて「死んだプラグイン」となっています。 - これといった吹き出しプラグインが無い中、今回紹介する「Word Balloon」はダントツの高機能と使いやすさです。
どんなプラグインかざっくり説明すると…
- 難しい設定をしなくても簡単にフキダシをつくれる。
- 直感的に設定ができてめちゃくちゃ使いやすい。
- フキダシのデザイン、色、影の付き方など細かい設定も簡単。
- アニメーション効果も設定できる。
- 画像アップにFTPとか不要。
- CSSは使用する吹き出しの分だけ出力。
- 結構な頻度でバージョンアップされている。
- どこかの山奥で暮らしているらしい日本人のやーまんさんがつくっている。
テーマ付属機能ではなく、プラグインの機能で吹き出しを実現しているので、
テーマを変更してもそのまま表示される長所もあります。
もくじ
インストール方法
Word BalloonプラグインをWordpressにインストールします。
- WordPress管理画面の「プラグイン」→「新規追加」
- 画面右上のキーワード欄に「Word Balloon」と入力
- 表示された「Word Balloon（吹き出し）」の「今すぐインストール」をクリック。
- インストールが終わったら「有効化」をクリック。
初期設定方法
「設定」→「Word Balloon」から設定画面に入ります。
設定は大きく分けて、「アバターの設定」と「各種設定」がありますが、とりあえず「アバターの設定」だけしておけば使用することができます。
アバターの設定
「アバターの設定」の「アバターの新規登録」では、アバター（キャラクター）を登録していきます。
アバター画像は、設定で四角、角丸、まん丸などに変化させることができるので、画像をわざわざそのカタチに加工する必要はありません。
設定項目の「名前」はキャラクターの名前、「メモ」は記事内に掲載する時に自分がわかりやすくする為のものでどちらもお好みで入れてください。（入れなくてもOKです。）
最後に、「アバターの登録」ボタンを押して完了。
アバターをいくつか登録した例。わかりやすくリストで表示されます。必要な数だけ登録していきます。
いろいろな表情をしている登場キャラクターがあるといいかもしれません。
各種設定
「各種設定」では、「通常設定」、「ふきだし」、「アイコン」、「効果」、「フィルター」、「壁紙」の設定ができます。
基本デフォルトのままでも使用可能です。
より細かい設定をしたい場合や、使わない項目を非表示ににしたい場合に設定します。
ここで設定する項目は、記事内にフキダシを挿入する際の詳細設定項目（「かんたんモード」をオフにした状態）です。
通常設定
ここではフキダシを記事内に挿入する際のパラメーターのデフォルト設定を行います。
アバターの位置、フキダシの形、影の度合い、アイコンの大きさ、非表示項目など、非常に細かく設定できます。
ふきだし
「ふきだし」では、アバターの隣に表示される吹き出しのデフォルト表示設定を行うことができます。
使うことのない吹き出しはチェックボックをオンにすることで投稿時の設定で表示されなくなります。
■選択できる項目
セリフ、考え事、カラー、丸い、しっぽ、ぽっち、上側、下側、SOi、RPG Ⅰ、RPG Ⅱ、RPG Ⅲ、セリフ太枠、ぽっちグラデーション、丸いグラデーション、ハート、にょろにょろ
アイコン
「アイコン」は、設定したアバターの上に重ねることのできるイラストのことです。
ハートやビックリマークなど、10種類以上ありますが、ここではアイコンの色とそのフチを設定することができます。
「アイコン」では、投稿時に非表示にする項目にチェックを入れます。
デフォルトでは何もチェックはついていませんので、吹き出しキャラを挿入する時の設置で以下の項目をすべて選択することが可能となります。
自分では絶対選択しない項目や選択肢が多すぎてウザい時に設定します。
■選択できる項目上矢印、下矢印、はてな、ハート、ハート（複数）、怒り、感嘆符、感嘆符（複数）、８分音符、汗、汗汗、がーん
（←は「汗汗」を追加した例です）
次の「効果」を使用すれば、汗だけアニメーショにすることもできます。
効果
「効果」はアバター、アイコン、吹き出しにアニメーション的効果を付けることができる機能です。
絶対使わないであろう項目はチェックボックスを入れることにより、投稿時に選択できなくなります。
アバター：揺れる
アイコン：振動
フキダシ：左右
※あまりやりすぎるとウザくなるので注意
■選択できる項目上下、振り子、揺れる、鼓動、振動、左右、右回転、左回転、点滅、ロール右、ロール左、ロール上、ロール下、上がって消える、下がって消える、ゴム
フィルター
「フィルター」は、アバター、アイコン、吹き出しに画像フィルターをかけることのできる機能です。
フィルターは効果と同じく、絶対使わないであろう項目はチェックボックスを入れることにより、投稿時に選択できなくなります。
ぼかし、明度、コントラスト、モノクロ、色調回転 90°、色調回転 180°、色調回転 270°、階調反転、透過、彩度、セピア
壁紙
「壁紙」では吹き出しエリアの背景を設定することができます。（アバターの背景ではありません。）
合計5種類の壁紙を設定できます。
ここで壁紙設定すると、フキダシ挿入時に壁紙を選択可能になります。（逆に言うと、ここで設定しないと表示されません）。
単純にバックに色を付けるだけでなく、枠線の太さ・種類、角丸。画像を貼ることもできます。
吹き出しエリアの背景に色と罫線を付けた例
Word Balloonの使い方
Word Balloonは使い方もすごく簡単です。簡易プレビュー機能も持っているので実際挿入する前にどういう感じで挿入されるか確認することができます。
すごく親切で便利。
手順１：Balloon Wordのボタンを押す
記事や固定ページの投稿画面で、本文中の挿入したい場所にカーソルを合わせた後、Word Balloonのボタン又は「吹き出し」ボタンを押します。
テキストモード、ビジュアルモード、Gutenberg（Wordpress5.0以降のブロックエディタ）でボタンが違ってきます。
テキストモードの場合
ビジュアルモード、Gutenbergの場合
※上の画像はクラシックエディタのビジュアルモード画面ですが、Gutenbergも同じような場所にあります。
手順２：プレビューを見ながらいろいろ設定して挿入。
ボタンを押すとWord Balloonの設定画面が表示されます。
ここに、セリフ、アバターの種類、吹き出しの位置、吹き出しの形状を設定します。（画面下部に表示されている「壁紙」は、前項の設定画面で設定しないと表示されません。）
もっと細かく設定したい場合は、画面右上の「かんたんモード」をオフにすると、設定項目が増えます。
この画面でアバターのサイズ、形状、吹き出し文字の色、文字サイズ、影の有無、アイコンの付加、効果、フィルターなどの設定を行います。
特にこだわりがなければ設定不要です。
設定を変更すると上部の画像がリアルタイムで切り替わるので最初はいろいろ試してみると良いかもしれません。
最後に、「挿入」ボタンを押して完了です。
注意点
Word Balloonプラグインは、アバター登録情報等をデータベース内に保存される仕様となっていています。
それ自体は全く問題ないのですが、注意すべき点はWord Balloonプラグインを削除した時で、プラグイン削除と共にデータベース内のWord Balloon情報を消してしまう「立つ鳥跡を濁さず」仕様となっています。
有効化、無効化は問題ないかと思いますが、プラグイン自体削除して、再度インストールしても設定は戻らないので、そこだけ一点注意です。
最後に
今までありそうでなかった吹き出しプラグイン「Word Balloon」を紹介しました。
ユーザーの立場にたった非常に分かりやすい操作感で、流石メインドインジャパンといった品質です。
こんな便利で素敵なプラグインを無料で提供して頂ける作者のやーまんさんに感謝感謝です。
1年間、1ライセンス、1サイトで1,280円です。
う〜ん。
