ふきだしをショートコードで実装しましたが、簡易的な方法です。一応メモします。

この投稿をInstagramで見る

mitamura hiro(@mitamurahiro)がシェアした投稿

PHPでショートコードを作って

function speech_bubble_shortcode($atts, $content = null) {
    $atts = shortcode_atts(array(
        'image' => '',
        'name' => ''
    ), $atts, 'speech_bubble');

    $img_html = '';
    $name_html = '';

    if (!empty($atts['image'])) {
        $img_html = '<img src="' . esc_url($atts['image']) . '" alt="Character" class="character-image">';
    }

    if (!empty($atts['name'])) {
        $name_html = '<div class="character-name">' . esc_html($atts['name']) . '</div>';
    }

    return '<div class="speech-wrapper"><div class="character-container">' . $img_html . $name_html . '</div><div class="speech-bubble">' . do_shortcode($content) . '</div></div>';
}
add_shortcode('speech_bubble', 'speech_bubble_shortcode');

CSSでかたちを整えました。

.speech-wrapper {
  display: flex;
  align-items: flex-start;
  /* 画像と吹きだしを横並びに */
  margin-bottom: 20px;
}

.speech-bubble {
  position: relative;
  background: #00aabb;
  border-radius: .4em;
  color: white;
  padding: 10px;
  max-width: 300px;
}

.speech-bubble:after {
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 15px 15px 15px 0;
  /* 矢印の方向を調整 */
  border-color: transparent #00aabb transparent transparent;
  /* 矢印の色を調整 */
  display: block;
  width: 0;
  z-index: 1;
  left: -15px;
  /* 矢印の位置を調整 */
  top: 10px;
  /* 矢印の上下位置を調整 */
}

.character-container {
  text-align: center;
  margin-right: 10px;
}

.character-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
}

.character-name {
  font-weight: bold;
  color: #333;
  margin-top: 5px;
}

ショートコードです。

[[speech_bubble image="〇〇" name="hirochan"]この部分がふきだしの内容です。[/speech_bubble]]

たいていのテーマには吹き出しブロックがありますが、FSEテーマだとなかったりするので簡易的に用意しました。