目次ブロックは、SeedProdページで見つかった見出しに基づいて、クリック可能なナビゲーションメニューを自動的に生成します。訪問者は、ページ全体をスクロールすることなく、すべてのセクションを一度にスキャンして、必要なコンテンツに直接ジャンプできます。
このブロックは、詳細なガイド、チュートリアル、製品ドキュメント、複数セクションのランディングページなどの長文コンテンツに特に役立ちます。どの見出しレベルを含めるか、番号付けを表示するかどうか、ネストされた項目をどのようにインデントするか、訪問者がボックスを折りたたむことができるかどうかを制御できます。デザインは、タイトル、リンク、コンテナのタイポグラフィ、色、境界線の個別のコントロールで完全にカスタマイズ可能です。
ページに目次ブロックを追加する
SeedProdページに目次ブロックを追加するには、次の手順に従ってください。
ステップ1：ブロックを追加する
デザイン > ブロックの下で、目次ブロックをページ内の目的のセクションにドラッグアンドドロップします。このブロックは通常、コンテンツの先頭近く、簡単な紹介の後、メインセクションが始まる前に配置されます。
ステップ2：コンテンツ設定を構成する
追加したら、目次ブロックをクリックして設定を開きます。コンテンツタブの設定は、2つのグループに整理されています。
一般：
- タイトルの表示：目次の上に表示される見出しラベルを表示するかどうかを切り替えます。見出しラベルを表示するには「はい」に設定し、リンクのみを表示するには「いいえ」に設定します。
- タイトルテキスト：タイトルの表示が有効な場合に表示される目次の見出しテキストを入力します（デフォルト：「目次」）。
- タイトルタグ：タイトルをレンダリングするために使用されるHTML見出しタグを選択します — H2、H3、H4、またはDIV。
- 含める見出し：リンクをスキャンする見出しレベルのカンマ区切りリストを入力します（例：h2、h3、h4）。これらのタグに一致する見出しのみが生成されたナビゲーションに表示されます。
- コンテンツコンテナ：CSSセレクターを入力して、見出しのスキャンをページの特定の領域に制限します。ページ全体をスキャンするには空白のままにします。
- 除外するセレクター：目次から除外したい見出しのカンマ区切りCSSセレクターを入力します。
- 番号を表示：目次項目の自動番号付けを切り替えます（はい/いいえ）。
- 階層番号：番号を表示が有効な場合にサブ見出しにネストされた番号を使用します（例：1.1、1.2、2.1）。
- スムーズスクロール：訪問者が目次リンクをクリックしたときにスムーズなスクロールアニメーションを有効にします（はい/いいえ）。
- スクロールオフセット（px）：スクロール先のオフセットピクセル数を設定します — ページに固定ヘッダーがあり、それがターゲット見出しを隠してしまう場合に便利です。
- リストスタイル：目次項目の箇条書きスタイルを選択します：なし、ディスク、円、四角、または10進数。
追加オプション：
- 最小化ボックス:訪問者がトグルボタン（はい/いいえ）を使用して目次全体を折りたたんだり展開したりできるようにします。
- 展開アイコン:目次が折りたたまれたときにトグルボタンに表示されるアイコンを選択します。
- 折りたたみアイコン:目次が展開されたときにトグルボタンに表示されるアイコンを選択します。
ステップ3：デザインをカスタマイズする
高度な設定タブでは、目次ブロックの視覚的な外観と動作をカスタマイズできます。
タイトルのスタイル（タイトルを表示が有効な場合にのみ表示されます）:
- タイトルのタイポグラフィ:目次の見出しのフォントファミリー、サイズ、太さ、スタイル、行の高さ、文字間隔、文字ケースを設定します。
- タイトルの色:見出しのテキストの色を選択します。
- タイトルの間隔:タイトルとリンクリストの間の下部マージンを調整します（0〜50px）。
リンクのスタイル:
- リンクのタイポグラフィ:ナビゲーションリンクのフォントファミリー、サイズ、太さ、スタイル、その他のタイポグラフィプロパティを設定します。
- リンクの色:目次リンクのデフォルトの色を設定します。
- リンクのホバー時の色:訪問者がリンクにカーソルを合わせたときに表示される色を設定します。
- 項目の間隔:リスト内の各項目の間の垂直方向の間隔を制御します（0〜30px）。
- リストのインデント:ネストされた見出しレベルに適用される水平方向のインデントを設定します（0〜100px）。
コンテナのスタイル:
- 背景色:目次コンテナ全体の背景色を設定します。
- コンテナの幅:スライダーを使用してコンテナの幅を調整します。ユニットトグルでピクセル（0〜1200）とパーセンテージ（0〜100）を切り替えます。
- コンテナのパディング:コンテナの端と内部のコンテンツとの間の内側の間隔を設定します（1〜100px）。
- 境界線:コンテナの周りに境界線を追加および設定します。境界線のスタイルを選択し、各辺（上、右、下、左）の個別の幅を設定し、境界線の色を選択します。
- 境界線の半径:コンテナの角を丸めます（0〜50px）。
間隔：
- マージン: ブロックの外側のスペーシングを4つの側面すべてに設定します。デスクトップ、タブレット、モバイルで個別に制御できます。
- パディング: ブロックラッパーの内側のスペーシングを4つの側面すべてに設定します。デバイスごとに制御できます。
属性:
- カスタムクラス: ブロックラッパーに1つ以上のカスタムCSSクラスを追加して、ターゲットを絞ったスタイリングを行います。
- CSS ID: SeedProdは、このブロックに一意のCSS IDを自動的に生成します。カスタムCSSまたはJavaScriptでブロックを参照するために使用できます。
- カスタム属性: ブロックラッパー要素にカスタムHTML属性を追加します。キー|値の形式で、各属性を新しい行に入力します。
位置:
- 位置:ブロックのCSSポジショニングを設定します。静的、相対、固定、絶対、またはスティッキー。デスクトップ、タブレット、モバイルごとに独立した値があります。
- オフセット:固定、絶対、またはスティッキーポジショニングを使用する場合、デバイスごとに上、右、下、左のオフセット距離を設定します。
- Zインデックス:デバイスごとの値を使用して、ページ上の他の要素に対するブロックのスタッキング順序を設定します。
- オーバーフロー:ブロックの境界を超えて拡張するコンテンツの処理方法を制御します。デバイスごとに表示、非表示、スクロール、または自動を選択します。
デバイス表示:
- デスクトップで非表示: デスクトップ画面で表示されたときにブロックを非表示にするには、トグルします。
- タブレットで非表示: タブレット画面で表示されたときにブロックを非表示にするには、トグルします。
- モバイルで非表示: モバイル画面で表示されたときにブロックを非表示にするには、トグルします。
アニメーション効果:
- スクロールエフェクト: ブロックにスクロールでトリガーされるアニメーションを適用します。方向、速度、ビューポートオフセット制御を備えた垂直スクロールおよび水平スクロールオプションが含まれます。
- マウスエフェクト: マウスの動きによって駆動されるパララックス効果をブロックに適用します。
ステップ4：変更を保存
目次ブロックの設定と外観のカスタマイズが完了したら、作業を保存してください。
目次ブロックをページに正常に追加しました！このナビゲーションツールは、訪問者がページの構造をすぐに理解し、最も関連性の高いセクションに到達するのに役立ちます。見出しレベル、リストスタイル、コンテナースタイルを試して、ページデザインに自然に馴染み、読者を引き付ける目次を作成してください。