ブラウザ上で拡大するとヘッダー画像が大きくなったり、小さくなったりする

  • T

    ヘッダーの画像の表示について質問させてください。

    添付した画像を参照してご確認頂けると幸いです。
    ①100%の表示だと幅が記事タイトルなどとあっています。
    ②110%の表示だとヘッダー画像が大きくなりすぎて、記事との幅の割合がおかしい状態になります。
    ③175%の表示だとヘッダー画像が小さくなります。
    発生する拡大倍率は表示するモニタのサイズによって異なります。

    ヘッダー画像は2400x500にしています。
    ※2880ｘ800、2400x1000でも同様の症状が出ています。

    0_1651998532015_ヘッダー100%.png !0_1651998846068_ヘッダー110%.png 0_1651998537410_ヘッダー110%.png 0_1651998542019_ヘッダー175%.png

    仕様なのでしょうか？
    もし確認、修正すべき場所があれば教えて頂きたいです。

    よろしくお願いします。

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 5.9.3
    ご利用のサーバー名 : conoha
    PHPのバージョン : 8.0
    OS : windows
    ご利用のブラウザ : Google Chrome/Microsoft Edge
    該当サイトのURL : https://keyrandomblog.com/

    0 1 件の返信

  • @toshitsuyo さん

    こんにちは！
    検証画像のご共有ありがとうございます！

    ヘッダー画像ではなくて、サイトロゴの画像の事でお間違いないでしょうか？？

    そうですね、、、現状の JIN の仕様ですと、カスタマイズ画面の
    「ヘッダー設定」>「ロゴとフレーズの文字サイズ調整」の数値によっては
    ズーム機能によって、今回のような症状が発生してしまいます。。。

    数値を変更して調整していただくか、
    追加CSSなどを上手く使って調整する形になるかと思います。

    取り急ぎ、こちらの環境下ですと以下のコードを
    「追加CSS」に記述することで拡大されてしまう範囲を押さえられました。

    #header #site-info .tn-logo-size,
#header #site-info a,
#header #site-info img {
	max-width: 100%;
}

    必要であればお試しいただければと思います。

    ご面倒をおかけしてしまい申し訳ありませんが、よろしくお願いいたします！

    0
  • T

    tsuさん

    ご回答ありがとうございました。
    ヘッダーではなくて、サイトロゴです。失礼致しました。

    追加CSSは下記のページにあるように、
    外観→テーマエディタの最後に記載頂いたコードをコピペすれば良いということでしょうか？
    https://www.conoha.jp/lets-wp/wp-css/

    お手数おかけしますが、よろしくお願いします。

    0 1 件の返信

  • @toshitsuyo さん

    ヘッダーではなくて、サイトロゴです。失礼致しました。

    いえいえ、大丈夫です！
    ⠀
    ⠀

    追加CSSは下記のページにあるように、
    外観→テーマエディタの最後に記載頂いたコードをコピペすれば良いということでしょうか？

    あ、テーマエディタではなくて管理画面「外観」>「カスタマイズ」の中に
    「追加CSS」という項目がありますので、そちらでお願いいたします！

    添付いただいた記事の中で言うと
    「追加CSSを使って編集するメリット、デメリット」の部分ですね。

    （基本的にテーマエディタはあまり触らないのがオススメです）

    ご確認よろしくお願いいたします！

    0
  • T

    tsu_さん

    ご連絡遅くなり、すみません。
    教えて頂いたところに追加CSSに記載したところ、おっしゃった通りに反映できました。

    ご回答いただきありがとうございました！

    0 1 件の返信

  • @toshitsuyo さん

    ご報告いただき、ありがとうございます！

    教えて頂いたところに追加CSSに記載したところ、おっしゃった通りに反映できました。

    上手く行ったようで何よりです！
    ⠀
    ⠀
    こちらのトピックは一度「解決済み」とさせていただきますが、
    また気になる点などありましたら、新規トピックを立てていただければと思います！

    引き続き、よろしくお願いいたします。
    （ご確認いただければ、ご返信は無用ですので！）

    1