WordPressで吹き出しで会話させたときの話

こんにちは。

今回は、WordPressでHP作ってたときの、吹き出し形式の表示の仕方についての備忘録となります。

　

なにぶんnoteに移行して現物を見せることができないのですが、成功したのはしたので参考になるところがあれば幸いです。

1.プラグインを使う？　使わない？

私が達成できた方法はプラグインを使うやり方です。使わないやり方もあるようなので、まずはエディターについて話してからプラグインでのやり方についてお話しします。

WordPressのエディターは最近大幅に変更になったようです。（2019当時）

今のエディターはGutenbergという名前で、大幅に変更が行われ、よりビジュアル的に編集できるようになったことで、かえって使いにくくなったと苦情も多いみたいです。

私はGutenbergが初のWordPressのエディターなので、むしろ使いやすいと思っていたぐらいなのですが、丁寧に教えてくださっているサイト様を参考にする場合は異なる点が多くて苦労するかもしれませんね。

とはいえ、本当に前のエディターが良いのなら、Classicエディター(昔の形式に戻す)もプラグインであるみたいなので、お好みでどうぞといった感じでしょうね。

私はGutenbergでとりあえずはやっていこうと思っています。

最初は、外観>カスタマイズ>追加CSS　にクラスを書き加える形式でやろうとしていたのですが、使っているテーマのせいなのか、エディタが変わったせいなのか、私がポンコツなせいなのかはわかりませんが、うまくいきませんでした。

そこで、プラグインを探すことにしました。

2.吹き出しが簡単に作れるプラグイン

吹き出しが作れるプラグインは、簡単に探してみたところ、word balloonとLIQUID SPEECH BALLOONが見つかりました。

word balloonは吹き出しやアイコンを動かせるのが強みのようでしたが、僕の場合はあんまり吹き出しを動かしたいとは思わなかったので、LIQUID SPEECH BALLOONに決めました。

詳しいやり方に関してはまゆ玉様のサイトで丁寧に教えてくださっていました。この通りにやってみたら出来ました。

メニューの、設定>LIQUID SPEECH BALLOON　からアイコンの名前と画像のURLを入力して、投稿画面の一般ブロックにあるフキダシをクリックすると、ブロックでアイコン(話者)の種類と右左どちらに置くか、枠の形の種類(角か○)、文字の大きさなどを選ぶことができます。

タイトルとかも少しおしゃれっぽく出来てきたし、ちょっとずつではありますが、ホームページ感が出てきて楽しくなってきました。（当時は。）

文章と文章の間の空間とかも少しいじりやすくしました。参考はささき様のサイトです。

ただ私の場合はなぜか設定が英語だったので、最初はどれが段落タグの保持なのかわからず少し迷いました。

結局、TinyMCE Advancedの設定>高度なオプション　の下の方にあるチェックボックス、keep paragraph tags in the Classic block and the Classic Editorにチェックを入れると段落を保持することができました。

今回は、プラグインでやろうと思うまでの苦労の方が多かったので、そちらの話を省いてすっかり完結な記事になってしまいましたが、LIQUID SPEECH BALLOONというプラグインを使うと本当に楽に出来たんです。

別に回し者でもなんでもないですが、Gutenbergを攻略するにはプラグインを使いこなすのが吉と見ました。

3.まとめ

☆最新版（2019当時）、WordPress（デフォルトのエディターはGutenberg）での吹き出しは、プラグインを用いるものと用いないもの（CSS）がある。

☆プラグインを使わないなら、CSSとかをコピぺしたら使えるっぽい。プラグインを使うなら、word balloonかLIQUID SPEECH BALLOONを使うべし。

☆結局LIQUID SPEECH BALLOONで快適に使うことができてハッピー。

　

ここまで読んでいただき、ありがとうございました！

（スキしてもらえれば喜びますって書こうとしたら字面がちょっとアレだった）