ドキュメントPage Builder

要素 – 見出し

最終更新日： 2026年6月16日

作成対象：

  • {"id":"b5a62a22-46f7-4f0d-b151-3fc640bef588"},{"id":"e8ccd51f-da0d-4e3b-939b-e30d5ebb1ea5"}
  • {"id":"b69b2659-1057-424e-8fc5-ed9e016dc554"}

見出しレベル：コンテンツを整理し、検索エンジンが各ページにインデックスを作成するのに役立つ階層を確立します。 Page Builder ステージ ​の​見出し コンテンツタイプを使用して、見出しレベルがH1からH6のテキストコンテナをステージに追加します。 見出しは、現在のテーマに関連付けられているスタイルシートに従って書式設定されます。

「Content」セクションの「​ コンテンツ見出し」フィールドを使用して、ページの上部にH1見出しを追加できます。 ただし、フィールドは以前のCommerce バージョンのレガシーであり、古いコンテンツをサポートするために提供されています。 このフィールドはPage Builderの高度な機能を利用していません。 「コンテンツの見出し」フィールドを空白のままにし、Page Builder見出しコンテンツタイプを使用して、任意のレベルの見出しをページに追加することをお勧めします。

次の例は、Luma テーマでフォーマットされたコンテンツ見出しと見出しコンテンツタイプがどのように表示されるかを示しています。

​ ストアフロントのコンテンツの見出しと見出しのレベル ​ {width="700" modal="regular"}

見出しをPage Builder パネルの​要素 セクションから、ステージ上の行、列、またはタブ セットにドラッグできます。 見出しレベルと整列は、ステージのエディターツールバーから、または​設定 （ 設定アイコン ​ {width="20"}）コントロールを使用して制御できます。

NOTE
Page Builder コンテンツに大きな変更を加える場合は、​ 管理者セッションの有効期間 ​ を増やして、作業中にセッションがタイムアウトしないようにすることをお勧めします。

見出しエディタ

​ ツールバー付き見出しエディター {width="500" modal="regular"}

見出しコンテナツールボックス

すべてのコンテンツコンテナと同様に、コンテナにカーソルを合わせると、ツールボックスが表示されます。

見出しコンテナツールボックス ​ {width="500" modal="regular"}

ツール
アイコン
説明
移動
移動アイコン ​ {width="25"}
見出しコンテナをページ上の別の有効な場所に移動します。
（ラベル）
見出し
現在のコンテナを見出しとして識別します。
設定
設定アイコン ​ {width="25"}
「見出しを編集」ページが開き、コンテナのプロパティを変更できます。
非表示
​ アイコンを非表示 {width="25"}
見出しコンテナを非表示にします。
表示
​ アイコンを表示 {width="25"}
非表示の見出しコンテナを表示します。
重複
​ アイコンを複製 {width="25"}
見出しコンテナのコピーを作成します。
削除
​ アイコンを削除 {width="25"}
見出しコンテナとそのコンテンツをステージから削除します。
NOTE
非表示の要素はデータベースに保存され、顧客には表示されません。 ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。 また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

見出しの追加

  1. Page Builder パネルで、Elements​を展開し、Heading プレースホルダーをステージ上の行、列、またはタブ セットにドラッグします。

    見出しをステージにドラッグ ​ {width="600" modal="regular"}

  2. エディターで、Edit Heading Text プレースホルダーに見出しテキストを入力します。

    デフォルトでは、見出しテキストにはレベル 2 （H2）の見出しタイプが割り当てられます。

    見出しエディターの ​ プレースホルダー {width="500" modal="regular"}

  3. ツールバーで、H1とH6の間の適切な見出しタイプを選択します。

  4. 必要に応じて、整列を変更します。

