ヘッダーをオーバーレイ(上部固定/スクロール時背景白)にしたとき、スクロールしてもロゴのカラーが変わらない

0
Who liked: No user
  • このトピックには20件の返信、3人の参加者があり、最後にアバター画像yuuにより2年、 8ヶ月前に更新されました。
15件の投稿を表示中 - 1 - 15件目 (全21件中)
  • 投稿者
    投稿
  • #100428
    アバター画像yuu
    閲覧者
    28

    【お使いの Snow Monkey のバージョン】16.1.3
    【お使いの Snow Monkey Blocks のバージョン】14.1.1
    【お使いの Snow Monkey Editor のバージョン】7.0.1
    【お使いのブラウザ】Chrome
    【当該サイトのURL】ローカルのため無し

    ### 発生している問題

    いつもお世話になっております。

     

    ヘッダーをオーバレイ(上部固定/スクロール時背景白)にしたとき、

    スクロールしてもロゴのカラーが変わらずに見えなくなってしまいます。

    ロゴの位置をクリックすると、カラーが黒くなり表示されます。

    しかし、そのままページトップに戻ると、今度はロゴのみ黒いままになってしまいます。

    ご確認お願いいたします。

    ### 試したこと

    0
    Who liked: No user
    #100436
    アバター画像キタジマ タカシ
    参加者
    2421

    ロゴは画像ですか?画像の場合、どうやって色を変えていますか?

    0
    Who liked: No user
    #100441
    アバター画像yuu
    閲覧者
    28

    キタジマさん、ロゴは画像ではありません!

    Adobe Fontを使用しています。

    0
    Who liked: No user
    #100444
    アバター画像yuu
    閲覧者
    28

    ちなみにヘッダーの文字色は初期設定です。

    0
    Who liked: No user
    #100516
    アバター画像キタジマ タカシ
    参加者
    2421

    こちらでも試してみました。

    見た感じ意図した通り動作しているように見えます。Web フォントを使用していることが影響しているとか、環境依存の可能性もあるので実際のページで確認しないと原因わからないかもです…。

    1
    Who liked:
    #100522
    アバター画像yuu
    閲覧者
    28

    ありがとうございます!

     

    本番環境アップしたので確認していただけますか?

    よろしくお願いいたしますm(__)m

    https://ryo-career.com/

    0
    Who liked: No user
    #100524
    アバター画像キタジマ タカシ
    参加者
    2421

    うーん、ちゃんと動いてますね。Chrome(98.0.4758.109) でも Safari(15.3 (17612.4.9.1.8)) でも大丈夫でした。

    1
    Who liked:
    #100526
    アバター画像yuu
    閲覧者
    28

    あれ、マジですか…

    他で問題ないのなら良いのですが…

    動画が貼れなかったので、こちらで確認いただけますかm(__)m

    https://youtu.be/b0YoaoQX0oo

    0
    Who liked: No user
    #100536
    アバター画像キタジマ タカシ
    参加者
    2421

    色が正しくないときに、実際どのような CSS があたっていますか?

    0
    Who liked: No user
    #100537
    アバター画像yuu
    閲覧者
    28

    この画面でいいでしょうか?

    0
    Who liked: No user
    #100541
    アバター画像キタジマ タカシ
    参加者
    2421

    んーすみません、ちょっとわからないですね…。web フォントだけ外してみる、独自に追加している CSS を全部消してみるなどしてみると変化はないでしょうか。変化があれば原因が突き止めやすくなると思います。

    0
    Who liked: No user
    #100550
    アバター画像yuu
    閲覧者
    28

    全てのプラグインを無効化、追加cssを全て削除したけど変わらずでした。

    Edgeでも確認してみたけど、同じでしたね…
    他のパソコンが無いため、私は確認できないのですが…

    他に打ち手ありますか?

    1
    Who liked:
    #100584
    中野桂輔
    参加者
    14

    横から失礼します。(もし規約違反などであればすみません、その場合は削除します。)

    私のPCからも見てみたところ、藤田さんのおっしゃるような動作になっていますね。
    CSS詳しくないので全然違うかもしれないし、そもそもあり得るのかわからないですが、
    ひょっとしたら、OSの違いで動作が変わっているのではないでしょうか。

    ちなみに、私の方ではWindowsのEdgeとChromeで確認しました。
    (macは所有していないので未確認です…)

    2
    Who liked:
    #100585
    アバター画像キタジマ タカシ
    参加者
    2421

    Windows で検証してみました。

    Windows11 + Chrome 98.0.4758.102 = OK
    Windows11 + Edge 99.0.1150.30 = NG
    Windows11 + Edge 99.0.1150.36 = NG

    ということで、僕の環境だと Edge では現象が再現できました。デベロッパーツールで CSS の動作を確認してみたのですが、CSS は正しく効いているけど表示は正しくされていないという状況だったので、Edge の不具合の可能性が高いのかなと思いました。

    今はロゴテキストとグローバルナビゲーションの div 自体に color の設定があり、その中のリンクはその divcolor を継承する(= 同じ色になる)ようになっています。これを継承という形ではなく、リンク自体に色設定をすると Edge でも正しく動きそうです。でもグローバルナビゲーションのほうは継承でもちゃんと反映されているのでなぜロゴテキストだけ NG なのかが意味不明できもちわるいですが…。もうちょっと検証してみます。

    1
    Who liked:
    #100590
    中野桂輔
    参加者
    14

    検証ありがとうございます。

    Edgeだけ?と思ったので私もバージョンを確認してみました。

    Windows10 + Chrome バージョン: 99.0.4844.51 = NG
    Windows10 + Edge バージョン 99.0.1150.36 = NG

    キタジマさんとChromeのバージョンが違いましたね。
    Chromeも最新バージョンに上げるとうまくいかないかもしれません。
    Windowsのchromium ブラウザ全般の問題でしょうか?

    ※追記
    Windows10 + Firefox バージョン 97.0.2 (64 ビット) = OK でした。

    1
    Who liked:
15件の投稿を表示中 - 1 - 15件目 (全21件中)
  • トピック「ヘッダーをオーバーレイ(上部固定/スクロール時背景白)にしたとき、スクロールしてもロゴのカラーが変わらない」には新しい返信をつけることはできません。

ドキュメント

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

ドキュメント

フォーラム

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

サポートフォーラム

よくあるご質問

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

よくあるご質問

お問い合わせ

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

お問い合わせ

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