製品データタブブロックは、WooCommerceの商品説明、追加情報、およびカスタマーレビューを、単一商品テンプレート上でタブ形式で表示します。すべての商品情報を単一のスクロールブロックで表示する代わりに、タブインターフェースは情報を明確にラベル付けされたセクションに整理し、買い物客がワンクリックで移動できるようにします。

このブロックはシングル商品テンプレート専用に設計されており、WooCommerceのインストールが必要です。タブとコンテンツパネルの外観（色、タイポグラフィ、境界線、間隔、影など）を完全にカスタマイズし、ストアのデザインに合わせることができます。

要件: プロダクトデータタブブロックは、当社のエリートライセンスプランで利用可能です。開始前に、WordPressサイトにWooCommerceがインストールされ有効化されていることを確認してください。

---

ページに製品データタブブロックを追加する

SeedProdの単一商品テンプレートに「商品データタブ」ブロックを追加するには、以下の手順に従ってください：

ステップ1: ブロックを追加する

デザイン > ブロック > WooCommerce テンプレートタグ の下で、商品データタブブロックを商品詳細テンプレートの目的のセクションにドラッグ＆ドロップします。

ステップ2: コンテンツ設定の構成

追加後、[製品データタブ]ブロックをクリックして設定を開きます。[コンテンツ]タブは折りたたみ可能な2つのセクション（[タブ]と[パネル]）に分かれており、タブボタンとその下のコンテンツ領域のスタイルを設定できます。

タブ:

• 通常:オンにすると、タブのデフォルト状態（選択されていない状態）における色設定が表示されます。非アクティブなタブのテキスト色、背景色、枠線の色を設定します。
• 有効:現在の選択タブの色設定を表示するにはオンにします。アクティブなタブ状態のテキスト色、背景色、枠線を設定し、非アクティブなタブと明確に区別できるようにします。
• タブの書式設定：タブラベルテキストのフォントファミリー、サイズ、太さ、行間、文字間隔を設定します。
• 角丸半径:タブボタンの角丸設定（0～100px）を指定します。この値を大きくすると、丸みを帯びたタブや丸いタブを作成できます。

パネル：

• テキストの色:パネル領域内に表示されるコンテンツのデフォルトのテキスト色を設定します。
• パネルのタイポグラフィ：各パネル内の本文テキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
• 見出しの色:パネルコンテンツ内に表示される見出し要素（h2、h3など）の色を設定します。
• 見出しのタイポグラフィ：パネル見出しテキストのフォントファミリー、サイズ、太さ、スタイルを設定します。
• パネルのパディング：パネル領域内のコンテンツ周囲の内側間隔を設定します。
• パネルシャドウ：パネル領域に影効果を追加します。プリセットの影サイズから選択し、パネルに奥行きを与え、ページ背景から分離させます。

ステップ3：デザインのカスタマイズ

[詳細設定]タブでは、製品データタブブロックの境界線、間隔、表示状態を調整できます。

パネルの境界線：

• パネル境界線の角丸設定：パネルの内容領域の角丸を指定します。
• パネルの枠線幅：パネルの各辺（上、右、下、左）の枠線の太さを設定します。
• パネルの枠線スタイルと色：枠線スタイル（実線、点線、破線）を選択し、パネル領域の枠線色を設定します。

ブロック境界線:

• 角丸半径：製品データタブブロック全体の角丸処理を設定します。
• 境界線の幅：外側のブロックラッパーの各辺の境界線の太さを設定します。
• 境界線のスタイルと色：外側のブロックラッパーの境界線のスタイルと色を選択します。

スペース:

• マージン：製品データタブブロックの周囲の余白（上、右、下、左）を制御します。これにより、タブとページ上の周囲の要素との間に表示されるスペースが決まります。
• パディング：製品データタブブロック内の内側の間隔（上、右、下、左）を調整します。これにより、タブの内容とブロックの端の間に余裕が生まれます。

属性：

• CSS ID:製品データタブブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
• カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
• カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-section|tabs)。

デバイスの可視性:

• デスクトップで非表示:デスクトップ画面で製品データタブブロックを非表示にします。
• タブレットで非表示:タブレット端末では製品データタブブロックを非表示にします。
• モバイルで非表示:モバイル端末では製品データタブブロックを非表示にします。

アニメーション効果：

• エントランスアニメーション：製品データタブブロックが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。

ステップ4: 変更を保存する

製品データタブブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。

---

商品データタブブロックを商品詳細テンプレートに正常に追加しました！このブロックはWooCommerceから商品説明、追加情報、カスタマーレビューを自動取得し、見やすいタブ式インターフェースに整理します。タブの色設定でアクティブ状態と非アクティブ状態を区別し、パネルのタイポグラフィや境界線を調整して、一貫性のある商品ページ体験を創出。購入者の関心を維持しましょう。