【Cocoon】スマホ時のロゴ画像ぼやけ対策・サイズの調整方法

Cocoonカスタマイズ

こんにちは、斉藤コウ(@s41t0h)です。

Cocoonでヘッダーロゴを画像にしている際、スマホで見た時にロゴが大きくなりすぎたりぼやけてしまったりすることがあります。

今回はスマホ表示時にロゴ画像のサイズ調整をする方法をご紹介します。

スポンサーリンク

Cocoonのスマホ表示時のロゴ画像サイズ調整カスタマイズ

デフォルトではスマホ表示時のロゴ画像の縦サイズは60pxに固定されています。

それだと、ロゴ画像によっては大きくなりすぎたり、ぼやけてしまったりします。

そこで、こちらを調整します。

子テーマのstyle.cssに下記コードを追記してみてください。

@media screen and (max-width: 480px){
	.logo img {
		height: 40px !important; /* スマホ時のロゴの画像タテサイズ */
		margin: .5em auto;
	}
}
【初心者向け】CocoonにCSSカスタマイズを追加する方法と適用されない場合の注意点。
こんにちは、さいとう(@S41T0H)です。 最近、当サイトで掲載しているCocoonカスタマイズについての質問を非常に多く受けます。 その中で多いのが「カスタマイズが適用されない!!!!!!!!」というもの。 せっかく当サイトを見つ...

40pxとなっている部分はスマホで確認しながら適宜調整してみてください。

【支援お待ちしております!】

当サイトが役に立ったと思ったら投げ銭サービスpolcaで支援していただけたら幸いです!(300円単位での投げ銭が可能です)

継続的な更新・サポートのためにご支援お願いいたします……!

▶支援先:サイトに掲載するCSSカスタマイズの支援をお待ちしています!

サイトに掲載するCSSカスタマイズの支援をお待ちしています! - polca(ポルカ)
"今後の記事執筆の励みになります!"を支援のおかえしとして受け取ることができます。

その他のカスタマイズは下記ボタンから。

コメント

  1. こんばんは!
    スマホで表示したときにヘッダーの左右が切れるので、こちらを参考に修正させてもらったところ無事に治りました!ありがとうございます!

    ただ、左右の切れは改善されたものの、今度はヘッダーロゴ画像が潰れています。

    私のブログはヘッダー背景画像と、透過したロゴ画像を組み合わせてヘッダーを作っているのですが、どうすればロゴ潰れを改善できるでしょうか?

    ちなみに、こちらのサイトを参考に作りました。
    https://3light-style.com/cocoon-header/