カスタマイズページで設定

アプリ内の「設定」ページから、目次のデザインや動作を細かくカスタマイズできます。右側のプレビューで変更をリアルタイムに確認しながら設定できます。

設定を変更したら「保存」バーの「保存」ボタンをクリックしてください。

目次ボックスの上部に表示するタイトルテキストです。デフォルトは「目次」です。任意のテキストに変更できます（例：「Contents」「この記事の内容」）。タイトルが不要な場合は空欄にしてください。

目次リスト内のテキストの水平方向の揃え方を指定します。

• 左寄せ（デフォルト）：テキストを左揃えにします。字下げ（インデント）と章番号の表記が有効になります

• 中央寄せ：テキストを中央揃えにします。字下げと章番号は無効になります

• 右寄せ：テキストを右揃えにします。字下げと章番号は無効になります

見出しレベルに応じて、下位の見出しを右に字下げ表示します。文字揃えが「左寄せ」のときのみ有効です。

• する（デフォルト）：H2の下にH3がある場合、H3が右にずれて階層構造が視覚的にわかります

• しない：すべての見出しを同じ位置に揃えて表示します

各目次項目の頭に付ける記号の種類を指定します。文字揃えが「左寄せ」のときのみ有効です。

• 丸：各項目の頭に「•」を表示します

• 数値：各項目の頭に「1. 2. 3.」のように番号を表示します。階層がある場合は「1.1. 1.2.」のように表示されます

• なし（デフォルト）：記号・番号なしで表示します

目次の各項目間に横線（区切り線）を表示するかどうかを設定します。

• あり（デフォルト）：項目間に細い横線が引かれます

• なし：区切り線を非表示にします

区切り線の色は「カラー」セクションの「区切り線」で変更できます。

目次に含める見出しのレベルを選択します。複数選択可能です。デフォルトはH2とH3です。

• h1〜h6：Shopifyのリッチテキストエディタで設定できる見出しレベルに対応しています

• 記事で使用している見出しレベルに合わせて設定してください。たとえばH2とH4だけ使っている場合は、H2とH4を選択します

• 選択した見出しが本文内に存在しない場合、目次は表示されません

目次をページのどこに表示するかを指定します。

• 最初の見出しの上（デフォルト）：「利用する見出し」で選択した最初の見出しの直前に目次を自動で挿入します。

  例えば、h2,h3を選択した場合、「Title > 文章 > h2 > 文章 > h3 > 文章 > h2 > 文章 」の構成の記事では、「Title > 文章 > 【目次】 > h2 > 文章 > h3 > 文章 > h2 > 文章 」の位置に目次が表示されます。

• テーマエディタで指定（OS2.0専用）：テーマエディターでアプリブロックを配置した位置に表示します。セクション内の任意の場所に配置したい場合に使用します

• class名を指定：指定したCSSクラス名を持つ要素の直前に目次を挿入します。同じクラス名が複数ある場合は最初の要素の前に表示されます。入力するclass名には「.（ドット）」は不要です。

目次のリンクをクリックしたときに、対象の見出しへスムーズにスクロールするかどうかを設定します。

• オン（デフォルト）：なめらかなスクロールアニメーションで移動します

• オフ：アニメーションなしで瞬時にジャンプします

目次リンクをクリックして見出しへジャンプしたとき、見出しが画面上端からどれだけ下に表示されるかを調整します（単位：px）。

固定ヘッダーがあるテーマでは、ヘッダーの高さ分だけオフセットを設定することで、見出しがヘッダーの下に隠れるのを防げます。たとえばヘッダーの高さが80pxの場合、80 と入力します。

目次タイトルのフォントサイズをpx単位で指定します。デフォルトは14pxです。0 を指定するとテーマのデフォルトフォントサイズが適用されます。

目次リスト内の各項目（見出しリンク）のフォントサイズをpx単位で指定します。デフォルトは14pxです。0 を指定するとテーマのデフォルトフォントサイズが適用されます。

目次ボックス内側の余白（パディング）をpx単位で指定します。

• 上部の余白：デフォルト16px

• 下部・左側・右側の余白：デフォルト0px

目次ボックスと内部コンテンツの間隔を調整したい場合に使用します。

目次ボックスの横幅の最大値をpx単位で指定します。0 を指定すると最大幅の制限なし（コンテンツ幅いっぱい）になります。

最大幅を設定した場合、「配置」設定で目次ボックスの水平位置を指定できます。

「目次の最大幅」を設定した場合に有効になります。目次ボックスをコンテンツ幅の中でどこに配置するかを指定します。

• 中央寄せ（デフォルト）

• 左寄せ

• 右寄せ

目次の各部分の色を設定します。カラーピッカーで色を選択するか、16進数のカラーコード（例：#FF0000）を直接入力できます。

マウスカーソルを目次リンクに重ねたとき（ホバー時）の色変化を有効にするかどうかを切り替えます。有効にすると「見出し（ホバー時）の下線スタイル」と「見出し（ホバー時）（カラー）」の設定が反映されます。

ホバー時に表示する下線の種類を指定します。「見出し（ホバー時）のカスタマイズ」を有効にした場合のみ適用されます。

• なし（デフォルト）：下線を表示しません

• 下線（実線）：実線の下線を表示します

• 下線（点線）：点線の下線を表示します

目次リンクのクリック時にジャンプするアンカーリンク（URLの # 以降の部分）に使用するIDの生成方法を選択します。

• 連番ID（デフォルト）：ruffruff-table-of-contents-1、ruffruff-table-of-contents-2 のように連番でIDを生成します。見出しのテキストに関係なく一意のIDが付与されるため、安定した動作が期待できます

• 見出しタイトル：見出しのテキストからスラッグ（URLに使える形式）を生成してIDとします。URLのフラグメントが見出しの内容と対応するため、外部からのアンカーリンクを共有したい場合に適しています

目次の折りたたみ・展開ができるトグルボタンを表示します。有効にすると、タイトルの横に「閉じる」「開く」ボタンが表示され、訪問者が目次を非表示にできるようになります。

「開閉ボタンを表示する」を有効にした場合に表示されるボタンのテキストをカスタマイズできます。

• 「開く」ボタン：目次が閉じているときに表示されるテキスト（デフォルト：「開く」）

• 「閉じる」ボタン：目次が開いているときに表示されるテキスト（デフォルト：「閉じる」）

英語サイトの場合は「show」「hide」など任意のテキストに変更できます。

ページ読み込み時に最初から表示する目次項目の数を指定します。項目数が設定値を超えた場合、残りの項目は非表示となり「すべて表示」ボタンが表示されます。空欄にするとすべての項目を常に表示します。

たとえば 3 と入力すると、最初は上から3項目のみ表示され、4項目目以降は「すべて表示」ボタンをクリックすると表示されます。

「目次の初期表示行数」が設定されているときに表示される全件表示ボタンのテキストをカスタマイズできます（デフォルト：「すべて表示」）。