# テキストのサイズについて

**URL:** <https://community.shopify.com/t/topic/227717>\
**Category:** 技術的なQ＆A\
**Tags:** css\
**Created:** [June 26, 2023, 10:49am UTC](https://community.shopify.com/t/topic/227717 "2023-06-26T10:49:27Z")\
**Posts on this page:** 3\
**Page:** 1

## AI-generated summary

Dawnテーマを使用しているユーザーが、以下2つの画面でテキストサイズを調整したい質問を投稿：

**対象画面：**
- ①パスワードリセット画面（ログイン→「パスワードをお忘れですか？」後の遷移画面）
- ②アカウント作成画面（ログイン→「アカウントを作成する」後の遷移画面）

**解決方法：**
管理画面のカスタムCSSにモバイル・PC用のCSSを追加することで対応可能。

- **パスワードリセット画面：** 管理画面カスタマイズ→『従来のお客様アカウント > お客様のログイン』→カスタムCSSに指定のコードを追加
- **アカウント作成画面：** 管理画面カスタマイズ→『従来のお客様アカウント > お客様の登録』→カスタムCSSに指定のコードを追加

各要素（見出し、ラベル、ボタンなど）に対応するCSSセレクタと、`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 26, 2023, 10:49am UTC](https://community.shopify.com/t/topic/227717/1 "2023-06-26T10:49:27Z")

</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:** [June 28, 2023, 10:28am UTC](https://community.shopify.com/t/topic/227717/2 "2023-06-28T10:28:13Z")

</div>

@8910 さん

ご質問いただいています、パスワードをリセットする画面、アカウントを作成する画面でフォントサイズを変更したい件ですが、管理画面から対応ページのカスタムCSSにモバイル用のCSSを追加することで、フォントサイズを変更することができます。  
カスタムCSSがない場合は、『テーマ設定』のカスタムCSSに記載いただいても対応は可能です。

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

### パスワードをリセットする画面

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

それぞれの対象箇所は下記となります。  
**.login #recover部分がパスワードをリセットする**  
**.login p部分がパスワードをリセットするためのメールを送信します**  
**.login .field label部分がメール**  
**.login button部分が送信**  
**.login a[href=“#login”]部分がキャンセル**

※.login .field labelと.login buttonはログイン画面と共通となりますので、サイズ調整の際はご注意ください。

下記CSSは通常がスマホ用の表示、『@media screen and (min-width: 750px) {』以降がPC用の表示となります。

```markup
.login #recover {
  font-size: 20px;
}
.login p {
  font-size: 14px;
}
.login .field label {
  font-size: 12px;
  top: calc(12px + var(--inputs-border-width));
}
.login button {
  font-size: 14px;
}
.login a[href="#login"] {
  font-size: 14px;
}
@media screen and (min-width: 750px) {
.login #recover {
  font-size: 22px;
}
.login p {
  font-size: 16px;
}
.login .field label {
  font-size: 14px;
  top: calc(14px + var(--inputs-border-width));
}
.login button {
  font-size: 16px;
}
.login a[href="#login"] {
  font-size: 16px;
}
}

```

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

### **アカウントを作成する画面**

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

それぞれの対象箇所は下記となります。

**.register h1部分がアカウントを作成する**  
**.register .field label部分が名、姓、メール、パスワード**  
**.register button部分が作成する**

下記CSSは通常がスマホ用の表示、『@media screen and (min-width: 750px) {』以降がPC用の表示となります。

```markup
.register h1 {
  font-size: 20px;
}
.register .field label {
  font-size: 12px;
  top: calc(12px + var(--inputs-border-width));
}
.register button {
  font-size: 12px;
}
@media screen and (min-width: 750px) {
.register h1 {
  font-size: 32px;
}
.register .field label {
  font-size: 14px;
  top: calc(14px + var(--inputs-border-width));
}
.register button {
  font-size: 14px;
}
}

```

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

カスタムCSSには文字数制限があるため、他のCSSを追加していて追加できない場合は、  
管理画面 \> コード編集より、base.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 28, 2023, 11:31am UTC](https://community.shopify.com/t/topic/227717/3 "2023-06-28T11:31:00Z")

</div>

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

変更出来ました！

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