レイアウト – タブ

Layout​の下のPage Builder パネルで、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	コンテナの境界線が2行で表示されます。
  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 ワークスペースに戻ります。