AForms > スタイルカスタマイザの設定項目

スタイルカスタマイザの設定項目

AForms Eats PROではスタイルカスタマイザで注文フォームのデザインを変更できます。この記事では、その設定項目を説明します。

AForms Eats PROには、注文フォームのデザインをカスタマイズできる「スタイルカスタマイザ」が付いています。
この記事では、スタイルカスタマイザでデザイン変更できる項目を説明します。
記載内容はAForms Eats PRO v1.2.0に基づきます。

もくじ

全般

項目名型初期値説明
ブレーク幅数値782PC表示とスマホ表示を切り替える境界となる幅をピクセル値で指定します。
ウィンドウの幅がここで指定した数値以下だったら、スマホ表示になります。
ダークテーマ真偽値偽白っぽいページか黒っぽいページかを指定します。
AForms Eatsのデザインでは、設定項目で指定された色を、他の色と混ぜ合わされたり明るさを変えたりして使います。
全体が白っぽいか黒っぽいかで、色の混ぜ合わせ方が変わります。
基本色カラー#111111基本となる文字色。初期値は黒です。
基本背景色カラー#FFFFFF基本となる背景色。初期値は白です。
もう1つの背景色カラー#F0F0F02つ目の背景色。初期値は薄いグレーです。
主要色カラー#EB4166目立たせる箇所に使う色。初期値は濃いピンクです。
エラー色カラー#DD4422エラーなどで使う色。初期値は赤です。
角丸数値0ボタンや入力ボックスの角の丸みの幅をピクセル値で指定します。
ボタンを浮かせる真偽値偽ボタンに影を付けるかどうか。

商品

項目名型初期値説明
フォームの最大幅数値600フォームの最大幅をピクセル値で指定します。右側に表示される明細（カートの中身）を含まない幅です。
明細はフォームの右側に表示されるようになっています。明細が画面からはみ出てしまう場合はこの設定を変えると改善するかもしれません。
フォームの内の余白数値0フォームの内側の余白（パディング）をピクセル値で指定します。
ナビバーの高さ数値60フォームの上部に表示されるナビゲーションバー（グループの一覧）の高さをピクセル値で指定します。
カートボタンのサイズ数値80スマホ表示で出てくるカートボタンのサイズ（幅および高さ）をピクセル値で指定します。
写真の幅数値292商品写真の幅をピクセル値で指定します。
商品は横に並びますので、この数字を小さくすると商品を横に3つ以上並べることもできます。
写真の高さ数値250商品写真の高さをピクセル値で指定します。

明細

「明細」とは、フォームの右側に表示されるカートの中身と総額の部品です。

項目名型初期値説明
明細の幅数値250明細の幅をピクセル値で指定します。
明細の外の余白数値20フォームと明細の間の余白をピクセル値で指定します。
明細はフォームの右側に表示されるようになっています。

お客様の属性

項目名型初期値説明
表形式で表示真偽値偽チェックを入れると、お客様属性のエリアが表形式のようなスタイルになります。
チェックボックスから装飾を除去真偽値偽チェックを入れると、チェックボックスやラジオボタンからAForms独自の装飾が取り除かれ、標準的な見た目になります。
「任意」タグを表示真偽値偽「必須」「任意」のタグについて。
チェックを入れると、「必須」タグだけでなく「任意」タグも表示されるようになります。
タグを前に表示真偽値偽「必須」「任意」のタグについて。
チェックを入れると、フィールド名の前にタグが表示されるようになります。
タグを塗りつぶす真偽値偽「必須」「任意」のタグについて。
チェックを入れると、タグが塗り潰されて装飾的になります。
選択時のアニメを無効化真偽値偽チェックボックスやラジオボタンは選択時にアニメーションするようになっています。チェックを入れると、これが無効化されます。
フォーカス時のアニメを無効化真偽値偽フォームの各部品はフォーカス時にアニメーションするようになっています。チェックを入れると、これが無効化されます。
1 0