要素 – 区切り線

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

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

{width="600" modal="regular"}

次の使用例では、区切り記号を使用して文字列の新しいセクションの先頭を指定します。

{width="500" modal="regular"}

新しいディバイダーの設定を指定するには、次の手順に従います。

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

{width="500" modal="regular"}

次のいずれかの方法を使用して、ディバイダー Line Color を変更します。

• 有効な HTMLカラー名を入力してください。 例：Teal。
• 16 進数のカラー値を入力します。 例：#008080。

完了したら、「Apply」をクリックします。

{width="600" modal="regular"}

Line Thickness をピクセル単位で入力します。

測定単位を指定するには、Line Width に続いて px または % を入力します。

{width="600" modal="regular"}

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

• 親コンテナ内のディバイダーの位置を制御するには、Alignment のオプションを選択します。

  table 0-row-2 1-row-2 2-row-2 3-row-2 4-row-2 layout-auto
  オプション	説明
  Default	現在のテーマのスタイル シートで指定されている線形の既定の設定を適用します。
  Left	親コンテナの左罫線に沿ってリストを配置します。指定したパディングはすべて許可されます。
  Center	親コンテナの中央にリストを揃えます。指定したパディングに対する許容値を使用します。
  Right	親コンテナの右端に沿ってブロックを配置します。指定したパディングは許可されます。

  次の例では、ディバイダーに中央揃えを使用するようにオプションを設定しています。

  {width="600" modal="regular"}

• ディバイダーコンテナの 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	コンテナの境界線は二重線で表示されます。
  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

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

{width="500" modal="regular"}

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

重複したディバイダーコンテナは、オリジナルのすぐ下に表示されます。

{width="500" modal="regular"}

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

{width="500" modal="regular"}

ディバイダーを選択してドラッグし、赤いガイドラインが新しい位置を示すようにします。

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

{width="500" modal="regular"}