要素 – 区切り線

最終更新日： 2025年5月5日

トピック：

作成対象：

初心者
中級
ユーザー

ディバイダー コンテンツタイプを使用して、Page Builder ステージ内のコンテンツのセクション間の視覚的な区切りとしてルールを追加します。分割線の色、太さ、幅を指定できます。また、整列の制御、余白とパディングの設定、コンテナの境界線の形式の設定を行うこともできます。デフォルトでは、区切りはコンテナの全幅を拡張するヘアーラインルールで、パディングに余裕があります。

境界線のないコンテナ内のデフォルトの区切り文字

ほとんどのディバイダーコンテナは非表示ですが、次の例では、コンテナを赤い破線で囲み、ディバイダー、パディング、コンテナの関係を確認できます。区切り線の上下のパディングを調整して、要素間の間隔を制御できます。

コンテナ内のパディングを破線の境界線で区切る

NOTE

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

ディバイダーツールボックス

ツール	アイコン	説明
移動		ディバイダーコンテナをページ上の別の有効な場所に移動します。
（ラベル）	デバイダ	現在のコンテナを分割要素として識別します。
設定		ディバイダーを編集ページが開きます。このページで、ディバイダーとそのコンテナのプロパティを変更できます。
Hide		ディバイダーコンテナを非表示にします。
表示		非表示のディバイダーコンテナを表示します。
複製		ディバイダーコンテナをコピーします。
削除		ディバイダーコンテナとそのコンテンツをステージから削除します。

NOTE

非表示の要素はデータベースに保存され、顧客には表示されません。ただし、これらの要素は、サイトをクロールする検索エンジンやその他のボットには表示されます。また、非表示の属性を持つ API 呼び出しを通じてリクエストされた場合、ステージから削除しない限り、コンテンツの一部として返されます。

ディバイダーの追加

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

赤いガイドラインを参考にして、ステージ上の別のコンテンツコンテナの前または後にディバイダーを配置します。

次の使用例では、区切り記号を使用して文字列の新しいセクションの先頭を指定します。
新しいディバイダーの設定を指定するには、次の手順に従います。

ディバイダー設定の変更

ディバイダーコンテナにカーソルを合わせてツールボックスを表示し、設定（）アイコンを選択します。
次のいずれかの方法を使用して、ディバイダー Line Color を変更します。
- 有効な HTMLカラー名を入力してください。例：Teal。
- 16 進数のカラー値を入力します。例：#008080。
完了したら、「Apply」をクリックします。
Line Thickness をピクセル単位で入力します。
測定単位を指定するには、Line Width に続いて px または % を入力します。
必要に応じて、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 ワークスペースに戻ります。

ディバイダーの複製

特定の設定を持つフォーマットされたディバイダーの場合は、新しいプレースホルダーでやり直すよりも、複製を作成する方が効率的です。

ディバイダーコンテナにカーソルを合わせてツールボックスを表示し、「複製」（）アイコンを選択します。

重複したディバイダーコンテナは、オリジナルのすぐ下に表示されます。
新しいディバイダーコンテナにカーソルを合わせてツールボックスを表示し、移動（）アイコンを選択します。
ディバイダーを選択してドラッグし、赤いガイドラインが新しい位置を示すようにします。

分割線を移動すると、各コンテナの上下の境界が破線で表示されます。

recommendation-more-help