今回は吹き出しを簡単に実装できるプラグイン、
「LIQUID SPEECH BALLOON」のご紹介です。
WordPressの新エディターGutenbergに対応しており、
小難しい設定無しで吹き出し会話が作れます。
サイト制作での用途としては、
◇お客様の声
◇よくあるご質問
◇対話形式の解説系記事
こういったものが適してるでしょう。
～ 目次 ～
- インストールと有効化
- アバターの顔画像と名前の登録
- 吹き出しの作成
- 実際に作成してみました
- 各WordPressテーマによる表示
- 「Gutenberg」でのみ作成可能
- 追加：アップデートにより表示が乱れた場合
インストールと有効化
WP管理画面にて「プラグイン」⇒「新規追加」、
「LIQUID SPEECH BALLOON」にて検索。
大文字だらけのプラグイン名は珍しいので、すぐに分かりますｗ
これをインストールし、有効化します。
アバターの顔画像と名前の登録
まず、吹き出しに使うアバターの顔画像と名前を登録します。
WP管理画面にて
「設定」⇒「LIQUID SPEECH BALLOON」。
登録欄が開くので
ここでアバターの顔画像と名前を登録します。
登録後は「変更を保存」をクリックしてください。
アバターの顔写真を用意するのが難しいという人は
以下のような素材サイトで探してみてください。
吹き出しの作成
さて、吹き出しの作成です。
各投稿・固定ページの編集画面にて、ブロックの作成アイコンをクリック。
すると吹き出し作成欄が表示されます。
こんな感じで吹き出しブロックを次々に作っていきます。
画面右側には設定欄があります。
ここから各吹き出しの
「アバターの画像切替え」
「アバターの向き」
「吹き出しのデザイン」
「吹き出しのサイズ」
「吹き出しの背景色」
「吹き出しの文字色」
これらの設定を行います。
残念ながらフォントの種類の変更は出来ません。
テーマのデフォルトフォントが適用されます。
これはCSSをいじらないと無理ですね。
実際に作成してみました
２つほど作ってみました。
実際の表示はこちらから。
＊デモサイト
各WordPressテーマでも正常に表示されるか？
このプラグインを作った「リキッドデザイン」は
以下のWordPressテーマも作成しています。
「LIQUID LIGHT」
「LIQUID MAGAZINE」
「LIQUID CORPORATE」
「LIQUID LP」等々。
当然ですが、これらのテーマでは吹き出しは正常に表示されます。
問題は他のテーマですが、
私が確認した限りでは「Twenty Twenty」以下の
４つのWordPressデフォルトテーマでも問題なく表示されました。
↑「Twenty Twenty」での表示
また、「Lightning」や「Luxeritas」でも問題ありませんでした。
「Gutenberg」でのみ作成可能
このプラグインによる吹き出しは
新エディターの「Gutenberg」でのみ作成可能です。
WordPressバージョン5未満の旧エディターや
プラグイン「Classic Editor」を有効化している状態では作成できません。
「Classic Editor」を使ってる人は、
一旦「Classic Editor」を無効化して作成後にまた有効化させてください。
追加：アップデートにより表示が乱れた場合
2020/3以前にインストールした場合、
アップデートにより、表示が乱れることもあるようです。
こんな感じ↓
吹き出しの形がヘンテコになってますな(^_^;)
その場合、投稿記事の編集画面を開いてください。
「このブロックには、想定されていないか無効なコンテンツが含まれています。」
と表示されているので
右上の「３つの点」部分をクリック。
「ブロックのリカバリーを試行」をクリックし、投稿を更新してください。
正常に戻ります。
