HTML の見出しタグ <h1> - <h6>

STUDIO で HTML の見出しタグを設定する方法について

STUDIO Support avatar
対応者:STUDIO Support
一週間前以上前にアップデートされました

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



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

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

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

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

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

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

設定するための条件

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

  • そのボックスが子要素を持っている

  • そのボックスの子要素が全て、HTMLタグ <img>, <span>, <i>, <button>, <a> だけで構成されている

例)見出しタグを選択できる状態

ボックスの中に、 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>

よくあるミスと対策

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

  1. ボックスの中に text を配置

  2. ボックスのタグを <h1> にしようとする

  3. タグ一覧に <h1> が出てこない

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

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

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

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

こちらの回答で解決しましたか?