入力フォームの文字入力欄を大きくすることはできますか？

コマースクリエイター未利用店舗様専用の記事です

 

会員登録画面や、お届け先情報入力画面・お支払い方法選択画面にて、
入力欄を大きく表示することができます。

構築メニュー＞デザイン設定＞編集＞オリジナルCSS編集にて
CSSを記述することで、会員登録画面やお届け先情報入力画面、お支払い方法選択画面などの
入力欄を大きく表示することができます。

記述するCSS

下記より入力欄を大きくしたい各画面のCSSをコピーして、オリジナルCSSに追記してください。

会員登録画面

/* 会員登録画面の文字を大きく入力しやすくする */
.FS2_body_Member_MemberEntryEdit .userTable_01 input{font-size: 120%;}
.FS2_body_Member_MemberEntryEdit .userTable_01 select{font-size: 140%;}
.FS2_body_Member_MemberEntryEdit .FS2_birthdayDateYear{font-size: 140%;}
.FS2_body_Member_MemberEntryEdit .userTable_01 tr{font-size: 140%; height:40px; }
.FS2_body_Member_MemberEntryEdit .userTable_01 input{font-size: 130%; background-color:#FFFFCC;}
#FS2_body_Member input[name="gender"] {-webkit-transform: scale(1.3); transform: scale(1.3); margin-right:0.5em;}
#FS2_body_Member input[name="newsletter"] {-webkit-transform: scale(1.3); transform: scale(1.3); margin-right:0.5em;}
#FS2_body_Member input[name="htmlMail"] {-webkit-transform: scale(1.3); transform: scale(1.3); margin-right:0.5em;}

 

※文字の大きさを変更したい場合は、赤文字「140%」の数値を変更ください。

会員登録をせずに購入する際に、ゲスト購入者情報を入力する画面

/* ゲスト購入者情報入力画面の文字を大きく入力しやすくする */
.FS2_body_Cart_GuestEntry .userTable_01 input{font-size: 120%;}
.FS2_body_Cart_GuestEntry .userTable_01 select{font-size: 140%;}
.FS2_body_Cart_GuestEntry .FS2_birthdayDateYear{font-size: 140%;}
.FS2_body_Cart_GuestEntry .userTable_01 tr{font-size: 140%; height:40px; }
.FS2_body_Cart_GuestEntry .userTable_01 input{font-size: 140%; background-color:#FFFFCC;}
.FS2_body_Member_MemberEntryEdit .userTable_01 input{font-size: 130%; background-color:#FFFFCC;}
#FS2_body_Cart input[name="gender"] {-webkit-transform: scale(1.3); transform: scale(1.3); margin-right:0.5em;}
#FS2_body_Cart input[name="newsletter"] {-webkit-transform: scale(1.3); transform: scale(1.3); margin-right:0.5em;}
#FS2_body_Cart input[name="htmlMail"] {-webkit-transform: scale(1.3); transform: scale(1.3); margin-right:0.5em;}

※文字の大きさを変更したい場合は、赤文字「140%」の数値を変更ください。

お届け先指定画面

/* お届け先情報入力画面の文字を大きく入力しやすくする */
.FS2_body_Cart_DeliveryEdit .userTable_01 input{font-size: 120%;}
.FS2_body_Cart_DeliveryEdit .userTable_01 tr{font-size: 130%; height:40px; }
.FS2_body_Cart_DeliveryEdit .inputTableArea select{font-size: 140%; }
.FS2_body_Cart_DeliveryEdit .inputTableArea textarea{font-size: 140%; background-color:#FFFFCC}
.FS2_body_Cart_DeliveryEdit .userTable_01 input{font-size: 130%; background-color:#FFFFCC;}
.FS2_body_Cart_SettleEdit .userTable_01 input{font-size: 120%;}
.FS2_body_Cart_SettleEdit .userTable_01 tr{font-size: 130%; height:40px; }
.FS2_body_Cart_SettleEdit .inputTableArea select{font-size: 140%; }
.FS2_body_Cart_SettleEdit .inputTableArea textarea{font-size: 140%; background-color:#FFFFCC}
.FS2_body_Cart_SettleEdit .userTable_01 input{font-size: 130%; background-color:#FFFFCC;}

※文字の大きさを変更したい場合は、赤文字「130%」の数値を変更ください。

お支払い方法選択画面

/* お支払い方法選択画面の文字を大きく入力しやすくする */
.FS2_body_Cart_SettleEdit#fs2_deliveryNote{background-color:#ffffcc;font-size:120%;height:200px;}
.FS2_body_Cart_SettleEdit .userTable_01 textarea{font-size: 130%; background-color:#FFFFCC;}
.FS2_body_Cart_SettleEdit select {font-size: 140%; }
.FS2_body_Cart_SettleEdit .userTable_01 tr {font-size: 120%; height:40px; }
.FS2_body_Cart_SettleEdit .userTable_01 input {font-size: 140%; background-color:#FFFFCC;}

 

※文字の大きさを変更したい場合は、赤文字「120%」の数値を変更ください。

メルマガ申込停止ページ

/*メルマガ申込停止ページ情報入力エリアの文字を大きく入力しやすくする*/
.FS2_body_MailMagazine_MailMagazineEntry .userTable_01 tr {font-size: 120%; height:40px; }
.FS2_body_MailMagazine_MailMagazineEntry .userTable_01 input {font-size: 140%; background-color:#FFFFCC;}

※文字の大きさを変更したい場合は、赤文字「120%」の数値を変更ください。

ログインページ

/*ログインページ情報入力エリアの文字を大きく入力しやすくする*/
.FS2_body_Login_Login .userTable_01 th,
.FS2_body_Cart_GuestLogin .userTable_01 input{font-size: 120%; height:40px; }
.FS2_body_Login_Login .userTable_01 input,
.FS2_body_Cart_GuestLogin .userTable_01 input {font-size: 140%; background-color:#FFFFCC;}

※文字の大きさを変更したい場合は、赤文字「120%」の数値を変更ください。

 

※設定後、必ず各画面の確認をしてください。
タグの不足などで意図しない表示になる場合があります。
CSS設定後は会員登録やログインなどが正常通りできるか、必ず各画面の動作確認を行ってください。