Gutenbergで吹き出しを使う

Gutenmorgen! としあきです。

ブログでよくある吹き出しによる顔アイコンとセリフの表現。親しみやすさとメリハリを付けるのに効果的だと思います。これを入力できるようにしたいと思い調べてみました。

フキダシの作成方法

方法としては以下があります。

1. テーマに吹き出し機能がついている
2. 吹き出し機能のプラグインを登録する
3. 手動で吹き出しを入力する

3はあまり現実的でありません。

1はテーマが対応していればいいのですが、私の場合WordPressの新エディタGutenbergに対応していませんでした。

クラシックエディタと併用すればなんとか表示はできますが、Gutenbergの方がMarkdownを使えて入力しやすいことや、今後のWordPress対応度、旧エディタは廃止予定であることを考えると、Gutenbergで作成したいです。

2.でやってみます。

プラグインを使用した吹き出しの作成方法

Liquid Speech Baloonというプラグインを使用しました。

プラグインから新規追加、有効化します。

名前とアイコン画像のURLを複数登録可能です。

その他、色やスタイルの変更は入力画面でフキダシごとに行います。

ブロック選択で「フキダシ」を選択、または/フキダシで作成します。

テーマがThorの場合、表示画面で吹き出しが下にずれる現象があったため、テーマのCSSに以下を追加しました。

.content div.liquid-speech-balloon-text {
	margin-top: 0;
}
.content div.liquid-speech-balloon-arrow {
	margin-top: 0;
}