[ 解決済 ] スワイプした時のヘッダーが少し下にずれるのを直したい

VWSとは フォーラム X-T9 [ 解決済 ] スワイプした時のヘッダーが少し下にずれるのを直したい

[ 解決済 ] スワイプした時のヘッダーが少し下にずれるのを直したい

  • このトピックには11件の返信、2人の参加者があり、最後にSUGIにより2日、 8時間前に更新されました。
12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • 投稿者
    投稿
  • #121316

    SUGI
    参加者

    ■ WordPress のバージョン
    6.9.4

    ■ テーマ・プラグインは全て最新版で確認してください。
    確認しました。

    ■ テーマの種類
    X-T9

    ■ テーマのバージョン
    1.37.4

    ■ 期待する動作
    スマホで一番上にまでスワイプした時に、ヘッダーが少し画面下に引き込まれるような動作がされるので、その動作をなくし、ヘッダーは上部に固定されるような状態にしたいです。
    どのような意味か分かりずらいと思いますが、結果から言えば、国の機関である海上保安庁のサイト https://www.kaiho.mlit.go.jp/ などでは一番上にまでスワイプしても、ヘッダーが動かず固定されたままです。このようなヘッダーの固定を自分が望んでいることです。

    ■ 自分で試した事
    本サイトのフォーラムから該当するようなヘッダーを固定するようなCSSを追加してみましたが、結果は変わりませんでした。

    ■ 症状が発生するブラウザ
    (iphoneの)Safari

    ■ 実際の症状
    WordPressテーマによってヘッダーが少し下にずれることはないと思いますので、そもそもの仕様なのか、サイト作成時での何かしらの設定もしくはCSSなのか解決策が見つかりません。

    #121318

    Y.INABA
    参加者

    SUGI 様

    1点確認です。
    以下のトピックは既にご確認・お試しいただいておりますでしょうか?

    [ 解決済 ] ヘッダーとグローバルメニューの固定について

    —————————

    もしVK Blocks Proがご利用できる環境であれば、たとえばヘッダー箇所を以下のパターンライブラリに差し替え、中身を編集いただくことによっても解決可能かと思います。

    ヘッダー_お問い合わせ_スクロール時に追従

    既にヘッダーを作成済ということでしたら、「固定表示」ブロックをご利用いただくこともご検討ください(上記パターンも「固定表示」ブロックを使っています)。

    固定表示(Pro版のみ)

    —————————

    WordPressテーマによってヘッダーが少し下にずれることはないと思いますので、そもそもの仕様なのか、サイト作成時での何かしらの設定もしくはCSSなのか解決策が見つかりません。

    ご認識のとおり、X-T9側のデフォルトの設計がそうなっています。
    最上部でのみ表示されるヘッダー箇所と引き込む動作のあるヘッダー箇所とはブロックが別々になっています。

    そのため、パターンライブラリ等でヘッダーを差し替える際には、あらかじめ引き込み動作のあるヘッダーの方を消していただき、画面上部に固定するヘッダーのみを作成いただく必要がございます。

    Attachments:
    You must be logged in to view attached files.
    #121525

    SUGI
    参加者

    Y.INABA 様

    ご回答ありがとうございます。

    確認事項の [解決済] ヘッダーとグローバルメニューの固定については、CSSを追加することは試してみましたが、変化はありませんでした。

    パターンライブラリから「ヘッダー_お問い合わせ_スクロール時に追従」については、WordPressをアンインストール後、X-T9テーマをインストールしてから上記パターンを貼り付けたのですが、こちらも思っていたとおりの結果はでませんでした。

    固定表示については、元々フルサイトインストーラーから、X-T9 ビジネス版を加工していたのですが、そのヘッダー部分を固定表示にしてみたのですが、こちらも変化ありませんでした。

    私自身も情報を集めてみますが、他のご教授もございましたら宜しくお願い申し上げます。

    #121528

    Y.INABA
    参加者

    SUGI 様

    確認事項の [解決済] ヘッダーとグローバルメニューの固定については、CSSを追加することは試してみましたが、変化はありませんでした。

    CSSの追加だけでなく、以下もお試しいただいていますか?

    2. 外観 > エディタ > パターンの下の方のテンプレートパーツ > ヘッダー で ヘッダーの編集画面に移動し、2段になっているヘッダーの下の段(スクロールしたら落ちてくる部分)を削除

    3. 外観 > エディタ > テンプレート からヘッダーのある全てのテンプレートで、ヘッダーテンプレートパーツをグループブロックでラップする > ラップしたグループブロックに貼り付け指定

    3番までやらないと、この手法は意味がありません。
    添付スクショもご確認いただけますと幸いです(日本語だと「位置」>「張り付き」の箇所になります)。

    Attachments:
    You must be logged in to view attached files.
    #121562

    Y.INABA
    参加者

    パターンライブラリから「ヘッダー_お問い合わせ_スクロール時に追従」については、WordPressをアンインストール後、X-T9テーマをインストールしてから上記パターンを貼り付けたのですが、こちらも思っていたとおりの結果はでませんでした。

    こちら私の方でも動作確認しましたが、添付のとおりの配置にしたところ(スライダーを消してメニューの内容を入れ替えただけですが)、おそらくSUGI様の意図通りになりそうな挙動の確認できました。
    (ログイン時だとヘッダーが下にずれているように見えますが、ログアウト時は正常に動作します)

    ※必要に応じて、レスポンシブスペーサーを挿入いただいて調整いただけますと幸いです(スクリーンショット2枚目)。

    こちらでうまく動かないようだと、いよいよ実際に動作しないページを直に確認するしかないと思います。

    ◆補足
    実際の海上保安庁様のサイトでは、PCからだとヘッダーが固定されませんので、そちらもご希望であればPC用ヘッダーのみ「固定表示」ブロックの外に出していただいた上で、「固定表示」ブロックの非表示設定も調整いただければ問題ありません。

    Attachments:
    You must be logged in to view attached files.
    #121604

    SUGI
    参加者

    Y.INABA 様

    またまた、ありがとうございます。

    返信#121528では、私が全文を読まず、CSS追加だけで済むと思った勘違いです、お手間を取らせて申し訳ありませんでした。ただ、2と3を追加しても結果は変わらずでした。

    返信#121562で、Y.INABA様が「ヘッダー_お問い合わせ_スクロール時に追従」で私の意図通りになりそうな挙動の確認が出来てらっしゃることが不思議です。ひょっとしたら、私の iphone でそのような現象なのでしょうか?テストとして使っているページをお教え致します。WordPressアンインストール後なので中身のないサイトなのですが、一応、ウイルスチェックをしてご覧いただければ幸いです。

    #121606

    Y.INABA
    参加者

    SUGI 様

    お忙しい中ご提示いただきありがとうございます。
    変更いただいているのはトップページのみでよろしいでしょうか?

    私のiPhone実機で確認しましたが、特に問題は無いように思います。
    ご参考までに、ページ途中で止めた状態のスクリーンショットも添付させていただきます。

    iPhone Safari以外、たとえばChrome等で問題なく動作するかご確認いただけますでしょうか?
    また、もし広告ブロッカー等の拡張機能を入れておりましたら、いったん全てOFFにしてみてはいかがでしょうか?

    Attachments:
    You must be logged in to view attached files.
    #121610

    SUGI
    参加者

    Y.INABA 様

    私のテストページをご覧いただき、本当にありがとうございます。
    Y.INABA 様の iPhoneのSafariではヘッダーがぶれていなかったのですね。

    そうすると私のSafariに問題があるか、それにしても海上保安庁のホームページのヘッダーは全くぶれずにヘッダー固定されているのを見ると、自分のサイトに問題があるとも思いますし、ますます不明に陥ります。

    Y.INABA 様からの確認の件ですが、Safariに広告をブロックする類の拡張機能は入っていませんでした。また、Chromeでは(一番上にURLが表示される為、少しぶれますが)ヘッダーは固定されていました。

    #121611

    Y.INABA
    参加者

    SUGI 様

    ご確認ありがとうございます。
    念のため私の手元のAndroidでもアクセスしてみましたが、ブレも含めて該当の事象の確認をすることはできませんでした。

    ご共有いただいている状況からしても、もはやWordPressやプラグイン、テーマ側の問題とは考えにくく、通信環境か閲覧環境のどこかに問題があってトラブルが生じているものと考えられますが………。

    ①回線や環境を変更することがもし可能であれば、全く別の回線や端末からアクセスいただくことは可能でしょうか?
    回線内でフィルター等がかかったり低速だったりでデザインが崩れるということは割とよくある話ではあります。

    ②念のため確認ですが、iPhone・iOSのバージョンは最新版をご利用でしょうか?
    iOSのバージョンが古いと、Chrome等も含め最新版が使えないため、正常に表示されない等のことは十分あり得る話だと思います。
    (なお、私のiPhoneは最新版iOS 26.4.2にて確認しています)

    ③こちらも念のための確認になりますが、ログアウト時、かつPCでウインドウの幅を狭めた状態で、正常に動作するかご確認いただくことは可能でしょうか?

    (余談ですが、海上保安庁様のサイトでブレやデザイン崩れ等が起こっていないのは、どんなに制限のある環境であっても目立った崩れが起きないように対策されているためであり、私のような一般ユーザー・小規模企業等が利用するのとは比べものにならないほどの工数がかかっているものと思います。もちろん有償案件になります)

    #121612

    SUGI
    参加者

    Y.INABA 様

    ご親切にどうもありがとうございます。

    一つ目の確認についてですが、こちらに別回線はないので、Wifiから4Gに切り替えてiphoneとipadで確かめたのですが、今までと変わらず、私のサイトはヘッダーが少し下に動き、海上保安庁のサイトは固定されていました。

    二つ目の確認についてですが、iphoneとipadともにiOS26.4.2で最新バージョンでした。

    三つ目の確認についてですが、WordPressをログアウトしてからMicrosoft EdgeとGoogle Chromeの両方で確かめたのですが、画面を狭めた状態でマウスを上下に早めにスクロールした場合、私のサイトも海上保安庁のサイトはヘッダーは固定されたままでした。

    四つ目についてですが、iphoneの画面をスクリーンショットした画像です。先でご覧いただいたパターンライブラリからの「ヘッダー_お問い合わせ_スクロール時に追従」の画面です。これは親指を上から下へスワイプし、ヘッダーに行き着いたところの箇所になりますが、そのヘッダーが画面の1/3ぐらいまで下がった状態で撮ったものです。

    他に気になる事があれば、何なりとおっしゃってください。

    Attachments:
    You must be logged in to view attached files.
    #121614

    Y.INABA
    参加者

    SUGI 様

    スクリーンショットも含めてありがとうございます。
    何が問題になっている(と感じていらっしゃるか)がようやく分かりました。
    私は引きつけるのを下方向にばかり考えていたのですが、上方向に引きつけることができるのを問題とされていたのですね。
    (通常、上の方向に引きつけて更新できる機能は当たり前のように使っており、SUGI様のような考え方には至りませんでしたので……)

    結論、想定通りの動作で何ら問題ありません。iOSの仕様です。
    というか、ほとんどのページで、ご共有いただいているスクリーンショットのような動作をすると思います。
    試しにYahoo!やGoogle、もしくは当フォーラムで確かめてみてください。同じような画面になりませんか?

    むしろ、海上保安庁様のサイトでは、ページを上に動かして更新できないよう、意図的にJavaScriptか何かで制御しているのだと思います。
    つまり、厳密には当フォーラムでは該当トピックが存在しない内容になります。

    これを実現しようと思うと、JavaScriptやCSSで追加コードを書く必要があり、検証も丁寧に行う必要があるため、当フォーラムでサポートできる範疇を明らかに超えると思います。
    他の有志が書いてくださるという方はいらっしゃるかもしれませんが、万全を期していただくには、やはり有償でご依頼いただくのが無難かな、と思います。

    #121615

    SUGI
    参加者

    Y.INABA 様

    遅くまでありがとうございました。
    国の機関のサイトなので、外部委託だと思いますし、いろいろ駆使され作成されたものなのでしょう。

    これで諦めがつきました、気分も晴れました、本当にありがとうございました。

12件の投稿を表示中 - 1 - 12件目 (全12件中)
  • このトピックに返信するにはログインが必要です。