WordPressテーマSANGOの質問

Easy Table of Contentsの目次ジャンプ先のずれを解消したい(スマホ表示のみ)

アバター
tei

初めまして。よくある質問やWEBで検索しましたが、解決方法が見つからずこちらで質問さして頂いております。

現在の設定は以下のようにしています。
■高速化(SANGO)
投稿/固定ページ内の画像を遅延読み込みをON

■Easy Table of Contents
スクロールを滑らかにするをOFF

PC表示は以下の方法で目次の位置を調節できましたが、スマホ表示の場合のみCSSが効かないようです。

/*目次ズレ調節*/
.ez-toc-section {
margin-top: -12px;
padding-top: 12px;
}

Google Chrome Developer Toolsを使ってスマホ確認するとCSSが効いていますが、実機では反映されません。
※キャッシュ削除後に確認しました。

なにか解決策はありますでしょうか?
お忙しいところ申し訳ありませんが回答お待ちしております。

SANGO
SANGO 質問ガイドライン
コメントへの回答
サルワカくん
サルワカくん
2020/07/02

お世話になっております。
拝見しましたが、改行のある見出しがズレているように見えます。

「スクロールを滑らかにするをOFF」になっている場合(かつ他にスクロールを制御するJavaScriptが存在しない場合 ※ページを見る限り存在しなさそうです)、ページ内リンクの挙動はブラウザに委ねられることになります。そのため、ずれが生じる直接的な問題の原因はちょっとわからないですね・・・。

ただ、scroll-padding-topというCSSプロパティを使えば、ネガティブマージンなどのテクニックを使わなくてもスクロール位置の調整ができます。具体的には以下のCSSをダッシュボードの[外観]⇒[カスタマイズ]⇒[追加CSS] もしくは子テーマのstyle.cssに貼り付けます。

html {
  scroll-padding-top: 50px; /* スクロール位置の調整 */
}

よろしくお願いします。

アバター
tei
2020/07/03

ご回答ありがとうございます!
スクロールのズレですが、やはりサルワカさんがおっしゃる通りブラウザによって違うようでした。
それとスマホはOSの違いが大きく影響していました。

■複数のスマホ端末で検証した結果
・AndroidでChrome ズレなし
・iPhoneでChrome ズレあり
・iPhoneでSafari ズレあり
同じような現象の方がいるかもしれませんので検証しました^^

解消はされませんでしたが理由がわかってスッキリしました。
それと新しいプロパティありがとうございます!
今後ともよろしくお願いします。

サルワカくん
サルワカくん
2020/07/03

いえいえ!
ご報告ありがとうございました。