セッション編集で設定したロゴ画像のサイズは、パソコンで表示される場合、サイズはちょうどいいですが、
スマホ画面に切り替えると、ロゴ画像のサイズが大きくてヘッダー部分のバランスが崩れてしまいます。
やりたいこと：スマホ表示の場合、ロゴ画像のサイズを少し小さくしたいです。
現在使用しているdebutテーマでは、スマホ向けの画像設定ができないため、コード編集から修正になるかと思います。
具体的にどの部分のコードを編集したら良いか、ご教示頂けますでしょうか？
よろしくお願いいたします。
AI-generated summary
PCでは適切だがスマホ表示でヘッダーのロゴ画像が大きすぎる問題について、debutテーマでコード編集による対応方法が案内された。目的は、スマホ時のみロゴサイズを小さくすること。
対応内容:
- header.liquid 内のロゴ表示用 imgタグ を修正
- インラインスタイル
style="max-width: {{ section.settings.logo_max_width }}px;"を削除 - 代わりに
class="logo_image"を付与 - CSSのメディアクエリ（画面幅ごとに表示を切り替える指定）でPC/SP別の
max-widthを設定
例として、PCは 500px、スマホは @media screen and (max-width:480px) で 250px にする方法が示された。スクリーンショット付きで編集箇所も補足されている。
結論として、質問者はこの方法で問題が解決したと報告しており、スレッドは解決済み。
header.liquid の中にロゴ画像を表示する imgタグ がありますが、
下記のインラインスタイルを削除して、変わりにclass名を付け、cssのメディアクエリで指定サイズを書いてあげれば良いと思います。
style="max-width: {{ section.settings.logo_max_width }}px;"
↓
class="logo_image"
▼CSS
/* PC */
.logo_image {
max-width: 500px;
}
/* SP */
@media screen and (max-width:480px) {
.logo_image {
max-width: 250px;
}
}
探検家さま
ご丁寧に説明していただきありがとうございます。
問題点は解決いたしました。
よろしくお願いいたします。