- このトピックには5件の返信、2人の参加者があり、最後に
により4年、 9ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】v7.4.3
【お使いのブラウザ】Google Chrome（Windows）
【当該サイトのURL】（公開できる場合は書いていただいたほうがスムーズです）上記サイトで、現在はヘッダーを「ノーマル」にしているのですが「固定」にすると、画面が崩れました。具体的には、ヘッダーが表示直後に高さがかなり高くなるのですが（それは今も同様）、その後ヘッダーが縮みます。
しかし、固定の場合はその「長くなった状態の高さ」で固まってしまうようで、その下の要素が下にずれてしまいました。
ロゴを画像にしなければ起こらないので、おそらくロゴに画像を指定したときにその画像の高さが正しく取れずに、いったん非常に長くなった後で、短くなるという動作をしているようなのですが、その時に「固定」の指定と相性が悪くて、要素の位置が変な場所で固まってしまうようです。
解消の方法などありましたら教えてくださいませ。
===
いいねをした人: 居ませんロゴを svg にされているかと思いますが、svg はそのままだとアップロードできないと思うので、なんらかプラグインなど使用されていますでしょうか？
ちょっとこちらのローカル環境で同じプラグイン、同じロゴ svg を使って状況が再現するか確認してみたいと思います。
いいねをした人: 居ません原因わかりました。おそらく、Jetpack？の LazyLoad を使われていると思うのですが、それが影響しているようです。LazyLoad で画像が読み込まれる前の状態では
srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"という仮画像がセットされています。これが 1×1 の画像なのですが、Snow Monkey は CSS でimg { height: auto; }となっているため、ロゴの横幅サイズに連動して 236×236 で表示されてしまうようです。どう対処するのがベターかちょっと悩むのですが、ロゴ画像のサイズを現状
imgの height 属性と width 属性につっこんでいるので、これをインラインスタイルとかでも指定してimg { height: auto; }を打ち消すのが良いのかなぁと想像しています。ちょっとその方向でやってみますが、何か他にも良さそうなアイデアがもしあれば書き込みください！
いいねをした人: 居ませんありがとうございます！ ひとまず、Lazyloadは切ってしまっても良いので、切っちゃいます。とはいえ、使っているユーザーもいるかも知れないので解消可能でしたら、ご対応下さいませ。
いいねをした人: 居ませんあ、いま調べてて、ちょっと間違いの訂正とご質問です。
これをインラインスタイルとかでも指定して
img { height: auto; }を打ち消すのが良いのかなぁと想像しています。これですが、すでにスタイルでの指定も入れるようなっていました！（なっていたというかつくったのは僕なのですが笑）
ただ、height については auto を指定するようにしていたので、そこは px を指定するようにしようと思うのですが、件のサイトを拝見すると、どうもこのスタイル指定が出力されてないみたいなんです。ファイルでいえば
snow-monkey/app/setup/custom-logo.phpの中のwp_headで計算してスタイルを出力するようにしているのですが、これを子テーマか何かで打ち消したりされていますでしょうか？もしされていないのでしたら、jetpack の Lazyload との絡みなのかもしれません…。その場合はなにかうまい方法がないかちょっと処理を見直してみます…。いいねをした人: 居ません
- トピック「ヘッダーを「固定」にしてロゴを画像にすると、高さの計算が正しくなくなる」には新しい返信をつけることはできません。