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

アプリ内メニューの「目次のカスタマイズ」から、目次の見た目と動作を変更できます。設定はすべてのテンプレートに共通です。右側のプレビューで表示を確認できます。

(1) 目次のカスタマイズを開く

Shopify管理画面 → アプリから「RuffRuff 目次作成」を開き、アプリ内メニューの「目次のカスタマイズ」を選択してください。

(2) 項目を変更する

プレビューを見ながら項目を変更してください。

(3) 保存する

「保存」を選択してください。

前提: テーマに「目次」アプリブロック、または以前のテーマでは埋め込みアプリを追加してください。追加していない場合、設定を保存してもオンラインストアに目次は表示されません。

フリープランを含む、すべてのプランで次の項目を変更できます。

設定項目	内容
タイトル	目次上部の見出し。空欄なら非表示
文字揃え	左寄せ、中央寄せ、右寄せ
字下げ（インデント）	見出しレベルに応じた字下げ。左寄せのときだけ有効
章番号の表記	丸、数値、なし。左寄せのときだけ有効
区切り線	項目間の横線
利用する見出し	目次に含めるH1〜H6。初期値はH2とH3
表示位置	最初の見出しの上、テーマエディタで指定、class名を指定
スクロール	見出しへ移動するときのアニメーション
スクロール時の上部余白	固定ヘッダー分の余白（px）
タイトルのフォントサイズ	タイトルの大きさ（px）。0 はテーマの初期値
見出しのフォントサイズ	目次項目の大きさ（px）。0 はテーマの初期値
上部・下部・左側・右側の余白	目次内の余白（px）
目次の最大幅	横幅の上限（px）。0 は制限なし
配置	左寄せ、中央寄せ、右寄せ。最大幅を指定したときに有効
背景・枠線・区切り線・タイトル・見出し	各部分の色

目次の上部に表示するテキストです。空欄のままにすると、タイトルは表示されません。

目次項目の水平位置です。左寄せ、中央寄せ、右寄せから選べます。字下げと章番号は、左寄せのときだけ有効です。

見出しレベルに応じて下の階層を右へずらします。文字揃えが左寄せのときだけ使えます。

各項目の先頭に付ける記号です。文字揃えが左寄せのときだけ使えます。

項目の間に横線を表示します。線の色はカラーの「区切り線」で変更します。

目次に含める見出しレベルです。H1〜H6から複数選べます。初期値はH2とH3です。本文に、選んだ見出しがない場合は目次が表示されません。

目次をページのどこに出すかを選びます。

class名の指定方法は、「class名を指定して目次を表示」を確認してください。

目次の項目を選んだとき、見出しへなめらかに移動するかどうかを設定します。

見出しへ移動したとき、画面上端からの余白（px）です。固定ヘッダーがある場合は、ヘッダーの高さを入れてください。見出しがヘッダーの下に隠れにくくなります。

タイトルと目次項目の大きさをpxで指定します。0 にすると、テーマの初期サイズを使います。

目次内の上下左右の余白と、横幅の上限をpxで指定します。最大幅が 0 より大きいときだけ、配置（左寄せ、中央寄せ、右寄せ）が有効です。

背景、枠線、区切り線、タイトル、見出しの色を変更できます。

制限: 背景色の透明には対応していません。挿入先テーマの背景色と同じ色を指定すると、透明に近づけられます。

ライトプランとレギュラープランでは、次の項目も変更できます。