Studio では HTML の <h1> - <h6> タグを設定できます。

テキストボックスに設定する

テキストボックスはデフォルトで <p> タグが選択されています。

ボックス設定パネルの「タグ」で見出し（<h1> - <h6>）を選択することで、テキストに対して見出しタグを設定できます。

子要素を持つボックスに設定する（上級者向け）

ボックスに見出しタグを設定できるのは、特定の条件を満たす場合のみです。

例えば、中身が空のボックスをひとつ配置した時点では、そのボックスに見出しタグを設定できません。安易に適切ではないHTML構造で見出しタグを設定できないよう制限をかけています。

以下全ての条件を満たしているとき、ボックス設定パネルの「タグ」で、見出し（<h1> - <h6>）を選択できます。

ボックスの中に、 span タグ：

<h1> 
　　<span>テキストボックス</span>
</h1>

ボックスの中に、アイコンボックス（ i タグ）：

<h1> 
　　<i>favorite_border</i> 
</h1>

ボックスの中に、リンク設定のあるテキストボックス（ a タグ）：

<h1>
　　<a>リンク設定のあるテキストボックス</a>
</h1>

ボックス自体がBOXモード画像で、その中に <img>, <span>, <i>, <button>, <a> タグ：

<h1 class="image sd"> 
　　<i>favorite_border</i>
</h1>

ボックスの中に、IMGモード画像（ img タグ）：

<h1>
　　<img alt="xxx" src="xxx..."/>
</h1>

ボックスの中に、Buttonパーツ（ button タグ）：

<h1>
　　<button>ボタン</button>
</h1>

見出しタグの中に、別の見出しタグがある：

<h1>
 <h2>text</h2>
</h1>

見出しタグの中に、子要素を含むボックス（ div タグ）がある：

<h1>
 <div class="image sd"></div>
</h1>

次の手順だけでは、ボックスに見出しタグを設定できません。

このままでは子要素に <p> が存在しているためです。

<div> 
  <p>text</p> 
</div>

次のようにボックスの中に配置した<p> を <span> に変えれば、ボックスの div を見出しタグに変更できる状態になります。

<div> 
  <span>text</span> 
</div>