要素 – 見出し

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

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

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

ストアフロントのコンテンツの見出しと見出しレベル

から見出しをドラッグできます 要素 の節 Page Builder ステージ上の行、列またはタブセットにパネルします。 見出しのレベルと配置は、ステージ上のエディターツールバーから、または 設定 設定アイコン {width="20"} ) コントロールします。

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

見出しエディター

ツールバー付き見出しエディター

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

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

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

ツール
アイコン
説明
移動
移動アイコン {width="25"}
見出しコンテナをページ上の別の有効な場所に移動します。
(ラベル)
見出し
現在のコンテナを見出しとして識別します。
設定
設定アイコン {width="25"}
見出しを編集ページを開きます。このページで、コンテナのプロパティを変更できます。
Hide
アイコンを非表示 {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 親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。
    • Border 見出しコンテナの 4 つの辺すべてに適用されるスタイル:

      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 コンテナの境界線は二重線で表示されます。
      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
85b60248-86a4-4d5f-9933-5179643f608d