Simplicityヘッダーのタイトルをロゴ画像に変更するカスタマイズ方法

ロゴ画像は、テーマ設定で設定できます。

WordPress 管理画面 → 外観 → カスタマイズ → ヘッダーより、「ロゴ画像」に画像を設定し、「ロゴを画像にする」にチェックを入れます。

有難うございます。

ちなみに、このロゴ画像の設定後、レスポンシブに表示した際に画像サイズが変わらないのですが、
ロゴ画像のサイズ比率をブラウザごとに変更するCSSの記述はどのようなものでしょうか。

画面幅に応じて変更するには、メディアクエリを使います。

画面幅 480px 以下（おおむねスマホ）でロゴ画像のサイズを変更されたい場合には、このように書きます。

@media screen and (max-width: 480px) {
  
  .site-title-img {
    width: 100px;
  }
}

Akiraさんのstyleを試してみましたか？その意図ではない場合ですが。

ちなみに、このロゴ画像の設定後、レスポンシブに表示した際に画像サイズが変わらないのですが、

レスポンシブにした際とはどのようにされた場合でしょうか？Simplicityの設定で試した。もしくはブラウザの左右横幅を狭くした際でしょうか？

設定によっては、再読み込みが必要になります。

ロゴ画像のサイズ比率をブラウザごとに変更するCSSの記述はどのようなものでしょうか。

ロゴの比率がブラウザによって、おかしくなるということでしょうか？？

詳細が不明なので、URLを置いていただけたらと思います。

もしくは以下CSSで試してみると、どうなりますか？

div, img {
	max-width: 100%;
	height: auto;
}
iframe {
	max-width: 100%;
}

https://bibabosi-rizumu.com/simplicity-img-iframe-table-width/

この意図でもない場合、詳細を書いていただけますか？

一番早いのはURLを提示して、回答者さんに設定の全確認してもらい状況を把握できるよう確認してもらう事も手かと思います。

時間とらせて気を遣うところかも知れませんが…。

Akiraさん
かうたっくさん

お付き合い有難うございます。
また、言葉足らずですみません。。

レスポンシブにした際とはどのようにされた場合でしょうか？Simplicityの設定で試した。もしくはブラウザの左右横幅を狭くした際でしょうか？

⇒Simplicityのカスタマイザー設定で『完全レスポンシブ表示を有効』にチェックを入れているだけです。

ロゴの比率がブラウザによって、おかしくなるということでしょうか？？
詳細が不明なので、URLを置いていただけたらと思います。

⇒chromeの検証ツールでiphone5・SEなどで見ると少し画像が大きく縮小率を高く設定できないかと思いまして。
URLはこちらです。
https://xn--88jyb7au1w3dtbc1i7r935ym56h5wk.com

ロゴ自体の元画像やヘッダー画像のそのものの問題でしょうか。

画面幅 360px だとちょうどいい感じ。それ以下の画面幅だと、ヘッダー画像のテキスト部分とかぶりますね。

それならば、こんな感じの CSS でいいと思います。

@media screen and (max-width: 359px) {
  
  .site-title-img {
    width: 47%;
  }
}

もしくは、ロゴ画像の幅を固定するのもありです。

@media screen and (max-width: 359px) {
  
  .site-title-img {
    width: 140px;
  }
}

@media screen and (max-width: 480px) {
	.site-title-img {
		width: 130px;
		height: auto;
	}
}

スマホビューではロゴを小さくするCSSです。Chromeではheight: auto;は要らないみたいですが、念のため。

数値は任意の大きさでご確認いただけますか？

Akiraさんとかぶった＾＾；

お疲れ様です！

Akiraさん
かうたっくさん

解決しました！
本当にありがとうございます。