タブブロックを使用すると、単一のSeedProdページ上で複数の切り替え可能なパネルにコンテンツを整理・表示できます。すべての情報を縦方向に積み上げる代わりに、タブにより訪問者はセクション間を瞬時に移動でき、ページをすっきりとした状態に保ち、焦点が明確で読みやすい状態を維持します。
このブロックは、水平および垂直タブレイアウト、タブごとのアイコン、各パネル内のリッチテキストコンテンツ、ならびにタブの色、タイポグラフィ、境界線、パディングに関する包括的なスタイリング制御をサポートします。事前構築済みテンプレートによりワンクリックで洗練された外観を適用できる一方、詳細設定タブではあらゆる視覚的詳細を細かく制御できます。
ページにタブブロックを追加する
SeedProdページにタブブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロックで、タブブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、タブブロックをクリックして設定を開きます。コンテンツタブ内の タブセクションでは、すべてのタブパネルを作成・管理できます：
- タブ名:各タブボタンに表示されるラベルを入力します。既存のタブ項目をクリックすると展開され、名前、アイコン、コンテンツを編集できます。
- アイコン:タブごとにアイコンピッカーを使用して任意でアイコンを割り当てます。アイコンはタブバー上でタブラベルの横に表示されます。
- 各タブパネルの本文コンテンツを入力してください。各タブは独立したコンテンツ領域を持ちます。
- 新規アイテム追加:このボタンをクリックすると、ブロックに追加のタブパネルを追加できます。
- 削除 / 複製:各タブ項目には、その項目を削除するか、同じ設定と内容でコピーを作成するオプションが含まれています。
- タブアイコンを非表示にする:このオプションを切り替えて、すべてのタブのアイコンを一括で表示または非表示にします。
- アイコンの色:カラーピッカーを使用して、すべてのタブアイコンの色を設定します。
- フォントサイズ：タブラベルのフォントサイズを調整します。
- スペースの間隔：隣接するタブボタンの間の間隔を設定します。
- 配置:タブバーの水平方向の配置を選択します — 左、中央、または右。
ステップ2a: テンプレートスタイルを選択する
テンプレートタブでは、ワンクリックでタブブロックに事前作成されたビジュアルスタイルを適用できます。最小限のデフォルトスタイルから、枠線・背景・アイコン処理を施した装飾的なオプションまで、7種類のプリセットデザインが用意されています。テンプレートを選択すると、ブロックの色・枠線・レイアウトが即座に更新され、選択したデザインに一致します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブの[スタイル]セクションでは、タブバーとコンテンツパネルの両方の外観を完全に制御できます：
タブバーのスタイル:
- タブレイアウト:水平（タブが横一列に配置）と垂直（タブがコンテンツパネルの横に縦一列に積み重ね）を切り替えます。
- タブの書式設定：タブラベルのフォント、サイズ、太さ、スタイル、行間、文字間隔、大文字小文字を設定します。
- タブの色:非アクティブなタブラベルのテキスト色を選択します。
- タブの背景色:非アクティブなタブの背景色を設定します。
- アクティブなタブの色:現在選択されているタブのテキストの色を設定します。
- アクティブなタブの背景:現在選択されているタブの背景色を設定します。
- タブの角丸設定:タブボタンの角を丸くします。0～100のスライダーで調整してください。
- 枠線スタイル:タブボタンの枠線スタイルを選択します — 実線、点線、または破線。
- 枠線の幅：タブボタンの各辺（上、右、下、左）の枠線の太さを設定します。
- 枠線の色:タブボタンの枠線の色を選択します。
- タブのパディング：各タブボタン内部の間隔（上部、右側、下部、左側）を制御します。
コンテンツパネルのスタイル:
- コンテンツのタイポグラフィ：タブパネル本文テキストのフォント、サイズ、太さ、スタイル、行間、文字間隔、大文字小文字を設定します。
- コンテンツ背景：コンテンツパネル領域の背景色を設定します。
- テキストの色:コンテンツパネル内のテキストの色を設定します。
- コンテンツの角丸設定:0～100のスライダーを使用して、コンテンツパネルボックスの角を丸くします。
- コンテンツ枠線のスタイル:コンテンツパネルの枠線スタイルを選択してください — 実線、点線、または破線。
- コンテンツ枠線の色：コンテンツパネルの枠線の色を選択します。
- コンテンツ枠線の幅:コンテンツパネルの各辺（上、右、下、左）の枠線の太さを設定します。
- コンテンツパディング：コンテンツパネル内の内側の間隔を制御します。
- テキストシャドウ：コンテンツパネルのテキストに影を追加します。サイズプリセットは「なし」から「2倍大」まで選択可能です。
[詳細設定]タブでは、間隔（余白とパディング）、カスタムCSS属性、デバイス表示設定、および登場アニメーションの制御も提供します。
ステップ4: 変更を保存する
タブブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページにタブブロックを追加できました！タブは、多くのコンテンツをコンパクトでユーザーフレンドリーな形式で提示する強力な方法です。長いスクロールページで訪問者を圧倒することなく、関心を維持できます。水平レイアウトと垂直レイアウト、テンプレートスタイル、色の組み合わせを試して、デザインにシームレスに溶け込むタブ付きセクションを作成しましょう。