製品コンテンツブロックは、単一製品テンプレート上でWooCommerce製品の完全な製品説明を表示します。各製品についてWooCommerceから製品説明を動的に取得するため、手動更新なしで常に正しいコンテンツが表示されます。
このブロックは、シングル商品テンプレートでのみ使用することを想定して設計されています。WooCommerceに入力された商品説明をそのまま表示するには、このブロックをそのまま使用できます。または、ショートコードの周囲に補足テキストや書式設定を追加することで、商品ページでのコンテンツの表示方法をカスタマイズできます。
製品コンテンツブロックをページに追加する
SeedProdの単一商品テンプレートに商品コンテンツブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロック > WooCommerce テンプレートタグ の下で、製品コンテンツブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、商品コンテンツブロックをクリックして設定を開きます。「コンテンツ」タブには、WooCommerceの商品説明を動的に取得するSeedProdショートコードが事前に入力されたテキストエリアがあります。
テキスト：
- コンテンツフィールド： 以下を含む
デフォルトのショートコードです。このショートコードは、各商品の商品説明をWooCommerceから動的に取得する役割を担っています。商品コンテンツ全体を置き換える意図がない限り、削除しないでください。商品説明を補足するため、ショートコードの上または下に追加のテキスト、HTML、または書式設定を追加できます。 - ビジュアルエディタ / HTML編集:リッチテキスト対応のビジュアルエディタ（ツールバー操作による書式設定用）とHTMLエディタ（直接コード編集用）を切り替えられます。どちらのモードでも動的ショートコードを併用して作業可能です。
- 配置:テキストコンテンツの水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに異なる配置をサポートします。
- フォントサイズ：コンテンツ領域のベースフォントサイズをスライダーで設定します（10～72px）。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、製品コンテンツブロックのタイポグラフィ、色、視覚的スタイルをカスタマイズできます。
スタイル:
- タイポグラフィ：製品コンテンツテキストのフォントファミリー、サイズ、太さ、行間、文字間隔、スタイルを設定します。
- 色：商品説明文のテキスト色を設定します。
- テキストシャドウ：テキストに影効果を追加します — 「なし」、「ヘアライン」、「小」、「中」、「大」、「特大」、「2倍大」から選択してください。
- シャドウ：ブロック全体にボックスシャドウを追加し、微妙な奥行き効果を演出します。
スペース:
- マージン：商品コンテンツブロックの周囲の余白（上、右、下、左）を制御します。これにより、商品説明とページ上の周囲の要素との間に表示されるスペースが決まります。
- パディング：商品コンテンツブロック内の内側の余白（上、右、下、左）を調整します。これにより、説明テキストとブロックの端の間に余裕が生まれます。
属性：
- CSS ID:製品コンテンツブロック用に自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-section|description)。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で製品コンテンツブロックを非表示にします。
- タブレットで非表示:タブレット端末で製品コンテンツブロックを非表示にします。
- モバイルで非表示:モバイル端末で製品コンテンツブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：商品コンテンツブロックが画面にスクロールインする際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。
ステップ4: 変更を保存する
製品コンテンツブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
シングル商品テンプレートに商品コンテンツブロックの追加が完了しました！このブロックは各商品に適切な商品説明を自動的に表示し、WooCommerceページが常に正確で最新のコンテンツを表示することを保証します。説明文のスタイル設定にはタイポグラフィと間隔調整機能を活用し、商品ページのデザインにシームレスに溶け込ませてください。