RuffRuff 目次作成の「目次のカスタマイズ」で、「表示位置」を「class名を指定」にすると、指定したclass名の要素の先頭に目次を表示できます。同じclass名が複数ある場合は、最初の要素だけが対象です。要素の途中や、特定の子要素の直後には表示できません。
Online Store 2.0対応テーマでは「目次」アプリブロックを、以前のテーマでは埋め込みアプリを追加してください。追加方法は「初期セットアップ」と「アプリブロックと埋め込みアプリの違い」を確認してください。
(1) 表示したい位置のclass名を確認する
目次を出したい要素のclass名を確認してください。先頭のドット(.)は入力しません。たとえば article-template__content、article--content、rte のように入力します。
(2) 表示位置を変更する
アプリ内メニューの「目次のカスタマイズ」を開き、「表示位置」で「class名を指定」を選択してください。class名の入力欄が出ます。
(3) class名を入力して保存する
入力欄にclass名を入れ、「保存」を選択してください。
保存後、設定したテーマで、目次の対象となる見出しを含むページをオンラインストアで開いてください。指定したclass名の要素の先頭に目次が表示され、項目を選ぶと対応する見出しへ移動すれば完了です。
注意: 指定したclass名の要素が見つからない場合も、その指定だけで目次が非表示になることはありません。目次の表示条件を満たしていれば、アプリブロックまたは埋め込みアプリの位置に表示されたままです。
ほかの表示位置の選び方は「目次のカスタマイズの設定項目」を確認してください。