目次ブロックは、ページコンテンツの見出しに基づいて自動的にクリック可能なナビゲーションメニューを生成します。このブロックは訪問者がページ内の特定のセクションを素早く確認し移動するのに役立ち、ユーザー体験を向上させ、長文コンテンツへのアクセスを容易にします。
目次ブロックは、詳細なガイド、チュートリアル、製品ドキュメント、ブログ記事、およびユーザーが直接移動したい複数のセクションを含むあらゆるページで特に有用です。
ページに目次ブロックを追加する
SeedProdページに目次ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン＞ブロックで、目次ブロックをページの希望するセクションにドラッグ＆ドロップします。このブロックは通常、ページコンテンツの上部、導入部の後、主要セクションが始まる前に配置されます。
ステップ2: コンテンツ設定の構成
追加後、目次ブロックをクリックして設定を開きます。「コンテンツ」タブでは、目次の動作をカスタマイズするいくつかのオプションが見つかります：
一般設定：
- 見出しの表示：目次の上部に表示する見出しの表示/非表示を切り替えます（例：「目次」または「このページの内容」）。
- タイトルテキスト：タイトルとして表示されるテキストをカスタマイズ
- タイトルタグ:タイトルに使用するHTML見出しタグを選択してください（H2、H3、H4、またはDIV）
- 見出しを含める:目次に含める見出しレベルをカンマ区切りで指定します（例: h2,h3,h4）。これにより、ページ内のどの見出しがリンクとして表示されるかが決定されます。
- コンテンツコンテナ:SeedProdが見出しを検索するコンテナのCSSセレクタを入力してください。空白のままにするとページ全体を検索します
- 除外するセレクタ:目次から除外したい見出しのCSSセレクタを追加（カンマ区切り）
表示オプション：
- 番号を表示:目次項目に自動番号付けを追加します（例: 1, 2, 3）
- 階層番号付け：小見出しにはネストされた番号付けを使用してください（例：1.1、1.2、2.1）
- スムーズスクロール:ユーザーが目次リンクをクリックした際に、スムーズなスクロールアニメーションを有効にする
- スクロールオフセット:固定ヘッダーがある場合に便利な、スクロール位置をオフセットするピクセル数を設定します
- リストスタイル:目次用の箇条書きスタイルを選択してください（なし、丸印、円形、四角形、または小数点）
追加オプション：
- 最小化ボックス：トグルボタンで目次を折りたたんだり展開したりできるようにする
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、目次の外観をカスタマイズできます：
タイトルスタイル：
- タイトルのタイポグラフィ：タイトルのフォントファミリー、サイズ、ウェイト、行間を調整する
- タイトルの色:タイトルテキストの色を設定します
- タイトルの余白：タイトル周辺の余白を制御する
リンクスタイル:
- リンクの書式設定：目次リンクのフォント設定をカスタマイズする
- リンクの色:リンクのデフォルトの色を設定します
- リンクホバーカラー:ユーザーがリンクにカーソルを合わせた際の表示色を選択します
- 項目間隔:各目次項目間の間隔を調整します
- リストのインデント：入れ子になった見出しレベルのインデントを制御します
コンテナスタイル:
- 背景色:目次コンテナの背景色を設定します
- コンテナの幅:ピクセルまたはパーセンテージで幅を調整
- コンテナのパディング：コンテナ内部に余白を追加する
- 枠線：目次周囲の枠線を追加・カスタマイズする
- 角丸:コンテナに角丸を作成する
ステップ4: 変更を保存する
目次ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページに目次ブロックを追加できました！この強力なナビゲーションツールは、訪問者が探している情報を正確に見つけられるよう支援し、エンゲージメントとユーザー体験を向上させます。さまざまなスタイルや設定を試して、ブランドに合った目次を作成し、読者のニーズに応えましょう。