ヘッダー設定の編集

  1. 見出しコンテナにカーソルを合わせてツールボックスを表示し、設定 （ 設定アイコン ​ {width="20"}）アイコンを選択します。

    見出しツールボックス ​ {width="500" modal="regular"}

  2. 必要に応じて、見出しコンテンツ （Heading Type​および​Heading Text）を更新します。

    見出しエディターでこのコンテンツを更新することもできます。

  3. 必要に応じて​ Advanced ​設定を更新します。

    • 親コンテナ内での見出しの位置を制御するには、Alignment​を選択します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
      オプション 説明
      Default 現在のテーマのスタイルシートで指定されている整列のデフォルト設定を適用します。
      Left 親コンテナの左端に沿ってリストを整列させ、指定されたパディングを許可します。
      Center 親コンテナの中央にリストを整列させ、指定された任意のパディングを許可します。
      Right 親コンテナの右端に沿ってブロックを整列させ、指定されたパディングを許可します。

    • 見出しコンテナのすべての4つの側面に適用される​Border スタイルを設定します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 5-row-2 6-row-2 7-row-2 8-row-2 9-row-2 10-row-2 layout-auto
      オプション 説明
      Default 関連付けられたスタイルシートで指定されたデフォルトの境界線スタイルを適用します。
      None コンテナの境界を表示しません。
      Dotted コンテナの境界線が点線で表示されます。
      Dashed コンテナの境界線が破線で表示されます。
      Solid コンテナの境界線が実線として表示されます。
      Double コンテナの境界線が2行で表示されます。
      Groove コンテナの境界線は、溝付き線として表示されます。
      Ridge コンテナの境界線は、うね付きの線として表示されます。
      Inset コンテナの境界線がインセット線として表示されます。
      Outset コンテナの境界線がアウトセット線として表示されます。

    • None以外の境界線スタイルを設定する場合は、境界線の表示オプションを完了します。

      table 0-row-2 1-row-2 2-row-2 3-row-2 layout-auto
      オプション 説明
      Border Color 色見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の16進数値を入力して、カラーを指定します。
      Border Width 境界線の幅のピクセル数を入力します。
      Border Radius 境界線の各隅を丸めるために使用する半径のサイズを定義するピクセル数を入力します。

    • （オプション）現在のスタイルシートから​ CSS classes ​の名前を指定して、コンテナに適用します。

      複数のクラス名はスペースで区切ります。

    • Margins and Padding​の値をピクセル単位で入力して、見出しコンテナの外側の余白と内側の余白を決定します。

      対応する値をダイアグラムに入力します。

      table 0-row-2 1-row-2 2-row-2 layout-auto
      コンテナ領域 説明
      Margins コンテナのすべての側面の外側のエッジに適用される空白スペースの量。 オプション：Top / Right / Bottom / Left
      Padding コンテナのすべての側面の内側エッジに適用される空白スペースの量。 オプション：Top / Right / Bottom / Left

  4. 完了したら、Save​をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

見出しの複製

特定の設定を持つ書式設定された見出しの場合は、新しいプレースホルダーで最初からやり直すよりも、見出しを複製する方が効率的です。

  1. 見出しコンテナにカーソルを合わせてツールボックスを表示し、複製 （ 複製アイコン ​ {width="20"}）アイコンを選択します。

    複製はオリジナルのすぐ下に表示されます。

    見出しコンテナを複製しています {width="500" modal="regular"}

  2. 新しい見出しコンテナにカーソルを合わせてツールボックスを表示し、移動 （ 移動アイコン ​ {width="20"}）アイコンを選択します。

    見出しの移動 {width="500" modal="regular"}

  3. 赤いガイドラインが新しい位置を示すまで、見出しを選択してドラッグします。

    各コンテナの上下の境界線は、見出しの移動中に破線として表示されます。

    複製された見出しを位置に移動 {width="500" modal="regular"}

  4. 見出しレベルを変更する場合は、見出しテキストをクリックし、エディターツールバーで新しいレベルを選択します。

    新しい見出しレベルの選択 {width="500" modal="regular"}

recommendation-more-help
commerce-admin-help-page-builder