- このトピックには10件の返信、3人の参加者があり、最後に
により3年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.8.0
【お使いの Snow Monkey Blocks のバージョン】12.4.0
【お使いの Snow Monkey Editor のバージョン】 6.1.0
【お使いのブラウザ】Safari、Chrome
【当該サイトのURL】### 発生している問題
iPhoneでによるものと思いますが
アンカーリンクに設定している箇所が
ズレて表示されてしまいます。例えば https://〇〇/#contact のリンクが
#contactとアンカーリンクをつけている箇所より
上が表示されてしまいます。一旦正常位置で読み込みされた後上に戻る形です。
一番始めの読み込み時にそのような挙動が見られるというご意見があったりもしました。
PCでは問題ないようです。
サイト全体の一番下にあります。
URLをご提供したいのですが
公開できないので状況をお伝えさせていただきました。### 試したこと
いいねをした人: 居ませんすみません、他のアンカーリンクの位置でも
一番始めの読み込み時に位置がずれてしまうのが確認できました。スムーススクロールも設定していますが
そちらも機能されないようです。いいねをした人: 居ません度々すみません。
TikTokをいくつか直接埋め込みしているのですが、
それを辞めることでずれることはなくなりました。今回、直接埋め込みではなく
画像リンクに変更しようと思いますがTikTokは直接埋め込みですと
初期の読み込みが正常に働かないのは
やはり重くなってしまうからでしょうか…いいねをした人: 居ませんm-szkさん、こんにちは。
【Snow Monkey のバージョン】 15.8.0
【Snow Monkey Blocks のバージョン】 12.4.0
【Snow Monkey Editor のバージョン】 6.1.0上記の環境で、TikTokのリンクURLを投稿に貼って、アンカーをつけてみました。
赤いボタンでTikTokの投稿に移動させています。わたしのiPhone 11 Pro（iOS15）だと、m-szkさんがおっしゃる症状（アンカーリンクに設定している箇所がズレて表示されてしまいます）が出ておりませんが、一度ご覧いただけますか？
m-szkさんのサイトが見られるといいのですが、プラグインリストなどもご提示いただいたほうが良いかもしれません。いいねをした人:GONSY 様
ご検証いただきありがとうございます。
GONSY さんのテストサイトで確認させていただいたところ、
確かにアンカーリンクがずれる症状はありませんね…テストサイトそうですよね…
ご確認いただいてもいいでしょうか。↑こちらのように、iPhoneからアンカーリンクに直接アクセスするとずれてしまいます。
再読み込みのあと正常に動きます。使用しているプラグインは画像の通りです。
「Autoptimize」は無効化して一度確認してみましたが変化無しでした…
いいねをした人: 居ませんご提示ありがとうございます。
未検証ですが、該当のアンカーの前にある要素にWordPress 5.5から自動で挿入されるようになったloading="lazy"のついたimgやiframeが多数あるのが原因ではないでしょうか？
スマホの場合、お使いの要素が１列で表現されているので、これらの要素が読み込まれる前に#contactに到達してしまい、そのあとに読み込まれることで大きなズレが生じているように思います。
※このあたりに詳しい方がいましたら、フォローをお願いします m(_ _)m遅延読み込み（
loading="lazy"）は、以下で無効化できますので、いったんmy-snow-monkey.phpに追加して試してみてください。add_filter( 'wp_lazy_loading_enabled', '__return_false' );また余談ですが、画像が
http://になっている箇所が多数あり、混合コンテンツ（Mixed Content）になっていますので、置換することをおすすめします。いいねをした人:ありがとうございます。
遅延読み込み（loading=”lazy”）は、以下で無効化できますので、いったんmy-snow-monkey.phpに追加して試してみてください。
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
こちら入れてみました。
私のiPhone(XR)ですと変化ないようです…
いかがでしょうか。確かに動きがGONSYさんの推測に当てはまるように思います。
また余談ですが、画像がhttp://になっている箇所が多数あり、混合コンテンツ（Mixed Content）になっていますので、置換することをおすすめします。
すみせんありがとうございます。
修正してみました。いいねをした人: 居ませんキタジマ 様
ありがとうございます。
アップデートしてみたのですが、
うまくいくときといかないときとまばらみたいです…TikTok直接埋め込みですと
読み込み自体時間がかかってしまうので
画像リンクにしようと思います。お手数おかけしてすみません…
トピック閉じさせていただきます。
いいねをした人:
埋め込みの直後に
<script async="" src="https://www.tiktok.com/embed.js"></script>がありますが、これが
asyncだからだったりするんですかねー。oEmbed で勝手に出力されているものならasyncからどうやって変更するのかわかりませんが…。他のテーマに変えてみてもずれちゃうのであればテーマの問題というよりは HTML の問題だと思うのでちょっと対処が難しいかもですね。画像リンクにしようと思います。
ページ内リンクが必須であればそれが良いかもですね。
いいねをした人:
- トピック「アンカーリンク位置と表示される箇所がずれてしまう」には新しい返信をつけることはできません。