見出しブロックの枠線の下側にのみ、色とサイズを指定する

見出しブロックの枠線の左側にのみ、色とサイズを指定する。
テキストとのバランスを見て左パディングを少し開ける。

見出しブロックの枠線の左と下に色とサイズを指定する。
左の方が太いと見栄えが良さそう。

見出しブロックの枠線の上と下に色とサイズを指定する。

見出しブロックの枠線の左と下にそれぞれ色とサイズを指定する。
背景色に薄い色を指定するとそれっぽくなる

見出しブロックの背景にグラデーションを設定する。
角度を90°にし、左端に単色（図では青）、右に不透明度0の色を指定して、右側の色を好きなグラデーションの長さになるように調整する。

見出しブロックに背景色とパディングを設定する。
パディングはお好みの数値でOK。

パディングの設定が見つからないという時はサイズのところの「＋」をクリックするとパディングの項目を出すことができます。

枠線のところで角丸を設定する。

上の「背景色＋角丸」と同じ設定にした見出しブロックを横並びブロック（グループブロックで「横並び」を選択）の中に入れる。

横並びブロックの中に入れると、見出しブロックに幅の設定項目（画像下）が追加されているので、これを「fit」にする

見出しブロックをグループブロックの中に入れる。

そのグループブロックの背景画像にアイコン画像をを設定し、位置とサイズを調整する。
サイズを固定値にするときは、「タイル」を選択し繰り返しをオフにすると一つだけ置くことができる。

そのままだとアイコンが文字にかぶるので、アイコンの分だけパディングを設定する。

グループブロックの中に見出しブロックと横並びブロック、さらに横並びブロックの中にグループブロックを設置する。

横並びブロックの中のグループブロックの設定を以下のようにします。

幅を「fixed」にして0px、最小の高さを0pxにする。
枠線の設定を、上を見出しの背景と同じ色にし、他を不透明度0にして、同じサイズにする。

エディター画面ではちょっとわかりづらいがこれで下向きの▼ができている

横並びブロックの左側に少しパディングを取ることで、吹き出しの位置を調整する。

横並びブロックの中に、区切りブロック、見出しブロック、区切りブロックの順に並べる。

区切りブロックの幅を「fill」にすることで端まで伸びる。

区切りブロックの幅を「fixed」にすると好きな幅に設定できる。

見出しブロックの下に横並びブロックを設置する。

横並びブロックの背景にグラデーションを設定する。
色を青、青、グレー、グレーの順で配置する。（実際使う時は任意の色でOK）

図ではわかりづらいが、2番目の青と3番目のグレーを重ねている。
こうすると背景色がパキッと割れた状態になる。

この状態で角度を90°にすると、途中で色の変わる長方形ができる。

横並びブロックの最小の高さを設定する。
細すぎない方が色がわかりやすくなっていいかも。

見出しの背景にグラデーションを設定する。

色を不透明度0、不透明度0、黄色、黄色の順に設置する
2番目の不透明度0と3番目の黄色を重ねる。（上の「途中で色変える線」と同じように設定する）
角度を180°（色のついた方が下に来るよう）に設定する。

この状態ではマーカー線が端まで伸びてしまうので、横並びブロックの中に入れて、見出しブロックの幅をfitに設定すると、文字のところだけマーカーを引くことができる。

横並びブロックに、グループブロック、見出しブロック、グループブロックの順に配置する。

見出しブロックのフォントサイズを「1em」にして、横並びブロックに任意のフォントサイズを設定する。
これは後でスラッシュの大きさを文字サイズと合わせるため。

両サイドのグループブロックの幅と最小の高さを「1em」に設定する。

両サイドのグループブロックの背景のグラデーションを、
白、白、黒、黒、白、白の順で色を設置して、2番目の白と3番目の黒、4番目の黒と5番目の白を重ね、中央に黒い線ができるようにする。

角度を、左側を45°、右側を135°にする。

横並びブロックに、グループブロック、見出しブロック、グループブロックの順に配置する。

見出しブロックのフォントサイズを「1em」にして、横並びブロックに任意のフォントサイズを設定する。
これは後でカッコの大きさを文字サイズをベースに合わせるため。

両サイドのグループブロックの幅を「1em」、最小の高さを「2em」に設定する。（ここは好きなカッコの大きさになるように調整）

両サイドのグループブロックの枠線を、上、下、左（右側のブロックは右）にサイズ1px、文字色と同じ色で設定する。