SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

見出しブロック

見出しブロックを使用すると、SeedProdの任意のページに見出しを追加できます。ヒーローセクション用の太字のH1が必要な場合でも、コンテンツセクションを紹介するための小さなH4が必要な場合でも、見出しブロックを使用すると、テキスト、HTMLレベル、リンク、タイポグラフィ設定を完全に制御できます。

プレーンテキストとは異なり、このブロックで見出しを作成すると、リッチテキストフォーマット、オプションのリンク、動的なテキスト変数、デバイスごとのフォントサイズと配置制御がサポートされます。これにより、構造化されたSEOフレンドリーなページを構築するための最も汎用性の高いブロックの1つになります。

見出しブロックの例

要件: 見出しブロックは、すべてのライセンスプランで利用可能です。


ページに見出しブロックを追加する

SeedProdページに見出しブロックを追加するには、次の手順に従います。

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

デザイン > ブロックの下で、見出しブロックをページの目的のセクションにドラッグアンドドロップします。

見出しブロックを SeedProd ページにドラッグする

ステップ2:コンテンツ設定を構成する

追加したら、見出しブロックをクリックして設定を開きます。コンテンツタブで、見出しテキスト、リンク、レイアウトを構成します。

見出し:

  • テキスト: リッチテキストエディタを使用して見出しテキストを入力します。太字、イタリック、下線、取り消し線、インラインカラーフォーマットをサポートします。動的なテキスト変数やAIテキスト生成ツールを挿入して、見出しのコピーを生成および調整することもできます。
  • リンク: オプションでURLを追加して、見出しを clickable link にします。リンクフィールドの横にある設定アイコンをクリックすると、追加のリンクオプションが表示されます。
  • 新規ウィンドウで開く: このオプションをチェックすると、リンクされたURLが新しいブラウザタブで開かれます。
  • ノーフォロー: このオプションをチェックすると、リンクにrel="nofollow"属性が追加され、検索エンジンにリンクエクイティを宛先に渡さないように指示します。
  • 配置: テキストの配置を設定します — 左、中央、または右。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
  • フォントサイズ: 見出しテキストのフォントサイズを設定します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
  • レベル: 見出しのHTML見出しタグを選択します — H1H2H3H4H5、またはH6。メインページタイトルにはH1を使用し、サブヘッダーには低いレベルを使用して、適切なドキュメント構造を維持します。
見出しブロックのコンテンツ設定

ステップ3:デザインをカスタマイズする

高度な設定タブでは、見出しブロックのタイポグラフィ、色、スペーシングをカスタマイズできます。

スタイル:

  • タイポグラフィ: フォントファミリー、フォントの太さ、行の高さ、文字間隔、テキストの変換を見出しのフォントに合わせて微調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
  • 色: カラーピッカーを使用して、見出しのテキスト色を設定します。
  • テキストシャドウ: 見出しテキストにシャドウ効果を追加します。なし、ヘアライン、小、中、大、特大、2倍特大から選択して、見出しに深みと強調を追加します。

間隔:

  • マージン: 見出しブロックの周囲の外部スペーシング(上、右、下、左)を制御します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。
  • パディング: 見出しブロック内の内部スペーシング(上、右、下、左)を調整します。デスクトップ、タブレット、モバイルのデバイスごとの値をサポートします。

属性:

  • CSS ID: SeedProd がカスタムスタイリングまたは JavaScript のターゲット指定のために自動生成した、見出しブロックの固有の識別子を表示します。
  • カスタムクラス: テーマまたはカスタムCSSから特定のスタイルを適用するためにカスタムCSSクラスを追加します。
  • カスタム属性: ブロックラッパー要素に任意のHTML属性を追加します。属性名を改行し、attribute-name|valueの形式で入力します。

デバイス表示:

  • デスクトップで非表示: デスクトップ画面で見出しブロックを非表示にします。
  • タブレットで非表示: タブレットデバイスで見出しブロックを非表示にします。
  • モバイルで非表示: モバイルデバイスで見出しブロックを非表示にします。

アニメーション効果:

  • 表示アニメーション: バウンス、フェードイン、ズームイン、ローテートインなど、見出しブロックが表示領域に入ったときに再生されるアニメーション効果を選択します。
見出しブロックの詳細設定

ステップ4:変更を保存

見出しブロックの設定が完了し、外観のカスタマイズが終わったら、必ず作業内容を保存してください。


ページに見出しブロックを追加しました!適切に作成された見出しは、訪問者をコンテンツに誘導し、メッセージを強化し、読者と検索エンジンの両方にとってページ構造を改善します。見出しレベル、タイポグラフィ設定、アニメーションを試して、注目を集め、ブランドスタイルに合った見出しを作成してください。

関連記事