ブロックエディタの装飾プラグインはあるのだけれど。

吹き出しのブロックが使えるのってなかなか見ない。

っということで、本腰を入れて探してみました。

WordPress公式のプラグインディレクトリにて吹き出しの英訳、「Speech bubble」で検索。

すると出てきた吹き出しのプラグインは5つでした。

その5つを実際に使ってみたんだけど、うち2つはPHPの警告出ちゃってた(>_<)

今後のアップデートに期待するとして、残りの3つを紹介します☆

吹き出しが表示できるプラグインはこの3つ

  • Word Balloon
  • Guten-bubble
  • LIQUID SPEECH BALLOON

どれも作者さんは日本人で、吹き出しっていうのは日本独自のWordPress文化というのがうかがえます。

今回は「吹き出しを表示させるためだけのプラグイン」を紹介するけど、機能の1つとしてブロックを追加するプラグインは探せば他にもあると思う。

でも“専用”ということで、吹き出しに特化したものに焦点を絞ってみました。

1つ目「Word Balloon」

Word Balloonの使い方

Word Balloonのブロックは「一般ブロック」にありました。

Word Balloonの設定項目について

設定項目も多く、今回紹介するプラグインの中では最も高機能でした。

特にアイコンに効果を付けられるのが表現の幅が広がって面白いと思います。

↓一例を挙げるとこんな感じ。

Word Balloonが出力するファイル

出力されたのは、わたしが使った環境ではCSSファイル2つと、Javascriptファイル1つでした。

ただどれも簡潔に記述されているので軽量です。

更に、Word Balloonブロックを使っている記事のみに出力されるという親切設計(*´▽`*)

トップページやカテゴリページ、Word Balloonブロックを使っていない記事ではCSS、Javascriptは出力されないので、表示速度への影響もなくナウいプラグインだと思います♪

2つ目「Guten-bubble」

Guten-bubbleの使い方

Guten-bubbleのブロックは「ウィジェットブロック」にありました。

Guten-bubbleの設定項目について

設定項目はWord Balloonほどではないけど、吹き出しのデザインにはこだわれそうな感じです。

Guten-bubbleが出力するファイル

出力されたのはCSS1ファイルのみ。

ただし、Word Balloonより大きめで全ページに出力されていました。

まぁ、不具合って訳じゃないし、Plugin Load Filterを使えば該当記事だけ出力させることはできるし重要な問題ではないか。

デザイン的にはWord Balloonと差別化されているので、Word Balloonがイマイチに感じた場合はGuten-bubbleを試すといいかも知れません。

3つ目「LIQUID SPEECH BALLOON」

LIQUID SPEECH BALLOONの使い方

LIQUID SPEECH BALLOONのブロックは「ウィジェットブロック」にありました。

「フキダシ」という名前のブロックです。

LIQUID SPEECH BALLOONの設定項目について

良く言えばシンプルです。

シンプルなのでデザインの幅は少ないですが、その分説明不要でとっつきやすいと思います。

アバターの角丸など、わたしが試した時点では設定でできなかったので、元の画像を丸く加工するなどの対応が必要です。

その他細かい調整も設定ではできないので、こだわる場合は自分でCSSを当てていく感じで、玄人向けな印象です。

LIQUID SPEECH BALLOONの出力するファイル

出力されたのはCSS1ファイルのみでした。

デザインがシンプルなので、CSSファイルのサイズも小さいのですが非圧縮。

LIQUID SPEECH BALLOONのCSSもGuten-bubble同様に全ページに出力されていました。

とにかくブロックエディタで吹き出しを表示させたい!

ごちゃごちゃした設定はいらない!

っていう人にはLIQUID SPEECH BALLOONがおすすめです。

まとめると

  • 高機能な「Word Balloon」
  • そこそこの機能がある「Guten-bubble」
  • シンプルな「LIQUID SPEECH BALLOON」

中でもWord Balloonはよくできてるね~。

吹き出し表示面の機能だけでなく、出力されるCSS・Javascriptにもこだわられているのは気が利いていますヾ(≧▽≦)ノ

あとがき

「ブロックエディタのプラグイン」っていうくくりで見れば、他にも吹き出しを表示させるプラグインはあると思う。

でもその分機能は凝ってないんじゃないかな?

そう考えると、Word Balloonが一番おすすめできる吹き出しプラグインになるかも。

ぶっちゃけ有料って言われても納得するレベル(笑

これが無料っていうのはスゴイ。

こだわった吹き出しコンテンツが作れることほぼ間違いなしです☆

わたしもこういうプラグインを作っていきたいな~(´・ω・`)