目次ブロックは、SeedProdページの見出しに基づいて自動的にクリック可能なナビゲーションメニューを生成します。訪問者はすべてのセクションを一目で確認し、ページ全体をスクロールすることなく必要なコンテンツに直接ジャンプできます。
このブロックは、詳細なガイド、チュートリアル、製品ドキュメント、複数セクションのランディングページなど、長文コンテンツに特に有用です。見出しレベルの設定、番号表示の有無、ネストされた項目のインデント、訪問者によるボックスの折りたたみ可否を制御できます。タイトル、リンク、コンテナごとに独立したタイポグラフィ、カラー、ボーダー設定が可能で、デザインは完全にカスタマイズ可能です。
ページに目次ブロックを追加する
SeedProdページに目次ブロックを追加するには、以下の手順に従ってください：
ステップ1: ブロックを追加する
デザイン＞ブロックで、目次ブロックをページの希望するセクションにドラッグ＆ドロップします。このブロックは通常、コンテンツの上部付近、簡単な導入文の後、主要セクションが始まる前に配置されます。
ステップ2: コンテンツ設定の構成
追加後、目次ブロックをクリックして設定を開きます。「コンテンツ」タブでは、設定が2つのグループに分類されています。
一般:
- タイトルの表示:目次の上部にタイトルを表示するかどうかを切り替えます。「はい」に設定すると見出しラベルが表示され、「いいえ」に設定するとリンクのみが表示されます。
- タイトルテキスト:「タイトルを表示」が有効な場合（デフォルト: 「目次」）、目次見出しとして表示されるテキストを入力してください。
- タイトルタグ:タイトルの表示に使用するHTML見出しタグを選択 — H2、H3、H4、またはDIV。
- 見出しを含める:リンクを検索する見出しレベルをカンマ区切りで入力してください（例: h2,h3,h4）。これらのタグに一致する見出しのみが生成されるナビゲーションに表示されます。
- コンテンツコンテナ:ページの特定領域のみ見出しをスキャンするように制限するCSSセレクタを入力してください。空白のままにするとページ全体をスキャンします。
- 除外するセレクタ:目次から除外したい見出しのCSSセレクタをカンマ区切りで入力してください。
- 番号を表示:目次項目の自動番号付けを切り替え (はい/いいえ)。
- 階層番号付け:「番号を表示」が有効な場合、小見出しにはネストされた番号付けを使用します（例: 1.1、1.2、2.1）。
- スムーズスクロール:訪問者が目次リンクをクリックした際に、スムーズなスクロールアニメーションを有効にします（はい/いいえ）。
- スクロールオフセット (px):スクロール先をオフセットするピクセル数を設定します。ページに固定ヘッダーがあり、それがターゲット見出しを隠してしまう場合に便利です。
- リストスタイル:目次項目の箇条書きスタイルを選択してください: なし、丸印、円形、四角形、または小数点。
追加オプション：
- 最小化ボックス：訪問者がトグルボタン（はい/いいえ）を使用して目次全体を折りたたんだり展開したりできるようにします。
- 展開アイコン:目次が折りたたまれているときにトグルボタンに表示されるアイコンを選択します。
- 折りたたみアイコン:目次が展開されている際にトグルボタンに表示されるアイコンを選択します。
ステップ3：デザインのカスタマイズ
[詳細設定]タブでは、目次ブロックの外観と動作をカスタマイズできます。
タイトルスタイル（タイトル表示が有効な場合のみ表示されます）：
- タイトルの組版：目次見出しのフォントファミリー、サイズ、太さ、スタイル、行間、文字間隔、大文字小文字を設定します。
- タイトル色：見出しのテキスト色を選択してください。
- タイトル間隔：タイトルとリンク一覧の間の下余白を調整します（0～50px）。
リンクスタイル:
- リンクのタイポグラフィ:ナビゲーションリンクのフォントファミリー、サイズ、ウェイト、スタイル、その他のタイポグラフィプロパティを設定します。
- リンク色：目次リンクのデフォルト色を設定します。
- リンクホバーカラー:訪問者がリンクにカーソルを合わせた際に表示されるリンクの色を設定します。
- アイテム間隔：リスト内の各アイテム間の垂直方向の隙間を制御します（0～30px）。
- リストのインデント:ネストされた見出しレベルに適用される水平方向のインデントを設定します (0～100px)。
コンテナスタイル:
- 背景色：目次コンテナ全体の背景色を設定します。
- コンテナの幅:スライダーでコンテナの幅を調整します。単位切り替えボタンでピクセル単位（0～1200）とパーセント単位（0～100）を切り替えられます。
- コンテナのパディング：コンテナの境界線と内部コンテンツの間隔を設定します（1～100px）。
- 枠線：コンテナの周囲に枠線を追加・設定します。枠線のスタイルを選択し、各辺（上、右、下、左）の幅を個別に設定し、枠線の色を選択します。
- 角丸半径:コンテナの角を丸くします (0–50px)。
スペース:
- 余白：ブロックの周囲の四辺の外側の間隔を設定します。デスクトップ、タブレット、モバイルそれぞれで独立して制御できます。
- パディング：ブロックラッパー内の四辺すべてに内側の間隔を設定し、デバイスごとの制御を行います。
属性：
- カスタムクラス:ブロックラッパーに1つ以上のカスタムCSSクラスを追加し、対象を絞ったスタイル設定を行います。
- CSS ID:SeedProdはこのブロックに対して一意のCSS IDを自動生成します。カスタムCSSやJavaScriptでブロックを参照する際に使用できます。
- カスタム属性:ブロックラッパー要素にカスタムHTML属性を追加します。各属性をキー|値形式で改行して入力してください。
ポジション：
- 位置:ブロックのCSS位置指定を設定します — 静的、相対、固定、絶対、または固定位置 — デスクトップ、タブレット、モバイルごとに独立した値を設定できます。
- オフセット：固定配置、絶対配置、または固定配置を使用する場合、デバイスごとに上、右、下、左のオフセット距離を設定します。
- Z-Index:ページ上の他の要素に対するブロックの積み重ね順序を設定します。デバイスごとの値を指定します。
- オーバーフロー:ブロック境界を超えたコンテンツの処理方法をデバイスごとに制御します — 表示、非表示、スクロール、または自動。
デバイスの可視性:
- デスクトップで非表示:デスクトップ画面で表示した際にブロックを非表示にするか切り替えます。
- タブレットで非表示:タブレット画面で表示時にブロックを非表示にするか切り替えます。
- モバイルで非表示:モバイル画面で表示される際にこのブロックを非表示にするか切り替えます。
アニメーション効果：
- スクロール効果：ブロックにスクロール連動アニメーションを適用します。垂直スクロールと水平スクロールのオプションを含み、方向、速度、ビューポートオフセットを制御できます。
- マウス効果：ブロックにマウスの動きに基づく視差効果を適用します。
ステップ4: 変更を保存する
目次ブロックの設定と外観のカスタマイズが完了したら、必ず作業内容を保存してください。
ページに目次ブロックを正常に追加できました！このナビゲーションツールにより、訪問者はページの構造を即座に把握し、最も関連性の高いセクションにアクセスできます。見出しレベル、リストスタイル、コンテナのスタイリングを試し、ページデザインに自然に溶け込み、読者の関心を維持する目次を作成してください。