吹き出しでチャットみたいなデザインが可能「LIQUID SPEECH BALLOON 」

記事の中でチャットみたいな吹き出しデザインを作りたい

今日は最近使ってみたプラグインをご紹介します。私は普段お仕事としてのWeb制作や開発だけでなく、大阪のローカルメディアの運営にも携わっています。

大阪のローカルメディア「ぼちぼち」

喫茶店巡りをお仕事仲間としているのですが、「そのレポートを書くときに会話風の吹き出しデザインで記事作ってみたいね。」というアイディアが出てきました。

▼仕上がった記事はこちら。

ついに始動!純喫茶部・第1回活動レポート 梅田編

オシャレな吹き出しが簡単にできる「LIQUID SPEECH BALLOON」

時間をかけてコーディングをすればできるでしょうけど、できればもっと簡単にできたらいいな、と思いましたが、プラグインありました!「LIQUID SPEECH BALLOON 」

WordPress.orgのページ

LIQUID SPEECH BALLOON (吹き出し)

 

このプラグインは、リキッドデザイン株式会社さんというWeb制作/開発を手がける企業さんが開発されたそうです。リキッドデザインさんのページにも詳しく使い方が解説されていますので、参考にしてみてください。

https://lqd.jp/wp/plugin/speech-balloon.html?utm_source=admin&utm_medium=plugin&utm_campaign=balloon

 

「LIQUID SPEECH BALLOON 」の使い方

WordPress5.0以降で標準となった「ブロックエディタ 」に対応したプラグインです。
アバターが設定なしで使えますが、画像を登録すれば、メンバーが会話している雰囲気を作ることができます。

アバター画像の設定方法

画像を登録は以下の方法です。

1.アバターに設定したい画像を登録します。メディア->新規追加->メディアアップロードから画像をアップロードします。
2.設定->LIQUID SPEECH BALLOON から設定します。
3.吹き出しアバターの「名前」とアイコンの「画像URL」を指定して「変更を保存」します。

以上で、アバターの登録はできました。

記事の中で吹き出しを使う方法

投稿や固定ページで「フキダシ」ブロックを追加する、これだけです。「フキダシ」のブロックは一般ブロックの項目にあります。

 

出来上がったページ

難しい設定なしで吹き出しが記事の中に挿入され、会話している雰囲気が出ました。

 

 

お問い合わせはこちらから

南大阪を中心に活動しているエンジニアです。これまでの経験から、クライアント様のビジネス課題について一緒になって考え、課題解決のためにサポートさせていただきます。些細なご相談でも構いません。当方に期待することや課題、ご相談内容についてお聞かせください。原則として、24時間以内にご返信致します。