WordPressで会話風の「吹き出し」を表示したいとき、専用のプラグインを入れたり、追加CSSを書いたりするのが一般的です。でも実は、ブロックエディターの標準機能だけでも吹き出しは作れます。
この記事では、以下の条件で吹き出しを作る手順を紹介します。
- デフォルトテーマ
- プラグインなし
- 追加CSSなし
完成イメージ
左にアイコン画像、右に三角の矢印付きの吹き出しが並ぶ、よく見るあの形です。
作成手順
完成したリストビューはこんな感じ。
入れ子構造を上から、
1階層（一番上の横並びブロック）、
2階層（画像ブロックとその下の横並びブロック）、
3階層（2つのグループブロック）
として解説します。
階層が複雑に見えるかもしれませんが、上から順に見ていきましょう。
①1階層目：土台となる横並びブロックを置く
まず、一番外側の枠として 横並びブロック を1つ追加します。
ブロックの間隔を0pxに設定します。
②2階層目：アイコンと吹き出し本体を並べる
1階層目の中に、次の2つを左から順に配置します。
アイコン画像
画像ブロックを追加し、以下のように設定します。
- アスペクト比：1:1（正方形）
- 角丸：50%（正円になります）
これでアイコンが丸く表示されます。
吹き出しの枠を入れる横並びブロック
画像の右隣に、もう1つ 横並びブロック を追加します。
この中に、次の3階層で吹き出しの枠を作っていきます。
③3階層目：矢印と吹き出しの枠を作る
2階層目に追加した横並びブロックの中に、グループブロックを2つ 配置します。
- 2つ目：吹き出しの「本体（テキストが入る枠）」になる部分
- 1つ目：吹き出しの「矢印（しっぽ）」になる部分
1つ目のグループブロック
- 「コンテンツ幅を使用するインナーブロック」を OFF
- 幅を 「fixed」 にして値を 0px に設定
- 枠線：
上・下・左 → 20px（任意）、実線、透明
右 → 30px（任意）、実線、吹き出しに使いたい色
枠線の色を「透明」にするには、色選択のカスタムから不透明度を0%にすればOKです。
2つ目のグループブロック
- 「コンテンツ幅を使用するインナーブロック」を OFF
- 幅を 「fill」 に設定
- パディング：好きな数値で設定
- 枠線：1px（任意）、実線、矢印と同じ色
- 角丸：好みで設定
2つ目のグループブロックの中に好きなブロックを入れてコンテンツを作成して完成
作成のポイント
吹き出しの矢印
三角の矢印は、幅・高さが0pxの要素に太い枠線をつけて、向きたい方向と反対側だけに色をつけたものです。
たとえば左向きの矢印を作りたい場合、要素の 右側の枠線にだけ色をつけ、ほかの3辺を透明にする と、その色がきれいな三角形に見えます。
横並びブロックのインナーブロック
横並びブロックのインナーブロックには、「幅」という設定項目が追加されます。
- fit：中身の長さに合わせた幅になる
- fill：残りのスペースを埋めるように広がる
- fixed：指定した数値の幅に固定する
矢印部分で「fixed・0px」を使っているのは、枠線だけが見える状態にして三角形を作るため。本体部分で「fill」を使っているのは、残りのスペース全体を吹き出しの枠にしたいからです。
さいごに
空divタグを置くのはどうなのかというところが引っかかりますが、まあ、実際はテーマの機能を使ったり、追加css書いた方がいいかと思います。（画像部分の幅を揃えるためにも）
今回はブロックの機能だけで作ることで、ブロックの仕組みや使い方の理解を深めるというところを目的としたので、実際のサイト制作では用途に合わせていいところだけ活用してもらえればいいかと。