要素 – 見出し
作成対象:
- 初心者
- 中級
- ユーザー
見出しレベルは、コンテンツを整理し、検索エンジンが各ページのインデックスを作成するのに役立つ階層を確立します。 Page Builder ステージで 見出し コンテンツタイプを使用して、見出しレベルが H1~H6 のテキストコンテナをステージに追加します。 見出しは、現在のテーマに関連付けられているスタイルシートに従って書式設定されます。
Content セクションの コンテンツ見出しフィールドを使用して、ページの上部に H1 見出しを追加できます。 ただし、このフィールドは以前の Commerce バージョンのレガシーで、古いコンテンツをサポートするために提供されています。 このフィールドでは、Page Builder の高度な機能を利用できません。 「コンテンツ見出し」フィールドを空白のままにし、Page Builder 見出しコンテンツタイプを使用して、任意のレベルの見出しをページに追加することをお勧めします。
次の例では、Luma テーマでフォーマットされている場合に、コンテンツの見出しと見出しのコンテンツタイプがどのように表示されるかを示しています。
見出しは、Page Builder パネルの 要素 セクションから、ステージの行、列、タブセットにドラッグできます。 見出しのレベルと配置は、ステージ上のエディターツールバーから、または 設定 (
見出しエディター
見出しコンテナツールボックス
すべてのコンテンツコンテナと同様に、コンテナにカーソルを合わせると、ツールボックスが表示されます。
ツール | アイコン | 説明 |
---|---|---|
移動 |
![]() | 見出しコンテナをページ上の別の有効な場所に移動します。 |
(ラベル) | 見出し | 現在のコンテナを見出しとして識別します。 |
設定 |
![]() | 見出しを編集ページを開きます。このページで、コンテナのプロパティを変更できます。 |
Hide |
![]() | 見出しコンテナを非表示にします。 |
表示 |
![]() | 非表示の見出しコンテナを表示します。 |
複製 |
![]() | 見出しコンテナをコピーします。 |
削除 |
![]() | 見出しコンテナとそのコンテンツをステージから削除します。 |
見出しの追加
-
Page Builder パネルで Elements を展開し、Heading プレースホルダーをステージ上の行、列またはタブセットにドラッグします。
-
エディターで、
Edit Heading Text
プレースホルダーに見出しテキストを入力します。既定では、見出しテキストにはレベル 2 (H2)の見出しタイプが割り当てられます。
-
ツールバーで、H1 から H6 までの適切な見出しタイプを選択します。
-
必要に応じて、配置を変更します。
ヘッダー設定の編集
-
見出しコンテナにカーソルを合わせてツールボックスを表示し、「設定」(
)アイコンを選択します。 -
必要に応じて、見出しコンテンツ(Heading Type および Heading Text)を更新します。
このコンテンツは、見出しエディターで更新することもできます。
-
必要に応じて、Advanced 設定を更新します。
-
親コンテナ内の見出しの位置を制御するには、Alignment のいずれかを選択します。
オプション説明Default
現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。Left
親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。Center
親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。Right
親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。 -
見出しコンテナの 4 つの辺すべてに適用する Border スタイルを設定します。
オプション説明Default
関連付けられたスタイル シートで指定されている既定の罫線スタイルを適用します。None
コンテナの境界線の表示はしません。Dotted
コンテナの境界線は点線で表示されます。Dashed
コンテナの境界線は破線で表示されます。Solid
コンテナの境界線は実線で表示されます。Double
コンテナの境界線は二重線で表示されます。Groove
コンテナの境界線は溝付き線で表示されます。Ridge
コンテナの境界線は、境界線として表示されます。Inset
コンテナの境界線は、インセットされた線として表示されます。Outset
コンテナの境界線は、先頭行として表示されます。 -
None
以外の境界線のスタイルを設定する場合は、境界線の表示オプションを完了します。オプション説明Border Color見本を選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、カラーを指定します。Border Width境界線の幅のピクセル数を入力します。Border Radiusピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。 -
(オプション)コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。
複数のクラス名はスペースで区切ります。
-
見出しコンテナの外側の余白と内側のパディングを決定する Margins and Padding の値をピクセル単位で入力します。
対応する値を図に入力します。
コンテナ領域説明Marginsコンテナのすべての側面の外側の端に適用される空白スペースの量。 オプション:Top
/Right
/Bottom
/Left
Paddingコンテナのすべての側面の内側の端に適用される空白のスペースの量です。 オプション:Top
/Right
/Bottom
/Left
-
-
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。
見出しの複製
特定の設定を持つ書式設定された見出しの場合は、新しいプレースホルダーでやり直すよりも、見出しを複製する方が効率的です。
-
見出しコンテナにカーソルを合わせてツールボックスを表示し、複製 (
)アイコンを選択します。複製は、元の画像のすぐ下に表示されます。
-
新しい見出しコンテナにポインタを合わせてツールボックスを表示し、移動 (
)アイコンを選択します。 -
見出しを選択してドラッグし、赤いガイドラインが新しい位置を示すようにします。
見出しを移動すると、各コンテナの上部と下部の境界線が破線で表示されます。
-
見出しレベルを変更する場合は、見出しテキストをクリックし、エディターツールバーで新しいレベルを選択します。