# スマートフォン表示でのヘッダーアイコンの変更

**URL:** <https://community.shopify.com/t/topic/212020>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [April 28, 2023, 9:35am UTC](https://community.shopify.com/t/topic/212020 "2023-04-28T09:35:09Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマを使用したスマートフォン表示で、ヘッダーの「サーチアイコン」を非表示にし、「アカウントアイコン」を表示させる方法についての質問。

**解決方法（CSS調整）：**
1. 管理画面 > オンラインストア > カスタマイズ
2. テーマ設定 > カスタムCSSを選択
3. 提供されたCSSコード（メディアクエリ使用）を追加して保存

**結果：**
- スマートフォン表示時にサーチアイコンが非表示になる
- アカウントアイコンが表示される

質問者は設定変更に成功し、解決済み。liquidファイル調整とCSS調整の2つの方法があるが、今回は設定が簡単なCSS方式で対応。

<div class="post-metadata">

**Author:** ![merrow](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@merrow](https://community.shopify.com/u/merrow)\
**Post date:** [April 28, 2023, 9:35am UTC](https://community.shopify.com/t/topic/212020/1 "2023-04-28T09:35:09Z")

</div>

テーマ「Dawn」で制作しています。

スマートフォンで閲覧したときに、ヘッダーの「サーチアイコン」を消して「アカウントアイコン」を表示することは可能でしょうか？

デフォルトだと「アカウントアイコン」が消えてしまうので、これを残したいと思っています。

ご教授いただけると幸いです。

---

<div class="post-metadata">

**Author:** ![Qcoltd](https://yyz1.discourse-cdn.com/shopifyforum/user_avatar/community.shopify.com/qcoltd/32/900_2.png) [@Qcoltd](https://community.shopify.com/u/Qcoltd)\
**Post date:** [May 1, 2023, 3:34am UTC](https://community.shopify.com/t/topic/212020/2 "2023-05-01T03:34:14Z")

</div>

ご質問いただいています、スマートフォンで閲覧した際「アカウントアイコン」を表示する件ですが、liquidファイルを調整する方法と、cssで調整する方法の2通り調整方法がありますが、今回は設定が簡単なcssで調整する方法を記載させていただきます。

設定方法

\*\*1.\*\*管理画面 \> オンラインストア \> カスタマイズボタンをクリック

\*\*2.\*\*左側テーマ設定をクリック

 ![Qcoltd_0-1682911983836.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/1/6/f/16fb1af7d714b9a5c0b223596b238e1a28f863ff.png)

\*\*3.\*\*カスタムCSSを選択し、下記CSSを追加し保存

 ![Qcoltd_1-1682911983837.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/f/6f4926b5db231c130105e87b7c82692e7d6644a0.png)

```markup
@media screen and (max-width: 749px) {
  .header__search {
    display: none !important;
  }
  .header__icon--account.small-hide {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
}

```

以上でスマートフォンでサイトを閲覧した際、「サーチアイコン」は非表示となり、

「アカウントアイコン」が表示されます。

 ![Qcoltd_2-1682911983837.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/6/f/6ff61e1ee3c4afa78e851ef36e6a381a9ef907dd.png)

ご参考まで。

(キュー小坂)

---

<div class="post-metadata">

**Author:** ![merrow](https://avatars.discourse-cdn.com/v4/letter/m/9fc348/32.png) [@merrow](https://community.shopify.com/u/merrow)\
**Post date:** [May 1, 2023, 4:38am UTC](https://community.shopify.com/t/topic/212020/3 "2023-05-01T04:38:07Z")

</div>

キュー小坂様

ご丁寧ありがとうございます。

設定変更できました。