VWSとは フォーラム Lightning [ 解決済 ] iPad表示でグローバルメニューの高さ調整

[ 解決済 ] iPad表示でグローバルメニューの高さ調整

タグ: 

  • このトピックには12件の返信、3人の参加者があり、最後にmomoにより1ヶ月前に更新されました。
13件の投稿を表示中 - 1 - 13件目 (全13件中)
  • 投稿者
    投稿
  • #45687

    momo
    参加者

    添付写真はiPad Pro10.5インチで表示した状態です。
    楕円のラインで囲んだグローバルメニューですが、
    メニューの高さに対して、フォントがが小さいのか?
    単に高さがあり過ぎるのか?
    バランスが悪い表示になっているのですが、iPadの表示を調整可能でしょうか?
    他の端末では気になった事がないので、iPadの場合だけ調整可能ならばと思います。

    環境は
    Lightning Pro バージョン: 8.3.1
    Pale2

    • このトピックはmomoが1ヶ月、 1週前に変更しました。
    Attachments:
    You must be logged in to view attached files.

    該当URL : https://*********

    ※該当URLはフォーラムライセンスが有効のユーザーにのみ表示されます

    #45708

    対馬俊彦
    参加者

    以下のスタイルを追加すれば、Pale スキンのこの部分の余白を狭めることができます。

    @media (min-width: 992px) {
    
    .device-mobile .gMenu>li {
    padding-bottom: 0;
    }
    .device-mobile .gMenu>li>ul.sub-menu {
    margin-top: 0;
    }
    
    }

    お試しください。

    #45709

    momo
    参加者

    対馬様

    早速、子テーマのCSSに追加してみました。
    私の環境MacのSafariで見るとリロードする都度「ポヨーン」と高さ余白に動きのあるメニューになってしまうようでした。
    一時的に動画を以下リンクで共有します。

    Vektorさんがテーマとして検討課題にして頂けると嬉しいのですが、それが難しい場合はカスタマイズになるのでしょうから、とりあえず、本件は断念しようと思います。

    せっかく情報を頂いたのですが、こうして実際にチャレンジして見ると、環境にも依存する難しい事なのかな?
    と感じ始めたので、将来のWordPressバージョンアップなどで何かトラブルがあっても私では自力で対応もできないですし。
    先日のWordPress5.6で別サイトで利用中のcocoonでトラブって、そちらは私のカスタマイズ問題ではなかったのですが、怖いなあと実感したところでした。

    対馬様、今日は2件連続のアドバイスをありがとうございました。

    https://www.icloud.com/iclouddrive/0_VFJTCYOzTFiQtwRDKx0ubJA#RPReplay_Final1607743310

    #45710

    momo
    参加者

    動画のリンクが普通に使えるのか?
    自分で見ると妙な感じでした。
    もし、使い物にならない共有リンクだったら?
    と思うので、とりあえず言葉で補足です。

    対策後はSafariの画面ではグローバルメニューの下の余白が小さくなった気がします。iPad画面にて。
    しかし、読み込んだ瞬間は元の大きな余白で、1秒くらいで小さい余白になるようです。
    読み込みの都度、そのアニメーション動作があるので気になる状態でした。

    そのような動画をリンクしたのですが、このリンクはもしかしたらiCloudのユーザーにしか使えないリンクだったのかもしれません。

    #45714

    対馬俊彦
    参加者

    リンク先の動画をダウンロードして確認(再生)できました。
    iCloud のユーザーでなくても、[複製をダウンロード] でダウンロードできました。

    この動画のような動きだと困りますね。

    私が Pale スキンで制作中のサイトがあり、そのサイトに上記のスタイルを適用しています。

    そのサイトを iPad の Safari で表示してもポヨーン現象は起きません。

    なにかが違うんでしょうね。

    #45715

    対馬俊彦
    参加者

    momo 様、

    共有していただいた動画を見て気になったことがあります。

    添付画像をあわせてご覧ください。

    [1] のメニューボタンと [2] のナビゲーションメニューが
    画面に同時に表示されることは通常はないと思います。

    画面幅が 991ピクセル以下のときは [1] のメニューボタンだけが表示されて、
    画面幅が 992ピクセル以上のときは [2] のナビゲーションメニューだけが表示される、
    というのが Lightning の動作のはずです。

    このことがなにかのヒントになれば幸いです。

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

    momo
    参加者

    対馬様の情報が決め手になりました。
    実は、恥ずかしい結果です。
    かなり昔ですが、LightningがiPadの横向き画面にはグローバルメニューが対応してなかった時代、Vektorさんに教えていただいたのが、iPad横画面では強制的にモバイル用のハンバーガーメニューを出す方法でした。
    それは後にLightningが確かBootstrap4対応の時か何かに解決した問題でした。
    私はその時に子テーマの利用を終了して、純正のLightningで運用するようになってました。
    だから長らく子テーマのCSSは触れることがないまま来てました。
    ところが最近になって、別件で子テーマを使う必要が出て、久しぶりに昔の子テーマを有効化しました。
    この時に大昔の子テーマであるために、今は不要になっていたiPad横画面で強制的にハンバーガーメニューを出すCSSが復帰してしまったようです。
    私も薄々は気になっていたのですが、メニューが両方出るのは気持ち良くないとは。。。
    でもLightningの仕様だったかな?と変な思い込みでスルーしておりました。

    対馬様のおかげで、無駄なCSSを機能停止できました。
    誠にありがとうございます。

    他のファイルにも該当処理があったらどうしようかな?と少々気になりますが(笑)
    こんなレベルなので子テーマはできれば避けて純正仕様で使ったほうが良いのですが、今回はやっぱりデザイン的にあまりに余白が大きいので子テーマは続投させたいと思います。

    もしVektorさんがご覧でしたら質問ですが、今回の対馬様から伝授いただいた方法で解決なのですが、そもそもiPadの場合にグローバルメニューの下の余白が大きいのは意図があってのことでしょうか?

    もし意図があってのことであれば、どこかで今回の対策の弊害が出てしまう可能性もあるので確認のつもりで質問です。

    この質問に回答が得られましたら、解決済みにしたいと思います。

    • この返信は1ヶ月、 1週前にmomoが編集しました。理由: 最後の一行を追加しました
    #45758

    momo
    参加者

    対馬様

    今のところ、頂いた対策でiPadのメニューの余白は改善されてます。
    そして私のみる範囲では弊害もなさそうです。
    誠にありがとうございます。
    特に今回は対馬様のご指摘で古い今では害となるCSS残骸も気がつけました。
    ついでに、害はなくても今では使ってないCSSが大量に子テーマにあったので、全部削除しました。

    ただ、気になるのは、VektorさんがiPadでの余白をこのサイズにしていた意図があるのか、たまたまだから変更しても弊害がないのか?
    そこだけです。

    もし弊害なしで、iPadでの余白はこれが正解であれば、次回の改版時にデフォルト値を変更していただけたらと思います。
    >Vektor様

    #45764

    対馬俊彦
    参加者

    私が以前に Pale スキンで作った作業用サイトがありましたので確認してみました。

    Lightning Pro 6.4.4 + Lightning Skin Pale 6.0.1
    の状態で iPad で表示したところ、余白は大きくなりませんでした。

    Lightning Pro 8.3.1 + Lightning Skin Pale 7.0.7
    にアップデートしたところ、iPad で余白が大きく表示されるようになりました。

    大きな余白は意図したものはではなく、
    アップデートによりそうなってしまったのかもしれません。

    Vektor 様、私もご回答をお待ちしています。

    #45765

    momo
    参加者

    対馬様

    確実なコメントをありがとうございます。
    この経緯は全く気がつきませんでした。

    Vektorさんが戻してくれそうですね。

    #45784

    Vektor,Inc
    キーマスター

    対馬さま
    momoさま

    ご報告ありがとうございました。
    theme側のLightning Proのデザイン不具合のようです。

    対馬さまのおっしゃる通り、バージョンアップのタイミングで余白が入ってしまっているようです。
    (※メニューにサブサブメニューがある場合に余白が入る)

    現在調査中となりますので、しばらくお待ちください。

    ご不便おかけし申し訳ございません、どうぞよろしくお願いいたします。

    • この返信は1ヶ月前にVektor,Incが編集しました。
    #45948

    Vektor,Inc
    キーマスター

    お世話になっております。
    お待たせいたしました Paleのバージョン7.0.8 にて不具合を修正いたしましたのでご確認ください。
    ※今回追加していただいたCSSは削除して大丈夫です。

    #45968

    momo
    参加者

    vektorさん、対応とお知らせありがとうございます。
    そして、対馬様のお陰です。
    助かりました。

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