# パソコンとスマホで表示する画像のサイズのコード編集

**URL:** <https://community.shopify.com/t/topic/35325>\
**Category:** 技術的なQ＆A\
**Created:** [February 9, 2021, 7:16am UTC](https://community.shopify.com/t/topic/35325 "2021-02-09T07:16:07Z")\
**Posts on this page:** 3\
**Page:** 1

## 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` にする方法が示された。スクリーンショット付きで編集箇所も補足されている。

結論として、質問者はこの方法で問題が解決したと報告しており、スレッドは解決済み。

<div class="post-metadata">

**Author:** ![ken01](https://avatars.discourse-cdn.com/v4/letter/k/ebca7d/32.png) [@ken01](https://community.shopify.com/u/ken01)\
**Post date:** [February 9, 2021, 7:16am UTC](https://community.shopify.com/t/topic/35325/1 "2021-02-09T07:16:07Z")

</div>

セッション編集で設定したロゴ画像のサイズは、パソコンで表示される場合、サイズはちょうどいいですが、

スマホ画面に切り替えると、ロゴ画像のサイズが大きくてヘッダー部分のバランスが崩れてしまいます。

やりたいこと：スマホ表示の場合、ロゴ画像のサイズを少し小さくしたいです。

現在使用しているdebutテーマでは、スマホ向けの画像設定ができないため、コード編集から修正になるかと思います。

具体的にどの部分のコードを編集したら良いか、ご教示頂けますでしょうか？

よろしくお願いいたします。

---

<div class="post-metadata">

**Author:** ![\_osamu\_iwasaki](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/_osamu_iwasaki/32/272617_2.png) [@\_osamu\_iwasaki](https://community.shopify.com/u/_osamu_iwasaki)\
**Post date:** [February 10, 2021, 6:42am UTC](https://community.shopify.com/t/topic/35325/2 "2021-02-10T06:42:35Z")

</div>

**header.liquid** の中にロゴ画像を表示する **imgタグ** がありますが、  
下記のインラインスタイルを削除して、変わりにclass名を付け、cssのメディアクエリで指定サイズを書いてあげれば良いと思います。

```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;
  }
}

```

 ![スクリーンショット 2021-02-10 15.35.53.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/7/67ffb09461804fad4521410eb668212221f89479.png)

---

<div class="post-metadata">

**Author:** ![ken01](https://avatars.discourse-cdn.com/v4/letter/k/ebca7d/32.png) [@ken01](https://community.shopify.com/u/ken01)\
**Post date:** [February 10, 2021, 8:40am UTC](https://community.shopify.com/t/topic/35325/3 "2021-02-10T08:40:41Z")

</div>

探検家さま

ご丁寧に説明していただきありがとうございます。

問題点は解決いたしました。

よろしくお願いいたします。