商品タイトルブロックは、単一商品テンプレート上で各WooCommerce商品のタイトルを動的に取得・表示します。商品名を手動で入力する代わりに、このブロックは全商品についてWooCommerceから直接タイトルを取得するため、カタログ全体でページの内容が正確かつ一貫性を保ちます。
このブロックは、単一商品テンプレートでのみ使用することを想定して設計されています。タイトルの表示方法を完全に制御できます。HTML見出しレベル（H1～H6）の選択、デバイスごとの配置とフォントサイズの設定、オプションでタイトルをリンクで囲むことが可能です。「詳細設定」タブでは、タイポグラフィ、色、テキストシャドウ効果など、追加のスタイル設定オプションを利用できます。
ページに製品タイトルブロックを追加する
SeedProdの単一商品テンプレートに商品タイトルブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン > ブロック > WooCommerce テンプレートタグ の下で、商品タイトルブロックを商品単体テンプレートの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、商品タイトルブロックをクリックして設定を開きます。コンテンツタブの「見出し」セクションには、タイトルテキストフィールドと、商品タイトルがページ上に表示される方法に関するすべての表示オプションが含まれています。
- テキスト： コンテンツフィールドには事前に
各商品に対してWooCommerceから自動的に正しい商品タイトルを取得するショートコードです。必要に応じてショートコードの周囲にカスタムテキストを追加したり、リッチテキストエディタを使用して太字、斜体、その他のインライン書式を適用したりできます。 - リンク: 製品タイトルをハイパーリンクで囲む場合は、リンク欄にURLを入力してください。リンクオプションを展開して有効化します。 新しいウィンドウで開く (リンクを新しいブラウザタブで開く) または ノーフォロー (追加する
rel="nofollow"SEO目的でリンクに属性を付与する。 - 配置:タイトルの水平方向の配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルごとに異なる配置をサポートします。
- フォントサイズ：スライダーでタイトルのフォントサイズを設定（10～72px）。デスクトップ、タブレット、モバイル向けにデバイスごとのサイズ設定をサポート。
- レベル:商品タイトルの出力に使用するHTML見出しタグを選択してください — H1、H2、H3、H4、H5、またはH6。SEOのベストプラクティスとして、ページ上に他のH1が存在しない場合は、メイン商品タイトルにH1を使用してください。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、タイトルの外観をさらにカスタマイズしたり、デバイスごとの表示設定を制御したりできます。
スタイル:
- タイポグラフィ：製品タイトルテキストのフォントファミリー、太さ、行間、文字間隔、テキスト変換を設定し、コンテンツタブのフォントサイズスライダーでは制御できない範囲まで調整可能です。
- 色：商品タイトルの文字色を設定します。
- テキストシャドウ：タイトルテキストに直接影効果を追加します。プリセットサイズ（なし、ヘアライン、小、中、大、特大、2倍特大）から選択し、見出しに繊細な深みから劇的な立体感までを加えられます。
スペース:
- マージン：商品タイトルブロックの周囲の余白（上、右、下、左）を制御します。これにより、商品ページ上でタイトルと周囲の要素の間に表示されるスペースが決まります。
- パディング：商品タイトルブロック内の内側の余白（上、右、下、左）を調整します。これにより、タイトルテキストとブロックの端の間に余裕が生まれます。
属性：
- CSS ID:製品タイトルブロックの自動生成された一意の識別子を表示します。このIDは、カスタムスタイリングやJavaScriptのターゲティングのためにSeedProdによって自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値 (例: data-title|product)。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で製品タイトルブロックを非表示にします。
- タブレットで非表示:タブレット端末で製品タイトルブロックを非表示にします。
- モバイルで非表示:モバイル端末で商品タイトルブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：商品タイトルブロックが表示される際に再生される様々なアニメーション効果から選択できます。バウンス、フェードイン、ズームイン、回転インなど、多数のオプションが用意されています。
ステップ4: 変更を保存する
製品タイトルブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
シングル商品テンプレートに商品タイトルブロックの追加に成功しました！このブロックは、WooCommerceカタログ内の全商品に対し、手動操作なしで自動的に適切なタイトルを表示します。見出しレベル、デバイスごとのフォントサイズ、テキストシャドウ効果を自由に調整し、視覚的に印象的でかつ検索エンジン最適化された商品タイトルの表示を実現してください。