吹き出しを使った会話って見やすくていいですよね
word pressで 吹き出しを作るのはどうすればいいか調べました。
プラグインの「LIQUID SPEECH BALLOON」と
「word balloon」がおススメで出てきました。
また、Cocoonを利用しているのですが、
こちらに標準装備の吹き出しもあり
超初心者にとって
どれが使いやすいかを検証た結果
- Cocoon標準装備の吹き出し
をベースで使い
プラスで
- word balloonのプラグイン
がを入れるのが超おススメ！でした
POINT
CSSという言葉すら知らなかった超初心者がWordPressで会話を作るにあたり
「LIQUID SPEECH BALLOON」 プラグイン(無料）
「word balloon」 プラグイン（無料）
「Cocoon 標準装備吹き出し」
を比べてみました
LIQUID SPEECH BALLOON
まずは LIQUID SPEECH BALLOON
プラグインをインストールすると一般ブロックの「フキダシ」から
吹き出しを作成することができます
吹き出しに使う画像の設定は
「インストール済プラグイン」→「 LIQUID SPEECH BALLOON」→「設定」
で設定します。
「フキダシ」を 選ぶとこんな感じでデザイン等が
右のブロック設定から変更できます
背景色と文字色を変えてみました。
ブロック設定から変更できるのでCSSいらずでラクチンですね
これが右ブロック設定で変更できるものです
吹き出しのデザイン、背景色、文字色、アバターのサイズをCSSなしで変更できます
アバターの登録は何個でもOK
アバターのサイズはすごく大きくなるわけではないので個人的にちょっと物足りないです
フキダシの枠の色だけ変えたいなどカスタマイズはブロック設定からはできません
word balloon
お次は「word balloon」
プラグインをインストールすると、
一般ブロックに「word balloon」と表示されます
アバターの登録は LIQUID SPEECH BALLOON と同様、
インストール済プラグイン→WordBalloon→設定で行います
ただし無料版は３つまでしかアバター登録できません！注意を！
早速WordBalloonを選択すると、
右カラムのブロック設定で様々なことが変更できるのです！！！
これは「フィルター」→「アバター」→「セピア」で変更しました。
サイズは標準です
CSSなしで様々なことができます！
神プラグイン！！！
しかも無料！！！！！
初期設定で吹き出しがこのように動く仕様になっています
動かしたくなければ
「インストール済プラグイン」→「WordBalloon」→「設定」から変更を
Word Balloon について詳細は開発者公式サイトでチェックを→こちら
- 吹き出しの種類も多く、CSSの知識がなくても上級者のような吹き出し会話が可能
- CSSなしで背景色や文字色を簡単に変えられるだけではなく、
- セリフに合わせた感情なども表せます。
- アバター登録数は無料版だと３つのみ
- アップデートされると古いバージョンで作った吹き出しは下書きの時にHTMLで表示される
Cocoonの標準装備の吹き出し
Cocoon吹き出しの標準サイズです
Cocoon は素晴らしいワードプレス テーマで、様々なものが標準装備されています。
「吹き出し」もその一つ
プラグインを入れなくても会話を記載できます
アバター等は「Cocoon 設定」→「吹き出し設定」から設定
アバターの画像もここで変更できます
2019.11.25追記
更新プログラムにより、吹き出しの色、吹き出しの枠の色がブロックの操作で変更できるようになりました！
アバターのサイズ変更はcss入力が必要です
検索するとコードをコピペするだけでOKの素晴らしいサイトが沢山あり
cssや HTMLの知識0の初心者でも簡単に仕様変更できるハズなのですが、
私は吹き出しの色を変えるだけでもすっごい時間がかかりました
CSS、書いてあることが全く頭に入ってこない・・・
コードコピペして貼り付るだけなのに、なぜかちゃんと反映されないことばかりで💦
とにかくすっごい時間がかかりました
CSSが問題なくできる方は好きなようにカスタマイズできるので一番いいかなと思います
プラグインを入れずに会話記載ができる
CSSで好きなようにカスタマイズできる
アバター数制限なし。
まとめ
プラグインを入れるなら
CSSなしで色々カスタマイズできるWordBalloonが初心者におススメ
また、Word Balloonは無料版だとアバター数に制限があるので、
アバター数を増やしたいのであればテーマをCocoonにして併用すると色々使えて便利です
コメント