商品タイトルブロックは、シングル商品テンプレートで各WooCommerce商品のタイトルを動的に取得して表示します。商品名を直接入力するのではなく、このブロックはWooCommerceから直接タイトルを取得するため、ページ全体で正確かつ一貫性を保ちます。
このブロックは、シングル商品テンプレートでのみ使用できるように設計されています。タイトルの表示方法は完全に制御できます。HTMLの見出しレベル（H1～H6）を選択し、デバイスごとに配置とフォントサイズを設定し、オプションでタイトルをリンクで囲むことができます。詳細設定タブでは、タイポグラフィ、色、テキストシャドウ効果などの追加のスタイリングオプションを利用できます。
商品タイトルブロックをページに追加する
SeedProdシングル商品テンプレートに商品タイトルブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロック > WooCommerceテンプレートタグの下にある商品タイトルブロックを、シングル商品テンプレートの目的のセクションにドラッグアンドドロップします。
ステップ2：コンテンツ設定を構成する
追加したら、商品タイトルブロックをクリックして設定を開きます。コンテンツタブの見出しセクションには、タイトルテキストフィールドと、商品タイトルがページに表示される方法のすべての表示オプションが含まれています。
- テキスト：コンテンツフィールドには
ショートコードが事前に入力されており、各商品について正しい商品タイトルをWooCommerceから自動的に取得します。必要に応じてショートコードの周りにカスタムテキストを追加したり、リッチテキストエディターを使用して太字、斜体、その他のインラインフォーマットを適用したりできます。 - リンク：リンクフィールドにURLを入力して、商品タイトルをハイパーリンクで囲むことができます。リンクオプションを展開して、新しいウィンドウで開く（リンクを新しいブラウザタブで開きます）またはノーフォロー（SEO目的でリンクに
rel="nofollow"属性を追加します）を有効にします。 - 配置：タイトルの水平方向の配置を設定します - 左、中央、または右。デスクトップ、タブレット、モバイルのデバイスごとの配置をサポートします。
- フォントサイズ：スライダー（10～72px）を使用してタイトルのフォントサイズを設定します。デスクトップ、タブレット、モバイルのデバイスごとのサイズ設定をサポートします。
- レベル：商品タイトルを出力するために使用されるHTML見出しタグを選択します - H1、H2、H3、H4、H5、またはH6。SEOのベストプラクティスとして、ページに他のH1が存在しない場合は、メインの商品タイトルにH1を使用してください。
ステップ3：デザインをカスタマイズする
詳細設定タブでは、タイトルの外観をさらにスタイル設定し、デバイス全体での表示を制御できます。
スタイル:
- タイポグラフィ：商品タイトルテキストのフォントファミリー、太さ、行の高さ、文字間隔、テキスト変換を設定し、コンテンツタブのフォントサイズスライダーを超える制御を提供します。
- 色: 商品タイトルのテキストカラーを設定します。
- テキストシャドウ: タイトルテキストに直接シャドウ効果を追加します。プリセットサイズ（なし、ヘアーライン、小、中、大、特大、2倍特大）から選択して、見出しに微妙または劇的な深みを加えます。
間隔：
- マージン: 商品タイトルブロックの外側の余白を制御します（上、右、下、左）。これにより、タイトルと商品ページ上の周囲の要素との間にどれだけのスペースが表示されるかが決まります。
- パディング: 商品タイトルブロックの内側の余白を調整します（上、右、下、左）。これにより、タイトルテキストとブロックの端の間に十分なスペースができます。
属性:
- CSS ID: 商品タイトルブロックの一意の自動生成IDを表示します。このIDは、カスタムスタイリングまたはJavaScriptターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
- カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、次の形式で入力します: attribute-name|value (例: data-title|product)。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で商品タイトルブロックを非表示にします。
- タブレットで非表示: タブレットデバイスで商品タイトルブロックを非表示にします。
- モバイルで非表示: モバイルデバイスで商品タイトルブロックを非表示にします。
アニメーション効果:
- 表示アニメーション: 商品タイトルブロックが表示領域にスクロールインしたときに再生されるさまざまなアニメーション効果から選択します。オプションには、バウンス、フェードイン、ズームイン、ローテートインなどがあります。
ステップ4：変更を保存
商品タイトルブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業内容を保存してください。
シングル商品テンプレートに商品タイトルブロックを追加しました！このブロックは、手作業なしで、WooCommerceカタログのすべての商品の正しいタイトルを自動的に表示します。見出しレベル、デバイスごとのフォントサイズ、テキストシャドウ効果を試して、視覚的に印象的で検索エンジンに最適化された商品タイトル表示を作成してください。