ヘッダーを「固定」にしてロゴを画像にすると、高さの計算が正しくなくなる

0
いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • 投稿者
    投稿
  • #21905
    谷口 允
    参加者
    24

    【お使いの Snow Monkey のバージョン】v7.4.3
    【お使いのブラウザ】Google Chrome(Windows)
    【当該サイトのURL】(公開できる場合は書いていただいたほうがスムーズです)

    上記サイトで、現在はヘッダーを「ノーマル」にしているのですが「固定」にすると、画面が崩れました。具体的には、ヘッダーが表示直後に高さがかなり高くなるのですが(それは今も同様)、その後ヘッダーが縮みます。

    しかし、固定の場合はその「長くなった状態の高さ」で固まってしまうようで、その下の要素が下にずれてしまいました。

    ロゴを画像にしなければ起こらないので、おそらくロゴに画像を指定したときにその画像の高さが正しく取れずに、いったん非常に長くなった後で、短くなるという動作をしているようなのですが、その時に「固定」の指定と相性が悪くて、要素の位置が変な場所で固まってしまうようです。

    解消の方法などありましたら教えてくださいませ。

    ===

    0
    いいねをした人: 居ません
    #21907
    アバター画像キタジマ タカシ
    参加者
    2421

    ロゴを svg にされているかと思いますが、svg はそのままだとアップロードできないと思うので、なんらかプラグインなど使用されていますでしょうか?

    ちょっとこちらのローカル環境で同じプラグイン、同じロゴ svg を使って状況が再現するか確認してみたいと思います。

    0
    いいねをした人: 居ません
    #22006
    谷口 允
    参加者
    24

    Safe SVGというプラグインを入れております!

    ただ、念のためPNGにした場合も同じ現象が発生していたので、画像形式によるものではなさそうでした。一時的に不具合が起こった状態にすることもできますので、ご指示くださいませ。

    2
    いいねをした人:
    #22019
    アバター画像キタジマ タカシ
    参加者
    2421

    原因わかりました。おそらく、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; } を打ち消すのが良いのかなぁと想像しています。

    ちょっとその方向でやってみますが、何か他にも良さそうなアイデアがもしあれば書き込みください!

    0
    いいねをした人: 居ません
    #22020
    谷口 允
    参加者
    24

    ありがとうございます! ひとまず、Lazyloadは切ってしまっても良いので、切っちゃいます。とはいえ、使っているユーザーもいるかも知れないので解消可能でしたら、ご対応下さいませ。

    0
    いいねをした人: 居ません
    #22021
    アバター画像キタジマ タカシ
    参加者
    2421

    あ、いま調べてて、ちょっと間違いの訂正とご質問です。

    これをインラインスタイルとかでも指定して img { height: auto; } を打ち消すのが良いのかなぁと想像しています。

    これですが、すでにスタイルでの指定も入れるようなっていました!(なっていたというかつくったのは僕なのですが笑)
    ただ、height については auto を指定するようにしていたので、そこは px を指定するようにしようと思うのですが、件のサイトを拝見すると、どうもこのスタイル指定が出力されてないみたいなんです。

    ファイルでいえば snow-monkey/app/setup/custom-logo.php の中の wp_head で計算してスタイルを出力するようにしているのですが、これを子テーマか何かで打ち消したりされていますでしょうか?もしされていないのでしたら、jetpack の Lazyload との絡みなのかもしれません…。その場合はなにかうまい方法がないかちょっと処理を見直してみます…。

    1
    いいねをした人: 居ません
6件の投稿を表示中 - 1 - 6件目 (全6件中)
  • トピック「ヘッダーを「固定」にしてロゴを画像にすると、高さの計算が正しくなくなる」には新しい返信をつけることはできません。

ドキュメント

Snow Monkey の設定方法やマニュアルを掲載しています。

ドキュメント

フォーラム

Snow Monkey の使い方やカスタマイズについてのご質問・ご要望等はサポートフォーラムで行っています。サポートフォーラムは誰でも閲覧できますが、書き込みできるのは Snow Monkey 購入者のみとなります。

サポートフォーラム

よくあるご質問

Snow Monkey のサービスについて不明な点がある場合は、まずはよくあるご質問をご確認ください。

よくあるご質問

お問い合わせ

よくあるご質問を見ても解決しなかった場合、試用版の申請については問い合わせフォームからお願いいたします。

お問い合わせ

Snow Monkey は Gutenberg ブロックエディターに対応した 100%GPL の WordPress テーマです。拡張性を意識した開発をおこなっており、カスタマイザーとブロックでスピーディーにサイトを立ち上げるだけでなく、CSS やフックを駆使した高度なカスタマイズにも柔軟に対応できます。