メインコンテンツにスキップ

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

Studioでは、HTMLの見出しタグを<h1>から<h6>まで設定できます。見出しタグを設定することで、SEO に有効な構造化されたページを作成できます。

今日アップデートされました

テキストボックスに見出しタグを設定する方法

初期状態のテキストボックスには、<p>タグが設定されています。

  1. タグを設定したいテキストボックスを選択します。

  2. 右パネルの[設定]タブにある[タグ]の項目で、見出し (<h1>-<h6>) を選択してください。

子要素を持つ親ボックスに見出しタグを設定する方法(上級者向け)

以下の条件を満たしている場合にのみ、親ボックスに見出し (<h1>-<h6>)を設定できます。

  • 親ボックス内の子要素が以下のタグのみで構成されていること:
    <img>, <span>, <i>, <button>, <a>

見出しタグを選択できない状態の例

  • 選択した要素の中に、見出しタグが付いた別の要素がある:
    <h1> <h2>text</h2></h1>

  • 見出しタグの中に、子要素を含むボックス( div タグ)がある:
    <h1> <div class="image sd"></div></h1>

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

  • 親ボックス自体がBOXモード画像で、その中に <img>, <span>, <i>, <button>, <a> タグがある:
    <h1 class="image sd">   <i>favorite_border</i></h1>

  • リンク設定のあるテキストボックス( <a> タグ)を含む親ボックスである:
    <h1> <a>リンク設定のあるテキストボックス</a></h1>

注意:テキストボックスを子要素に持つ親ボックスの見出しタグ

初期状態のテキストボックスには<p>タグが設定されています。子要素のテキストボックスのタグが<p>のままだと、親ボックスに見出しタグを設定できない原因となります。

設定手順:

  1. 子要素のテキストボックスを選択します。

  2. 右パネル下部の[タグ]でタグを確認します。

  3. タグが<p>となっている場合には、<span> に変更してください。

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

  4. 親ボックスを選択し、見出し (<h1>-<h6>) を設定します。

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