スマホとタブレットどちらか一方のヘッダーデザインが崩れる



  • ご返信ありがとうございます。

    一度サーバー側に問い合わせしようと思います。

    ・local環境では正常に表示される
    ・プラグインを削除して検証したが、症状が改善されなかった

    この2点からサーバーに問題がある可能性が考えられるため、サーバー側に今回の検証結果も伝えて、症状を改善できないか相談してみようと思います。

    今後、JINの方々に結果を報告したり、引き続きご相談させていただいたりする際は、こちらのトピックでご相談させていただいてもよろしいでしょうか?
    別の方に1から説明するのは大変なので、こちらのトピックでご相談させていただけると助かります。

    サーバー側に問い合わせた結果の報告は、少しお時間いただければ幸いです。
    今回は、色々とご丁寧に対応いただきまして、ありがとうございました。



  • @忍者 さん

    今後の動きについて、承知いたしました!

    こちらこそ長い期間にわたり検証していただき、ありがとうございます。
    また、直接的な解決にならず申し訳ございませんでした。

    今後、JINの方々に結果を報告したり、引き続きご相談させていただいたりする際は、こちらのトピックでご相談させていただいてもよろしいでしょうか?
    別の方に1から説明するのは大変なので、こちらのトピックでご相談させていただけると助かります。
    サーバー側に問い合わせた結果の報告は、少しお時間いただければ幸いです。
    今回は、色々とご丁寧に対応いただきまして、ありがとうございました。

    こちらのトピックで差し支えありません。
    ※ もし、こちらのトピックに追加投稿後、数日経っても連絡が無い場合は、
     大変恐れ入りますが、新規トピックを立てていただきますようお願いいたします。

    引き続きよろしくお願い申し上げます。
    (ご確認いただければ、ご返信は無用ですので。)



  • お世話になります。

    サーバーにはまだ問い合わせをしていない状況なのですが、気づいた点がありましたので、ご連絡させていただきました。

    ①スマホ→タブレットの順番でサイトを閲覧したときに、タブレットのロゴ画像が通常よりも大きく表示されてしまう症状が出る。(多分、解決しました。)
    ②タブレット→スマホの順番でサイトを閲覧したとき、スマホのスライドメニューが表示されない。(未解決。気づいたことがある)

    ①の症状は、カスタマイズ→ヘッダー設定→【スマホ用】ヘッダーロゴとヘッダーフレーズの文字サイズ調整、がデフォルトの60ではなく120に設定していました。
    →デフォルトの60に戻したところ、スマホ→タブレットの順番でサイトを閲覧しても、正常に表示されるようになりました。
    恐らく、デフォルトの60だとスマホでのロゴ表示が自分のイメージよりも小さかったため、倍の数値に設定していたんだと思います。
    お手数おかけして、誠に申し訳ありませんでした。

    ②の症状に関しても、気づいたことがあります。
    カスタマイズ画面で、左下の方に、パソコン、タブレット、スマホでのプレビューを確認できる3つの切り替えボタンがあります。

    0_1639381573028_2021-12-13 (1).png

    ここをクリックしてプレビューを確認したところ、一番左のボタンのプレビューではグローバルメニューが表示されますが、真ん中と右端のプレビュー画面上では、スマホスライドメニューやフッターメニューが表示されません。
    0_1639383007901_2021-12-13 (2).png

    このプレビューを確認したところ、スマホで症状が出るときには、このプレビュー画面の通りに反映されていることに気づきました。

    つまり、このスマホプレビュー画面上に、スマホスライドメニューが正しく表示されるように設定するには、どのように設定すれば良いですか。

    また、JINを使用した問題のない他のサイトのスマホのプレビュー画面では、スマホスライドメニューはきちんと表示されているか確認して教えていただけませんでしょうか。

    ※プレビュー画面では、スマホのスライドメニューが正しく表示されないこと以外にも、固定フッターメニューが表示されない、プロフィールのウィジェットのデザインが崩れて表示されるなどの症状が出ます。可能であれば、正しく表示されるように設定したいです。
    1_1639383354631_2021-12-13 (4).png 0_1639383354630_2021-12-13 (3).png

    お忙しいところ恐縮ですが、何卒宜しくお願い申し上げます。



  • @忍者 さん

    お世話になっております!

    ①について

    こちらでもロゴサイズ調整などは検証しておりましたが、
    症状を再現できていない状態でのテストだったのもあり、解決策ではないと判断していました。
    (この検証に関してお伝えしていなくて申し訳ありませんでした。。)

    解決されたのなら良かったです!!

    ================================================
    ②について

    カスタマイザーのプレビューについてですが、この機能は画面幅で再現してくれてるものなので、
    デバイスで判定させてる部分に関しては、実際の表示を再現するのは難しいですね。

    ですので、私が所有しているサイトでも、このプレビュー機能ではスマホ側の実際の表示は再現できません。
    (ハンバーガーメニューやスライドメニューなど)


    実機で正しく表示されている事が大切ですので、
    現状のJINの仕様では、忍者さんがカスタマイザー上で再現したい挙動は難しいかなと思います。

    どうしてもカスタマイズ画面でデバイスの判定をさせたい場合は、
    そういったプラグインもあるようなので、使ってみても良いかもしれないです。。
    (私が見かけたプラグインは4年前に開発が止まっていたので、
     そのようなプラグインを導入の際は、注意して確認をお願いいたします。)


    ご質問に答えられているか心配ですが、参考になりましたら幸いです。
    よろしくお願いいたします。



  • お世話になります。
    ご返信ありがとうございます。


    ②について

    カスタマイザーのプレビューについてですが、この機能は画面幅で再現してくれてるものなので、
    デバイスで判定させてる部分に関しては、実際の表示を再現するのは難しいですね。

    ですので、私が所有しているサイトでも、このプレビュー機能ではスマホ側の実際の表示は再現できません。
    (ハンバーガーメニューやスライドメニューなど)

    実機で正しく表示されている事が大切ですので、
    現状のJINの仕様では、忍者さんがカスタマイザー上で再現したい挙動は難しいかなと思います。

    どうしてもカスタマイズ画面でデバイスの判定をさせたい場合は、
    そういったプラグインもあるようなので、使ってみても良いかもしれないです。。
    (私が見かけたプラグインは4年前に開発が止まっていたので、
     そのようなプラグインを導入の際は、注意して確認をお願いいたします。)

    →承知致しました。参考にさせていただきます!

    また、進展ありましたら、こちらのトピックでご相談させていただきます。
    ありがとうございました。

    ※ご返信は不要です。