RuffRuff 目次作成の「目次のカスタマイズ」で、目次の見た目と動作を変更できます。ここで保存する設定は、すべてのテンプレートに共通です。右側のプレビューで、保存前の見た目を確認できます。
Online Store 2.0対応テーマでは「目次」アプリブロックを、以前のテーマでは埋め込みアプリを追加してください。追加していない場合、設定を保存してもオンラインストアに目次は表示されません。追加方法は「初期セットアップ」を確認してください。
(1) 目次のカスタマイズを開く
Shopify管理画面 → アプリから「RuffRuff 目次作成」を開き、アプリ内メニューの「目次のカスタマイズ」を選択してください。ホーム画面の「目次をカスタマイズする」カードにある「カスタマイズする」からも開けます。
(2) 項目を変更する
右側のプレビューを見ながら、項目を変更してください。変更すると画面上部に「未保存の変更」バーが出ます。
(3) 保存する
「保存」を選択してください。変更を取り消す場合は「破棄」を選択してください。
保存後、設定したテーマで、見出しを含む公開中のブログ記事をオンラインストアで開いてください。変更した色や余白などが目次に反映されていれば完了です。
Light Plan以上で「開閉ボタンを表示する」を有効にした場合は、目次の開閉ボタンを選択し、目次が閉じたり開いたりすることも確認してください。
画面の「Free Plan」カードにある項目は、Free Planを含むすべてのプランで変更できます。
タイトル: 目次の上部に表示するテキストです。プレースホルダは「目次」です。空欄にするとタイトルは表示されません。
文字揃え: 初期値は「左寄せ」です。「左寄せ」「中央寄せ」「右寄せ」から選べます。左寄せ以外を指定した場合、字下げ（インデント）と章番号の表記は無効になります。
字下げと章番号の表記は、文字揃えが左寄せのときだけ有効です。
字下げ（インデント）: 初期値は「する」です。「する」にすると、見出しレベルに応じて下の階層を右へずらします。「しない」にすると、すべての項目を同じ位置に揃えます。
章番号の表記: 初期値は「なし」です。「なし」は記号も番号も付けません。「数値」はプレビューで
1、1.1、2、2.1のように付きます。「丸」は先頭に•が付きます。
区切り線: 初期値は「あり」です。項目の間に横線を表示します。線の色はカラーの「区切り線」で変更します。
目次に含める見出しレベルです。h1〜h6から複数選べます。初期値は h2 と h3 です。本文に、選んだ見出しが1つもない場合、目次は表示されません。
目次をページのどこに出すかと、項目を選んだあとの動きを設定します。
最初の見出しの上: 初期値です。「利用する見出し」で選んだ見出しのうち、最初の見出しの直前に表示します。
テーマエディタで指定 (Online Store 2.0専用): アプリブロックを置いた位置に表示します。
class名を指定: 指定したclass名を持つ最初の要素の先頭に表示します。指定方法は「class名を指定して目次を表示」を確認してください。
スクロール時のアニメーションをつける: 初期値はオンです。目次の項目を選んだとき、見出しへなめらかに移動します。
スクロール時の上部余白: 初期値は 0px です。見出しへ移動したとき、画面上端からの余白です。固定ヘッダーがある場合は、ヘッダーの高さ（px）を入れてください。この余白は「スクロール時のアニメーションをつける」がオンのときだけ使われます。ずれが残る場合は「目次を選んだあとに見出し位置がずれる」を確認してください。
タイトルのフォントサイズ / 見出しのフォントサイズ: 初期値は 14px です。0 にすると、テーマで指定されている文字サイズを使います。
上部・下部・左側・右側の余白: 目次内の余白（px）です。初期値は上部 16px、下部・左側・右側は 0 です。
目次の最大幅: 横幅の上限（px）です。初期値は 0 で、制限なしです。
配置: 初期値は「中央寄せ」です。表示エリアが最大幅の指定よりも大きい場合に有効です。最大幅が 0 より大きいときだけ、「左寄せ」「中央寄せ」「右寄せ」が使えます。
背景、枠線、区切り線、タイトル、見出しの色を変更できます。
背景色の透明には対応していません。挿入先テーマの背景色と同じ色を指定すると、透明に近づけられます。
Light PlanとRegular Planでは、画面の「Light Plan」カードの項目も変更できます。Free Planでは、見出しのホバー、開閉ボタン、初期表示行数は無効になります。
「見出し (ホバー時) のカスタマイズを有効にする」をオンにすると、マウスを重ねたときの色と下線が反映されます。下線スタイルの初期値は「なし」です。「なし」「下線 (実線)」「下線 (点線)」から選べます。
目次から移動するときのアンカー（URLの # 以降）の作り方です。初期値は「連番ID」です。
連番ID:
ruffruff-table-of-contents-item-1、ruffruff-table-of-contents-item-2のように、目次の順に番号で付きます。見出しタイトル: 見出しタイトルからスラッグを生成します。
「開閉ボタンを表示する」をオンにすると、お客様が目次を折りたためます。変えていなければ、ボタンの文字は英語の hide / show / show all のまま表示されます。
「閉じる」ボタンのテキスト: 初期値は
hideです。目次が開いているときに表示されます。「開く」ボタンのテキスト: 初期値は
showです。目次が閉じているときに表示されます。目次の初期表示行数: 空欄（初期値）なら、すべての項目を表示します。数値を入力すると、その数まで表示し、項目数が指定した数を超える場合は「すべて表示」ボタンが表示されます。0 にすると、最初は項目を表示せず、「すべて表示」で開きます。
「すべて表示」ボタンのテキスト: 初期値は
show allです。
オンラインストアでは、目次の上に [hide] が出ます。初期表示行数を 3 にすると、最初の3項目と show all ボタンが出ます。
[hide] を選ぶと目次が閉じ、[show] だけになります。
ブロックごとにタイトルやボタン文言を変えたい場合は、「タイトル・ボタン文言を個別設定」を確認してください。
「開く」「閉じる」は文字色だけ変更できます。「すべて表示」は文字色、背景、枠線を変更できます。
目次の上下へHTMLやLiquidを足す場合は、「目次の上下にカスタムLiquidを設定」を確認してください。