レイアウト – タブ

Page Builder パネルの Layout ​の下で、Tabs ​プレースホルダーを直接ステージにドラッグするか、ステージの行または列にドラッグします。

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

Tab 1 ラベルをクリックして個々のタブツールボックスを表示し、設定 （ {width="20"}） アイコンを選択します。

ラベルとして使用する Tab Name を入力します。

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

必要に応じて、タブの Minimum Height を入力します。

この値には、有効な CSS 単位（100px、50%、50em、100vh など）または計算（100vh - 237px など）を含む数値を指定できます。

Vertical Alignment 設定を選択して、タブに追加されたコンテンツコンテナを揃えます（上、中央または下）。

必要に応じて、次の節を参考にして、その他のオプションを設定します。

• Background
• Advanced

右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

タブコンテナにカーソルを合わせてツールボックスを表示し、追加 （ {width="20"}）アイコンを選択します。

Tab 2 ラベルをクリックしてカーソルを表示し、タブの独自のラベルを入力します。

ステージの 2 番目のタブを再度クリックし、「複製」（ {width="20"}）アイコンを選択します。

YourName Copy ラベルをクリックしてカーソルを表示し、3 番目のタブに自分のラベルを入力します。

移動するタブをクリックします。

タブラベルテキストの直前に表示される 移動 （ {width="20"}）アイコンを選択して、タブセット内の新しい位置にドラッグします。

コンテンツを追加するタブをクリックします。

Page Builder パネルで「Elements」を展開し、「テキスト」プレースホルダーをタブにドラッグします。

エディターにテキストを入力または貼り付け、エディターツールバーを使用して必要に応じて書式設定します。

テキストコンテンツタイプの操作について詳しくは、 要素 – テキストを参照してください。

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

右上隅の「Save」をクリックします。

個々のタブの上にマウスポインターを置くと、ツールボックスが表示され、設定 （ {width="20"}）アイコンを選択します。

必要に応じて、タブの基本設定を変更します。

• Tab Name - タブラベルの改訂テキストを入力します。 ラベルをステージ上で直接変更することもできます。

• Minimum Height – 自動の高さを上書きする場合は、ピクセルで入力します。 例えば、背景画像の高さと一致するように最小の高さを設定して、画像全体が表示されるようにします。

• Vertical Alignment - タブに追加するコンテンツコンテナの垂直位置を選択します。

必要に応じて、以下の節で他の設定を変更します。

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

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

必要に応じて、Default Active Tab を変更します。

ページの読み込み時にアクティブにするタブをセットから選択します。

タブセットの自動 Minimum Height を上書きする場合は、高さをピクセル単位で入力します。

ナビゲーションタブをタブセットの上部に沿って配置するには、Tab Navigation Alignment （Left、Center、Right）を選択します。

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

タブセットの詳細オプションを設定します。

• 親コンテナ内のタブセットの位置を制御するには、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	コンテナの境界線は二重線で表示されます。
  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 ワークスペースに戻ります。