RuffRuff 目次作成でブログ記事テンプレートに目次を追加すると、各ブログ記事の本文の見出しから目次が表示されます。Free Plan、Light Plan、Regular Planのすべてで利用できます。
操作の前に、次を確認してください。
ホーム画面でアプリが有効になっています。無効のあいだは、オンラインストアに目次は表示されません。
ブログ記事の本文に、目次にする見出しがあります。初期値はH2とH3です。
公開中のブログ記事がない場合も、「アプリブロックを追加する」を選択できます。その場合、ホームの「ブログ記事」行に注意の文が表示されます。
Online Store 2.0対応テーマではアプリブロック、以前のテーマでは埋め込みアプリを追加します。追加していない場合、本文に見出しがあっても目次は表示されません。
使い分けは「アプリブロックと埋め込みアプリの違い」を確認してください。
(1) テーマを選ぶ
Shopify管理画面 → アプリから「RuffRuff 目次作成」を開いてください。ホーム画面の「テーマにアプリを追加する」で、「テーマを選択する」から対象テーマを選んでください。Online Store 2.0対応テーマでは、「このテーマは Online Store 2.0対応のテーマです」と表示されます。
(2) ブログ記事のテーマエディタを開く
「ブログ記事」の横にある「アプリブロックを追加する」を選択してください。ブログ記事テンプレートのテーマエディタが開きます。
テーマエディタでアプリブロック「目次」を追加し、保存します。
(3) 「目次」アプリブロックを追加する
「ブロックを追加」または「セクションを追加」から「目次」を追加し、右上の「保存」を選択してください。
任意: テーマエディタで指定した位置に表示する場合は、アプリの「目次のカスタマイズ」で「表示位置」を「テーマエディタで指定 (Online Store 2.0専用)」にして保存してください。その後、テーマエディタで「目次」を表示したい位置へ移動し、「保存」を選択してください。
ヒント: テーマエディタのプレビューでは、目次の上に青いメッセージが出ます。このメッセージはテーマエディタ上でのみ表示され、オンラインストアには出ません。
以前のテーマでは、埋め込みアプリを有効にします。
(3) 埋め込みアプリを有効にする
「ブログ記事 (以前のテーマ用)」をオンにして、「保存」を選択してください。
アプリブロックまたは埋め込みアプリを追加したテーマで、本文にH2またはH3の見出しがある公開中のブログ記事をオンラインストアで開いてください。目次が表示され、項目を選ぶと本文のその見出しへ移動すれば完了です。
表示位置が初期値の「最初の見出しの上」の場合、目次は最初の対象見出しの直前に表示されます。アプリのホームでは、対象行が「設定済」になっていることも確認してください。
対象の見出しが1つもない記事では、目次は表示されません。
目次は、ブログ記事の本文（リッチテキスト）の見出しから作ります。初期値はH2とH3です。
対象: 本文のリッチテキストで設定したH1〜H6のうち、「目次のカスタマイズ」の「利用する見出し」で選んだレベル
対象外: テーマのセクションで追加した見出し
利用する見出しのレベルを変える手順は「目次のカスタマイズの設定項目」を確認してください。