レイアウト – タブ

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

トピック：

作成対象：

初心者
中級
ユーザー

Tabs コンテンツタイプを使用して、Page Builder stage に一連のタブを追加します。パネルからステージにタブプレースホルダーをドラッグすると、最初にデフォルトのタブが 1 つ表示されます。さらにタブを追加して、完全なセットを作成できます。タブセットの幅は、その親コンテナの幅とパディングの設定によって決まります。

タブのセット

NOTE

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

ツールボックス

Tabs コンテンツタイプを使用する場合、個々のタブおよび 1 つ以上のタブを保持するタブコンテナを追加および編集します。各タブには独自のツールボックスがあり、Page Builder のステージでタブをデザインするために使用します。

個々のタブのツールボックス

タブツールボックス

ツール	アイコン	説明
移動		タブラベルの隣にあるこのコントロールは、個々のタブをタブセット内の別の位置に移動するために使用されます。
設定		タブの編集ページを開きます。このページで、個々のタブのプロパティを変更できます。
複製		タブをコピーします。
削除		タブセットからタブを削除します。

タブコンテナツールボックス

ツール	アイコン	説明
移動		タブのセットを、親コンテナのグリッド上の別の位置に移動します。
追加		タブセットにタブを追加します。
（ラベル）	Tabs	現在のコンテナをタブセットとして識別します。コンテナの上部の境界線にポインタを合わせると、ツールボックスが表示されます。
設定		「編集タブ」ページが開きます。このページで、コンテナのプロパティを変更できます。
Hide		タブコンテナを非表示にします。
表示		非表示のタブコンテナを表示します。
複製		現在のタブをコピーします。
削除		ステージから現在のタブセットを削除します。

NOTE

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

個々のタブの追加

Page Builder パネルの Layout の下で、Tabs プレースホルダーを直接ステージにドラッグするか、ステージの行または列にドラッグします。
Tab 1 ラベルをクリックして個々のタブツールボックスを表示し、設定（）アイコンを選択します。
ラベルとして使用する Tab Name を入力します。
必要に応じて、タブの Minimum Height を入力します。

この値には、有効な CSS 単位（100px、50%、50em、100vh など）または計算（100vh - 237px など）を含む数値を指定できます。
Vertical Alignment 設定を選択して、タブに追加されたコンテンツコンテナを揃えます（上、中央または下）。
必要に応じて、次の節を参考にして、その他のオプションを設定します。
- Background
- Advanced
右上隅にある「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

一連のタブを追加

次の手順は、個々のタブから開始して、タブコンテナ内に 3 つのタブのセットを作成します。個々のタブをまだ持っていない場合は、前の手順に従って、ステージに 1 つのタブを追加します。

タブコンテナにカーソルを合わせてツールボックスを表示し、追加（）アイコンを選択します。
Tab 2 ラベルをクリックしてカーソルを表示し、タブの独自のラベルを入力します。
ステージの 2 番目のタブを再度クリックし、「複製」（）アイコンを選択します。
YourName Copy ラベルをクリックしてカーソルを表示し、3 番目のタブに自分のラベルを入力します。

ツールボックスでタブのセットを一致させる

セット内でのタブの移動

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

タブへのコンテンツの追加

行に対する場合と同様に、タブに対して任意のコンテンツタイプを使用できます。テキストコンテンツタイプを例として追加するには、次の手順を使用します。

コンテンツを追加するタブをクリックします。
Page Builder パネルで「Elements」を展開し、「テキスト」プレースホルダーをタブにドラッグします。
エディターにテキストを入力または貼り付け、エディターツールバーを使用して必要に応じて書式設定します。

テキストコンテンツタイプの操作について詳しくは、要素 – テキストを参照してください。
右上隅の「Save」をクリックします。

個々のタブ設定の変更

個々のタブの上にマウスポインターを置くと、ツールボックスが表示され、設定（）アイコンを選択します。
必要に応じて、タブの基本設定を変更します。
- Tab Name - タブラベルの改訂テキストを入力します。ラベルをステージ上で直接変更することもできます。
- Minimum Height – 自動の高さを上書きする場合は、ピクセルで入力します。例えば、背景画像の高さと一致するように最小の高さを設定して、画像全体が表示されるようにします。
- Vertical Alignment - タブに追加するコンテンツコンテナの垂直位置を選択します。
必要に応じて、以下の節で他の設定を変更します。
完了したら、「Save」をクリックして設定を適用し、Page Builder ワークスペースに戻ります。

