# ログイン/カート画面のテキストサイズについて

**URL:** <https://community.shopify.com/t/topic/222872>\
**Category:** 技術的なQ＆A\
**Created:** [June 8, 2023, 2:18pm UTC](https://community.shopify.com/t/topic/222872 "2023-06-08T14:18:15Z")\
**Posts on this page:** 5\
**Page:** 1

## AI-generated summary

Dawnテーマを使用しているサイトで、モバイル表示時のログイン画面とカート画面のテキストサイズを小さくする方法についての質問です。

**解決方法:**
- Liquidファイルではなく、CSSの変更で対応可能
- カート画面:管理画面のカスタマイズから「カート」→「アイテム」のカスタムCSSにメディアクエリを追加
- ログイン画面:「テーマ設定」のカスタムCSSに記載する方法を提案

**経緯:**
- 質問者は当初、ログイン画面の設定箇所が見つからないと報告(スクリーンショット添付)
- 回答者はDawn 10.0.0での画面を共有し、バージョンの違いの可能性を指摘
- 代替として「テーマ設定」のカスタムCSSに記載する方法を提示し、調整済みのCSSコードを提供

**結果:**
質問者は最終的に修正に成功し、解決済みとなりました。各要素(メール、パスワード、ボタンなど)のfont-sizeを個別に調整するCSSコードが提供されています。

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [June 8, 2023, 2:18pm UTC](https://community.shopify.com/t/topic/222872/1 "2023-06-08T14:18:15Z")

</div>

テーマはDawnを使用しています。

モバイルからサイトを閲覧した場合の、ログイン/カート画面のテキストサイズを小さくしたいです。

Liquidのどこを編集すればいいか教えて頂ける方がいましたらご教示お願いします。

以下の全ての文言をそれぞれ少しづつ小さくしたいと考えております！

①ログイン画面

・ログイン

・メール

・パスワード

・パスワードをお忘れですか？

・ログイン

・アカウントを作成する

②カート画面

・カートは空です

・買い物を続ける

・アカウントをお持ちですか？

・ログインすることでチェックアウトがスピーディに行えます。

よろしくお願いします。

---

<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:** [June 12, 2023, 9:52am UTC](https://community.shopify.com/t/topic/222872/2 "2023-06-12T09:52:00Z")

</div>

ご質問いただいています、モバイルで表示した際ログイン画面・カート画面でフォントサイズを変更したい件ですが、liquidファイルを変更するのではなくCSSの変更となりますので、管理画面から対応ページのカスタムCSSにモバイル用のCSSを追加することで対応が可能です。

下記対応方法となります。

**ログイン画面**  
管理画面のカスタマイズから、『従来のお客様アカウント \> お客様のログイン』を選択し左メニューの『ログイン』をクリック  
カスタムCSSに下記CSSを追加し保存してください。

```markup
@media screen and (max-width: 750px) {
  #login {
    /*ログイン*/
    font-size: 20px;
  }
  .customer .field label {
    /*メール、パスワード*/
    font-size: 12px;
    top: calc(12px + var(--inputs-border-width));
  }
  .login a[href="#recover"] {
    /*パスワードをお忘れですか？*/
    font-size: 14px;
  }
  .customer button {
    /*ログイン*/
    font-size: 14px;
  }
  .login a[href="/account/register"] {
    /*アカウントを作成する*/
    font-size: 14px;
  }
}

```

font-sizeの数値を任意の数値に変更ください。

メール、パスワードの12pxの数値はfont-sizeと同じ数値に設定してください。

**カート画面**  
管理画面のカスタマイズから、『カート』を選択し左メニューの『アイテム』をクリック  
カスタムCSSに下記CSSを追加し保存してください。

```markup
@media screen and (max-width: 750px) {
  .cart__empty-text {
    /*カートは空です*/
    font-size: 20px;
  }
  .button {
    /*買い物を続ける*/
    font-size: 14px;
  }
  .cart__login-title {
    /*アカウントをお持ちですか？*/
    font-size: 14px;
  }
  .cart__login-paragraph {
    /*ログインすることで、・・・*/
    font-size: 14px;
  }
}

```

font-sizeの数値を任意の数値に変更ください。

ご参考まで。  
(キュー小坂)

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [June 12, 2023, 10:59am UTC](https://community.shopify.com/t/topic/222872/3 "2023-06-12T10:59:34Z")

</div>

いつもお世話になっております！

お忙しい中返信ありがとうございます！

・カート画面は修正できました。

・ログイン画面は "「お客様のログイン』を選択し左メニューの『ログイン』"が見当たりません。テーマによる違いでしょうか？

大変お手数ですが、もう少し詳しくご教示頂けますと幸いです。よろしくお願いします！

 ![スクリーンショット 2023-06-12 19.50.29.png](https://canada1.discourse-cdn.com/shopifyforum/original/4X/4/7/4/47441a1d3800667aab3dea434fe67095aeea9091.png)

---

<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:** [June 14, 2023, 7:06am UTC](https://community.shopify.com/t/topic/222872/4 "2023-06-14T07:06:42Z")

</div>

ログイン画面でログインが見当たらなかったとのことですが、  
私の環境Dawn 10.0.0では添付画像の様に表示されておりました。

 ![Qcoltd_1-1686726309985.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/5/5/55545e33332a1d36127b95f06f00087c26b0db00.png)

対象箇所がないとのことでしたら、もしかしたらバージョンの可能性もございます。

ログイン画面につきましては、『テーマ設定』のカスタムCSSに記載いただいても対応は可能かと思います。

 ![Qcoltd_2-1686726310945.png](https://canada1.discourse-cdn.com/shopifyforum/original/3X/f/9/f9c33c00500137d46928d295aded1fd95dd181a5.png)

上記でご提示させていただきましたCSSとは一部調整を加えておりますので、下記CSSをご利用ください。

```markup
@media screen and (max-width: 750px) {
  .login #login {
    /*ログイン*/
    font-size: 20px;
  }
  .login .field label {
    /*メール、パスワード*/
    font-size: 12px;
    top: calc(12px + var(--inputs-border-width));
  }
  .login a[href="#recover"] {
    /*パスワードをお忘れですか？*/
    font-size: 14px;
  }
  .login button {
    /*ログイン*/
    font-size: 14px;
  }
  .login a[href="/account/register"] {
    /*アカウントを作成する*/
    font-size: 14px;
  }
}

```

ご参考まで。  
(キュー小坂)

---

<div class="post-metadata">

**Author:** ![8910](https://avatars.discourse-cdn.com/v4/letter/8/ee59a6/32.png) [@8910](https://community.shopify.com/u/8910)\
**Post date:** [June 14, 2023, 10:37am UTC](https://community.shopify.com/t/topic/222872/5 "2023-06-14T10:37:15Z")

</div>

修正できました！

いつも本当にありがとうございます！