見出しブロックを使用すると、SeedProdのどのページにもスタイル付きの見出しを追加できます。ヒーローセクション用の太字のH1見出しから、コンテンツセクションを紹介する小さなH4見出しまで、見出しブロックではテキスト、HTMLレベル、リンク、タイポグラフィ設定を完全に制御できます。
プレーンテキストとは異なり、このブロックで作成する見出しはリッチテキスト書式、オプションのリンク、動的テキスト変数、デバイスごとのフォントサイズと配置制御をサポートします。これにより、構造化されSEO対策に優れたページ構築において最も汎用性の高いブロックの一つとなっています。
ページにヘッドラインブロックを追加する
SeedProdページにヘッドラインブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン＞ブロックで、見出しブロックをページの目的のセクションにドラッグ＆ドロップします。
ステップ2: コンテンツ設定の構成
追加後、見出しブロックをクリックして設定を開きます。コンテンツタブで、見出しテキスト、リンク、レイアウトを設定します。
見出し：
- 見出しテキストを入力してください。リッチテキストエディタを使用します。太字、斜体、下線、取り消し線、インラインカラーの書式設定に対応しています。動的テキスト変数を挿入したり、AIテキスト生成ツールを使用して見出し文を生成・調整することも可能です。
- リンク：見出しをクリック可能なリンクにするために、任意でURLを追加できます。リンクフィールドの横にある設定アイコンをクリックすると、追加のリンクオプションが表示されます。
- 新しいウィンドウで開く:このオプションを選択すると、リンク先のURLが新しいブラウザタブで開かれます。
- ノーフォロー: このオプションをチェックすると、
rel="nofollow"リンクに属性を付与し、検索エンジンにリンクの価値をリンク先へ渡さないよう指示する。 - 配置:テキストの配置を設定します — 左揃え、中央揃え、または右揃え。デスクトップ、タブレット、モバイルごとに個別の値をサポートします。
- フォントサイズ：見出しテキストのフォントサイズを設定します。デスクトップ、タブレット、モバイルごとにデバイス単位の値をサポートします。
- レベル：見出しに使うHTML見出しタグを選択してください —H1、H2、H3、H4、H5、またはH6。メインページタイトルにはH1を使用し、サブ見出しには下位のレベルを使用することで、適切な文書構造を維持します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、見出しブロックの書体、色、間隔をカスタマイズできます。
スタイル:
- タイポグラフィ：見出しのフォントファミリー、フォントウェイト、行間、文字間隔、テキスト変換を微調整します。デスクトップ、タブレット、モバイル向けにデバイスごとの値をサポートします。
- 色：カラーピッカーを使用して見出しのテキスト色を設定します。
- テキストシャドウ：見出しテキストに影効果を追加します。「なし」「ヘアライン」「小」「中」「大」「特大」「超特大」から選択し、見出しに奥行きと強調を加えられます。
スペース:
- マージン:ヘッドラインブロックの周囲の外側間隔（上、右、下、左）を制御します。デスクトップ、タブレット、モバイル向けのデバイスごとの値をサポートします。
- パディング：見出しブロック内の内側の間隔（上、右、下、左）を調整します。デスクトップ、タブレット、モバイルごとにデバイス別の値をサポートします。
属性：
- CSS ID:ヘッドラインブロックの自動生成された一意の識別子を表示します。SeedProdによってカスタムスタイリングやJavaScriptターゲティング用に自動的に作成されます。
- カスタムクラス：テーマやカスタムCSSから特定のスタイルを適用するためのカスタムCSSクラスを追加します。
- カスタム属性:ブロックラッパー要素に任意のHTML属性を追加します。各属性は改行で区切り、以下の形式で入力してください: 属性名|値。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面でヘッドラインブロックを非表示にします。
- タブレットで非表示:タブレット端末では見出しブロックを非表示にします。
- モバイルで非表示:モバイル端末では見出しブロックを非表示にします。
アニメーション効果：
- エントランスアニメーション：見出しブロックが画面にスクロールインする際に再生されるアニメーション効果を選択します。バウンス、フェードイン、ズームイン、回転インなど、多数の効果が用意されています。
ステップ4: 変更を保存する
見出しブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
見出しブロックをページに追加できました！効果的な見出しは、訪問者をコンテンツへと導き、メッセージを強化し、読者にも検索エンジンにもわかりやすいページ構成を実現します。見出しレベルやタイポグラフィ設定、アニメーションを工夫して、注目を集め、ブランドスタイルに合った見出しを作成しましょう。