背景

Background Color - スウォッチを選択するか、カラーピッカーをクリックするか、有効なカラー名または同等の 16 進数値を入力して、背景色を指定します。この設定により、行の背景色が決まります。また、カラーの不透明度を調整することもできます。

次の 3 つの方法で値を入力できます。
- 定義済みのカラー名（White など）
- カラーの 16 進数カラー値（例：#ffffff）
- カラーの rgba 値（不透明度の割合）（rgba(255, 255, 255, 0.75) など）。
カラーを選択する場合は、「カラーなし ボックスの左側にあるスウォッチをクリックし す。

カラーボックスをクリックして再度カラーピッカーを開くと、スライダの下のボックスに現在の赤、緑、青、アルファ値（rgba）が表示されます。最後の数値は、現在の不透明度の割合を小数で示します。スライダを使用して、不透明度を調整したり、必要な小数値を入力したりできます。

NOTE
Page Builder では、背景画像に透明度レイヤー（アルファチャンネル を含めることもできます。このレイヤーを使用して、様々な不透明度の背景を作成できます。
Background Image – 必要に応じて、提供されたツールを使用してタブに適用する背景画像を選択します。

ツール
説明
Upload
ローカルコンピューターからギャラリーに画像ファイルをアップロードし、タブの背景画像として適用します。
Select from Gallery
タブの背景画像として、ギャラリーから既存の画像を選択するように求めるプロンプトを表示します。

画像をカメラタイルにドラッグするか、ローカルファイルシステム内の画像を参照できます。
Background Mobile Image – 必要に応じて、同じツールを使用して、モバイルデバイスでの表示に使用する別の背景画像を選択します。
Background Size - タブの幅を基準に背景画像を拡大/縮小する方法を選択します。

オプション
説明
Cover
背景画像は、タブの全幅をカバーしています。
Contain
背景画像は、タブ領域の幅に制限されます。
Auto
現在のスタイルシートからサイズを適用します。
Background Position - タブに関連して背景画像を固定する方法を選択します：Top Left / Top Center / Top Right / Center Left / Center / Center Right / Bottom Left / Bottom Center / Bottom Right
Background Attachment – 添付ファイルタイプを選択して、スクロールするページに対する背景画像の移動方法を決定します。

オプション
説明
Scroll
添付された背景画像は、ページがスクロールすると下に移動するように同期されます。
Fixed
（モバイルでは使用できません）コンテナが画像の上をスクロールし、指定された背景位置に固定されるので、背景画像は移動しません。
Background Repeat - 「Yes」に設定すると、背景画像がタブの使用可能なスペースに繰り返し表示されます。

詳細

タブに追加されるコンテンツコンテナの水平方向の配置を制御するには、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
ピクセル数を入力して、境界線の各コーナーを丸めるために使用する半径のサイズを定義します。

次の例の行の境界線の半径は 15 です。
（オプション）列コンテナに適用する現在のスタイルシートの CSS classes の名前を指定します。

複数のクラス名はスペースで区切ります。
列の外側の余白と内側のパディングを指定する Margins and Padding の値をピクセル単位で入力します。

対応する各値をタブコンテナ図に入力します。

コンテナ領域
説明
Margins
コンテナのすべての側面の外側の端に適用される空白スペースの量。オプション：Top/Right/Bottom/Left
Padding
コンテナのすべての側面の内側の端に適用される空白のスペースの量です。オプション：Top/Right/Bottom/Left

タブセットの設定を変更

タブセットコンテナの上部のボーダーにカーソルを合わせてツールボックスを表示し、設定（）アイコンを選択します。
必要に応じて、Default Active Tab を変更します。

ページの読み込み時にアクティブにするタブをセットから選択します。
タブセットの自動 Minimum Height を上書きする場合は、高さをピクセル単位で入力します。
ナビゲーションタブをタブセットの上部に沿って配置するには、Tab Navigation Alignment （Left、Center、Right）を選択します。
タブセットの詳細オプションを設定します。
- 親コンテナ内のタブセットの位置を制御するには、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