@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用の表示となります。
.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用の表示となります。
.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を検索いただき、一番最後の行に追加ください。
ご参考まで。
(キュー小坂)
