[ 解決済 ] iPad表示でグローバルメニューの高さ調整
[ 解決済 ] iPad表示でグローバルメニューの高さ調整
- このトピックには12件の返信、3人の参加者があり、最後に
により3年、 4ヶ月前に更新されました。
-
投稿
-
以下のスタイルを追加すれば、Pale スキンのこの部分の余白を狭めることができます。
@media (min-width: 992px) { .device-mobile .gMenu>li { padding-bottom: 0; } .device-mobile .gMenu>li>ul.sub-menu { margin-top: 0; } }お試しください。
対馬様
早速、子テーマのCSSに追加してみました。
私の環境MacのSafariで見るとリロードする都度「ポヨーン」と高さ余白に動きのあるメニューになってしまうようでした。
一時的に動画を以下リンクで共有します。Vektorさんがテーマとして検討課題にして頂けると嬉しいのですが、それが難しい場合はカスタマイズになるのでしょうから、とりあえず、本件は断念しようと思います。
せっかく情報を頂いたのですが、こうして実際にチャレンジして見ると、環境にも依存する難しい事なのかな？
と感じ始めたので、将来のWordPressバージョンアップなどで何かトラブルがあっても私では自力で対応もできないですし。
先日のWordPress5.6で別サイトで利用中のcocoonでトラブって、そちらは私のカスタマイズ問題ではなかったのですが、怖いなあと実感したところでした。対馬様、今日は2件連続のアドバイスをありがとうございました。
https://www.icloud.com/iclouddrive/0_VFJTCYOzTFiQtwRDKx0ubJA#RPReplay_Final1607743310
動画のリンクが普通に使えるのか？
自分で見ると妙な感じでした。
もし、使い物にならない共有リンクだったら？
と思うので、とりあえず言葉で補足です。対策後はSafariの画面ではグローバルメニューの下の余白が小さくなった気がします。iPad画面にて。
しかし、読み込んだ瞬間は元の大きな余白で、1秒くらいで小さい余白になるようです。
読み込みの都度、そのアニメーション動作があるので気になる状態でした。そのような動画をリンクしたのですが、このリンクはもしかしたらiCloudのユーザーにしか使えないリンクだったのかもしれません。
リンク先の動画をダウンロードして確認(再生)できました。
iCloud のユーザーでなくても、[複製をダウンロード] でダウンロードできました。この動画のような動きだと困りますね。
私が Pale スキンで制作中のサイトがあり、そのサイトに上記のスタイルを適用しています。
そのサイトを iPad の Safari で表示してもポヨーン現象は起きません。
なにかが違うんでしょうね。
momo 様、
共有していただいた動画を見て気になったことがあります。
添付画像をあわせてご覧ください。
[1] のメニューボタンと [2] のナビゲーションメニューが
画面に同時に表示されることは通常はないと思います。画面幅が 991ピクセル以下のときは [1] のメニューボタンだけが表示されて、
画面幅が 992ピクセル以上のときは [2] のナビゲーションメニューだけが表示される、
というのが Lightning の動作のはずです。このことがなにかのヒントになれば幸いです。
対馬様の情報が決め手になりました。
実は、恥ずかしい結果です。
かなり昔ですが、LightningがiPadの横向き画面にはグローバルメニューが対応してなかった時代、Vektorさんに教えていただいたのが、iPad横画面では強制的にモバイル用のハンバーガーメニューを出す方法でした。
それは後にLightningが確かBootstrap4対応の時か何かに解決した問題でした。
私はその時に子テーマの利用を終了して、純正のLightningで運用するようになってました。
だから長らく子テーマのCSSは触れることがないまま来てました。
ところが最近になって、別件で子テーマを使う必要が出て、久しぶりに昔の子テーマを有効化しました。
この時に大昔の子テーマであるために、今は不要になっていたiPad横画面で強制的にハンバーガーメニューを出すCSSが復帰してしまったようです。
私も薄々は気になっていたのですが、メニューが両方出るのは気持ち良くないとは。。。
でもLightningの仕様だったかな？と変な思い込みでスルーしておりました。対馬様のおかげで、無駄なCSSを機能停止できました。
誠にありがとうございます。他のファイルにも該当処理があったらどうしようかな？と少々気になりますが(笑)
こんなレベルなので子テーマはできれば避けて純正仕様で使ったほうが良いのですが、今回はやっぱりデザイン的にあまりに余白が大きいので子テーマは続投させたいと思います。もしVektorさんがご覧でしたら質問ですが、今回の対馬様から伝授いただいた方法で解決なのですが、そもそもiPadの場合にグローバルメニューの下の余白が大きいのは意図があってのことでしょうか？
もし意図があってのことであれば、どこかで今回の対策の弊害が出てしまう可能性もあるので確認のつもりで質問です。
この質問に回答が得られましたら、解決済みにしたいと思います。
対馬様
今のところ、頂いた対策でiPadのメニューの余白は改善されてます。
そして私のみる範囲では弊害もなさそうです。
誠にありがとうございます。
特に今回は対馬様のご指摘で古い今では害となるCSS残骸も気がつけました。
ついでに、害はなくても今では使ってないCSSが大量に子テーマにあったので、全部削除しました。ただ、気になるのは、VektorさんがiPadでの余白をこのサイズにしていた意図があるのか、たまたまだから変更しても弊害がないのか？
そこだけです。もし弊害なしで、iPadでの余白はこれが正解であれば、次回の改版時にデフォルト値を変更していただけたらと思います。
＞Vektor様私が以前に 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 様、私もご回答をお待ちしています。
- このトピックに返信するにはログインが必要です。
