RuffRuff 目次作成 ヘルプセンター

thumbnail

目次を選んだあとに見出し位置がずれる

固定ヘッダーの余白調整と、項目を選んでも移動しない場合の確認

目次の項目を選んだあと、見出しが固定ヘッダーの下に隠れる場合は、「目次のカスタマイズ」の「スクロール時の上部余白」にヘッダーの高さ(px)を入れてください。項目を選んでも移動しない場合は、目次の項目と本文の見出しテキストが一致しているか確認してください。

  • 固定ヘッダー: オンラインストアのヘッダーがスクロール後も画面上部に残るか確認してください。見出しがその下に隠れる場合は、「スクロール時の上部余白」を調整してください。

  • スクロール時の上部余白: 「目次のカスタマイズ」の値が 0 のままになっていないか確認してください。初期値は 0 です。

  • スクロール時のアニメーション: 「スクロール時のアニメーションをつける」がオンか確認してください。オフのときは、上部余白は使われません。

  • 見出しテキスト: 目次の項目と、本文の見出しテキストが同じか確認してください。

  • 画像の読み込み: 見出しより上の画像が遅延読み込み(Lazy Load)になっていないか確認してください。

原因: 見出しへ移動したとき、画面上端からの余白が少ないと、固定ヘッダーの下に見出しが隠れます。「スクロール時の上部余白」に正の値を入れると、見出しの停止位置が下にずれます。

対処: 固定ヘッダーの高さ(px)を「スクロール時の上部余白」に入れて保存してください。

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

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

(2) 余白を入力して保存する

「スクロール時のアニメーションをつける」がオンであることを確認し、「スクロール時の上部余白」にヘッダーの高さ(px)を入力して、「保存」を選択してください。例: ヘッダーが80pxなら 80 です。上部余白は、アニメーションがオンのときだけ使われます。

保存したあと、オンラインストアで対象ページの目次を選び、見出しが固定ヘッダーの下に隠れずに表示されることを確認してください。余白が大きすぎる場合は、値を小さくして再度保存してください。

設定項目の一覧は目次のカスタマイズの設定項目を確認してください。

原因: 目次の項目と、本文の見出しテキストが一致しないと、移動用のIDが付きません。見出しに特殊な空白がある場合に起きることがあります。「見出しIDの生成」が「連番ID」でも、この一致は必要です。

対処: 見出しを一度消して打ち直してください。打ち直した公開ページで目次の項目を選び、その見出しへ移動することを確認してください。

原因: 画像の遅延読み込み(Lazy Load)が原因のずれには、アプリ側で対応できません。

注意: 画像の遅延読み込みによるずれは、本アプリの「スクロール時の上部余白」では直せません。

対処: 遅延読み込みをやめるか、ずれを許容してください。

原因: テーマ独自のスクロール処理が原因の場合があります。アプリ側の余白設定だけでは直せないことがあります。

対処: お問い合わせフォームからお問い合わせください。調査のため、ストアへのアクセス権限をお願いすることがあります。

上記を確認しても解決しない場合は、お問い合わせフォームからお問い合わせください。

お問い合わせ時は、次の情報をお知らせください。

  • 対象ストアのmyshopify.comドメイン

  • 対象ページのURL

  • 使用しているテーマ名

  • 確認済みの項目