吹き出しブロックは、アバター画像と名前を片側に置き、反対側の吹き出しの中に任意のブロックを入れられるブロックです。「制作者と依頼者の会話」「Q&A」「補足コメント」のように、文章にリズムを付けたい場面で使います。ブログ執筆を中心にした shitate のトーンに合わせたデザインで、吹き出し以外の装飾は用意していません。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
制作者このようにアイコンと吹き出しで会話しているようなデザインを入れることができます！
制作者アイコンの反転や色の変更も自由です！
ただし吹き出し以外のデザインは用意していません、要望が多ければ検討します！
基本的な使い方
- ブロック挿入ツールの「shitate unique blocks」から吹き出しを追加します。
- 左側の丸いプレースホルダー（「設定」）をクリックするか、ツールバーの「アイコンを設定」からアバター画像を選びます。
- アバターの下の「名前」に表示名を入れます。空のままにすると名前は出力されません。
- 吹き出しの中に本文を書きます。段落だけでなく、画像・リスト・ボタンなど任意のブロックを入れられます。
- 会話のように見せたいときは、2 つ目の吹き出しでアバターの位置を「右」にします。
エディターでの設定画面
設定項目
- アイコンの位置（ツールバー／サイドバー） — 左（初期値）または右。右にすると吹き出しのしっぽも右側に付きます。
- アバター画像（ツールバー／サイドバー） — 設定・変更・削除。64px の円形で表示されます。装飾扱いのため alt は空です。
- 名前（吹き出しの上） — テキストツールバーの shitate ボタン（マーカー・スパン・
）が使えます。太字・斜体は使えません。 - 吹き出しの背景色（サイドバー） — カラーパレットから選択。CSS 変数
--sb-bubble-bgに入り、しっぽの色も追従します。 - 吹き出しの文字色（サイドバー） — 同じくカラーパレット。CSS 変数
--sb-bubble-colorに入ります。 - ブロック共通の設定として、上マージンと HTML アンカーが使えます。
CSS でカスタマイズする
出力される HTML の構造は次のとおりです。ブロック本体が .sb-speech-bubble、部品はハイフン始まりのクラス（-avatar -name -body）、状態は is-position-left / is-position-right です。
<div class="sb-speech-bubble is-position-left">
<div class="-avatar"><img alt=""><span class="-name">名前</span></div>
<div class="-body" style="--sb-bubble-bg:…;--sb-bubble-color:…">…中身…</div>
</div>サイト全体で色や角丸をまとめて変えたいときは、ブロックごとに設定するのではなく、テーマ側で CSS 変数を上書きするのが確実です。
/* 吹き出しの色をサイト全体で統一する */
.sb-speech-bubble > .-body {
--sb-bubble-bg: #fff7e6;
--sb-bubble-color: #3a2a00;
}
/* 角丸を付ける（他のカード類と共通の変数） */
:root {
--sb-radius: 0.75rem;
}--sb-bubble-bg— 吹き出しとしっぽの背景色。初期値はvar(--st-color-base-2, #f4f6fc)--sb-bubble-color— 吹き出しの文字色。初期値はinherit--sb-radius— 吹き出しの角丸。初期値は0（カード・ボタン・目次などと共通）
部品のスタイルは @scope (.sb-speech-bubble) to (.-body > *) の中で書かれているので、吹き出しの中に入れた別のブロック（たとえば中に置いた目次やカード）に吹き出しの装飾が漏れることはありません。独自 CSS を書くときも、.sb-speech-bubble > .-body のように親と組で指定してください。
注意点
- アバターの幅は 64px 固定です。変数では変えられないので、変えたい場合は
.sb-speech-bubble > .-avatar imgに CSS を当ててください。 - アバター画像は選択時の原寸 URL で出力されます。小さめの画像（200px 四方程度）を用意しておくと軽くなります。
- 1.6.1 以前に保存した吹き出し（旧クラス
sb-speech）は、エディターで開くと自動的に新しい形式に移行されます。旧クラス向けに書いた独自 CSS は.sb-speech-bubbleに書き換えてください。