アンカーリンク位置と表示される箇所がずれてしまう

0
いいねをした人: 居ません
  • このトピックには10件の返信、3人の参加者があり、最後にm-szkにより2年、 8ヶ月前に更新されました。
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • 投稿者
    投稿
  • #87420
    m-szk
    閲覧者
    24

    【お使いの 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をご提供したいのですが
    公開できないので状況をお伝えさせていただきました。

    ### 試したこと

    0
    いいねをした人: 居ません
    #87421
    m-szk
    閲覧者
    24

    すみません、他のアンカーリンクの位置でも
    一番始めの読み込み時に位置がずれてしまうのが確認できました。

    スムーススクロールも設定していますが
    そちらも機能されないようです。

    0
    いいねをした人: 居ません
    #87647
    m-szk
    閲覧者
    24

    度々すみません。

    TikTokをいくつか直接埋め込みしているのですが、
    それを辞めることでずれることはなくなりました。

    今回、直接埋め込みではなく
    画像リンクに変更しようと思いますが

    TikTokは直接埋め込みですと
    初期の読み込みが正常に働かないのは
    やはり重くなってしまうからでしょうか…

    0
    いいねをした人: 居ません
    #87652
    GONSY
    参加者
    808

    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さんのサイトが見られるといいのですが、プラグインリストなどもご提示いただいたほうが良いかもしれません。

    1
    いいねをした人:
    #87672
    m-szk
    閲覧者
    24

    GONSY  様

    ご検証いただきありがとうございます。

    GONSY さんのテストサイトで確認させていただいたところ、
    確かにアンカーリンクがずれる症状はありませんね…

     

    テストサイトそうですよね…
    ご確認いただいてもいいでしょうか。

    ↑こちらのように、iPhoneからアンカーリンクに直接アクセスするとずれてしまいます。
    再読み込みのあと正常に動きます。

     

    使用しているプラグインは画像の通りです。

    「Autoptimize」は無効化して一度確認してみましたが変化無しでした…

    0
    いいねをした人: 居ません
    #87676
    GONSY
    参加者
    808

    ご提示ありがとうございます。
    未検証ですが、該当のアンカーの前にある要素にWordPress 5.5から自動で挿入されるようになったloading="lazy"のついたimgiframeが多数あるのが原因ではないでしょうか?
    スマホの場合、お使いの要素が1列で表現されているので、これらの要素が読み込まれる前に#contactに到達してしまい、そのあとに読み込まれることで大きなズレが生じているように思います。
    ※このあたりに詳しい方がいましたら、フォローをお願いします m(_ _)m

    遅延読み込み(loading="lazy")は、以下で無効化できますので、いったんmy-snow-monkey.phpに追加して試してみてください。

    add_filter( 'wp_lazy_loading_enabled', '__return_false' );

    また余談ですが、画像がhttp://になっている箇所が多数あり、混合コンテンツ(Mixed Content)になっていますので、置換することをおすすめします。

    1
    いいねをした人:
    #87712
    m-szk
    閲覧者
    24

    ありがとうございます。

     

    遅延読み込み(loading=”lazy”)は、以下で無効化できますので、いったんmy-snow-monkey.phpに追加して試してみてください。

    add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );

    こちら入れてみました。
    私のiPhone(XR)ですと変化ないようです…
    いかがでしょうか。

    確かに動きがGONSYさんの推測に当てはまるように思います。

    また余談ですが、画像がhttp://になっている箇所が多数あり、混合コンテンツ(Mixed Content)になっていますので、置換することをおすすめします。

    すみせんありがとうございます。
    修正してみました。

    0
    いいねをした人: 居ません
    #87867
    アバター画像キタジマ タカシ
    参加者
    2270

    m-szk さんのサイトでずれる原因はわからないのですが、v15.8.1 でアンカーリンク関連の修正を入れたので、一応アップデートして確認してみていただけたらと思います。

    1
    いいねをした人:
    #87878
    m-szk
    閲覧者
    24

    キタジマ 様

    ありがとうございます。

    アップデートしてみたのですが、
    うまくいくときといかないときとまばらみたいです…

    TikTok直接埋め込みですと
    読み込み自体時間がかかってしまうので
    画像リンクにしようと思います。

    お手数おかけしてすみません…

    トピック閉じさせていただきます。

    1
    いいねをした人:
    #87882
    アバター画像キタジマ タカシ
    参加者
    2270

    埋め込みの直後に

    <script async="" src="https://www.tiktok.com/embed.js"></script>
    

    がありますが、これが async だからだったりするんですかねー。oEmbed で勝手に出力されているものなら async からどうやって変更するのかわかりませんが…。他のテーマに変えてみてもずれちゃうのであればテーマの問題というよりは HTML の問題だと思うのでちょっと対処が難しいかもですね。

    画像リンクにしようと思います。

    ページ内リンクが必須であればそれが良いかもですね。

    1
    いいねをした人:
    #87884
    m-szk
    閲覧者
    24

    キタジマ 様

    ご丁寧にありがとうございます。
    他のテーマでもズレるようでした。
    確認不足ですみません。

    画像リンクにします!

    0
    いいねをした人: 居ません
11件の投稿を表示中 - 1 - 11件目 (全11件中)
  • トピック「アンカーリンク位置と表示される箇所がずれてしまう」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。