無料で機会損失を削減しませんか? ▶
利用する見出しで選択した見出しの中で、記事中最上部に位置する見出しの上に目次を挿入します。
例えば、h2,h3を選択した場合、「Title > 文章 > h2 > 文章 > h3 > 文章 > h2 > 文章 」の構成の記事では、「Title > 文章 > 【目次】 > h2 > 文章 > h3 > 文章 > h2 > 文章 」の位置に目次が表示されます。
テーマエディタを利用し、目次を表示したいブロックにアプリを挿入することができます。
※ Online Store 2.0のテーマのみご利用できます
特定のclass名を持ったエレメント内の最上部に目次を挿入します。
※ 指定したClass名が複数ある場合、最初に出現するclass名を持った文章の上に目次を挿入します。
「目次のカスタマイズ」ページを開く
表示位置の 「最初の見出しの上」にチェックを付ける
「保存」をクリックする
表示位置で 「最初の見出しの上」にチェックを付けて保存
【目次アプリ側の設定】
「目次のカスタマイズ」ページを開く
表示位置の 「テーマエディタで指定(Online Store 2.0専用)」にチェックを付ける
「保存」をクリックする
【Shopifyテーマ側の設定】
Shopifyテーマのテーマエディタにアクセスする
画面左の「セクションを追加」または「ブロックを追加」をクリック
表示されたメニューより「目次」アプリを選択
目次を表示させたい場所に「目次」アプリをドラッグ・アンド・ドロップ
保存をクリックする
表示位置で 「テーマエディタで指定(Online Store 2.0専用)」にチェックを付けて保存
テーマエディタで目次の位置を指定
「目次のカスタマイズ」ページを開く
表示位置の 「class名を指定」にチェックを付ける
表示された入力フォームにclass名を入力
※ 入力するclass名には「.(ドット)」は不要です
「保存」をクリックする
表示位置で 「class名を指定」にチェックを付けて保存
設定例
例えば、ブログ記事のタイトル直下に目次を表示させたい場合は、タイトルの下にあるエレメントのclass名を設定してください。下記の添付画像の場合は「article--content」または「rte」を設定していください。
目次は設定したclass名を有している最初のエレメント配下に表示されます。