AForms > スタイル拡張の設定項目

スタイル拡張の設定項目

AFormsスタイル拡張の設定項目をすべて説明します。AFormsStyler v1.1の情報です。

2021/09/16公開　2022/02/18更新

もくじ

共通

様々な箇所で共有される設定項目です。

#	項目名	説明
1	基本前面色	基本となる描画色です。文字や枠はだいたいこの色になります。
2	基本背景色	基本となる背景色です。
3	もう1つの背景色	2番目の背景色です。基本背景色と視覚的な差を作るときに使われます。
4	フォーカス色	フォーカスが当たった入力部品はこの色で装飾が付きます。マウスホバー時の装飾にもこの色が使われます。
5	アクセント色	文字を強調するときなどに使われます。
6	ボタンの色	普通のボタンの地の色です。
7	主要ボタンの色	主要なボタンの地の色です。ボタンの中の文字は反転して基本背景色になります。
8	エラーの色	エラーを表現する描画色です。エラーメッセージがこの色になる他、エラーのある入力部品の枠でこの色が使われます。
84	セクションの順序	明細セクションとお客様属性セクションの順序です。「明細が先」「お客様属性が先」から選べます。 AFormsStyler v1.1で追加されました。
9	余白	フォーム全体の余白の広さで、狭く・標準・広くの3つから選べます。 #83と同じ設定項目です。
10	角の丸み	様々な部品に、角の丸みをつけるかどうかです。
11	ボタンを持ち上げる	ボタンに影を付けて浮いているように見せます。
12	ボタンを曲げる	ボタンの地にグラデーションをかけて、曲面になっているように見せます。

フロー

フロースタイルの設定項目です。

#	項目名	説明
13	ブレークポイント幅	選択肢の画像は、PC表示時とスマホ表示時で大きさを変えられます。ブレークポイント幅は「ウィンドウの幅がこの値以下だったらスマホとして扱う」という意味の境界値です。ウィンドウの幅がここに書いた数字以下の場合、スマホ扱いになります。 #31と同じ設定項目です。
14	選択肢を1行で並べる	選択項目の選択肢は、画面に収まらない場合は横スクロールバーが出て必ず1行で並ぶ、というのが既定のレイアウト方法です。 1行で並べないようにすると、複数行に渡って並ぶようになります。
15	空の画像は領域を切り詰める	選択項目の選択肢で、画像が指定されてないものは、画像の領域を確保せずに切り詰めるようになります。 #32と同じ設定項目です。
16	画像の幅(PC)	選択肢の画像の、PC表示時の幅です。
17	画像の高さ(PC)	選択肢の画像の、PC表示時の高さです。 #34と同じ設定項目です。
18	画像の幅(MB)	選択肢の画像の、スマホ表示時の幅です。
19	画像の高さ(MB)	選択肢の画像の、スマホ表示時の高さです。 #36と同じ設定項目です。
20	名前の揃え	選択肢の名前を左右中央のどこで揃えるかです。
21	注意書きの揃え	選択肢の注意書きを左右中央のどこで揃えるかです。
22	価格の揃え	選択肢の価格を左右中央のどこで揃えるかです。通常価格にも適用されます。
23	価格ブロック	選択肢の価格ブロックをどのように表示するかです。
24	リボン1の背景色	#41と同じ設定項目です。
25	リボン1の前面色	#42と同じ設定項目です。
26	リボン2の背景色	#43と同じ設定項目です。
27	リボン2の前面色	#44と同じ設定項目です。

ウィザード(地)

ウィザードスタイルのときの、ウィザードダイアログが出る前の表示の設定項目です。

#	項目名	説明
28	地の高さ	「注文を始める」ボタンを置くスペースの高さです。このボタンは目立たせる必要があるので、かなり大きめの領域を確保してあります。

ウィザード

ウィザードスタイルのときの、ダイアログの設定項目です。

#	項目名	説明
29	ダイアログの幅	最大幅です。スマホ表示の場合はここで指定した幅よりも狭くなる場合があります。
30	ダイアログの高度	正確には、ダイアログの外側にある真っ白な背景が対象です。CSSのz-indexです。
31	ブレークポイント幅	選択肢の画像は、PC表示時とスマホ表示時で大きさを変えられます。ブレークポイント幅は「ウィンドウの幅がこの値以下だったらスマホとして扱う」という意味の境界値です。ウィンドウの幅がここに書いた数字以下の場合、スマホ扱いになります。 #13と同じ設定項目です。
32	空の画像は領域を切り詰める	選択項目の選択肢で、画像が指定されてないものは、画像の領域を確保せずに切り詰めるようになります。 #15と同じ設定項目です。
33	画像の幅(PC)	選択肢の画像の、PC表示時の幅です。
34	画像の高さ(PC)	選択肢の画像の、PC表示時の高さです。 #17と同じ設定項目です。
35	画像の幅(MB)	選択肢の画像の、スマホ表示時の幅です。
36	画像の高さ(MB)	選択肢の画像の、スマホ表示時の高さです。 #19と同じ設定項目です。
37	名前の揃え	選択肢の名前を左右中央のどこで揃えるかです。
38	注意書きの揃え	選択肢の注意書きを左右中央のどこで揃えるかです。
39	価格の揃え	選択肢の価格を左右中央のどこで揃えるかです。通常価格にも適用されます。
40	価格ブロック	選択肢の価格ブロックをどのように表示するかです。
41	リボン1の背景色	#24と同じ設定項目です。
42	リボン1の前面色	#25と同じ設定項目です。
43	リボン2の背景色	#26と同じ設定項目です。
44	リボン2の前面色	#27と同じ設定項目です。

見積

#	項目名	説明
45	ブレークポイント幅	見積表はPC表示とスマホ表示でレイアウトが変わります。ウィンドウの幅がここに書いた数字以下の場合、スマホ扱いになります。
46	タイトルを表示	見積表の上にタイトルを表示します。
47	番号カラムを表示	見積表に番号カラムを表示します。
48	カテゴリーカラムを表示
49	通常価格カラムを表示
50	単価カラムを表示
51	数量カラムを表示
52	税区分カラムを表示
53	料金カラムを表示
54	数量カラムの配置	数量カラムを表示する位置を選べます。
55	税区分カラムの配置	税区分カラムを表示する位置を選べます。
56	通常価格を小計に表示	通常価格の集計結果を小計行に表示します。

サイドバー

見積表をサイドバーに表示するときの設定です。

#	項目名	説明
57	サイドバーのセレクタ―	見積表をサイドバーに表示したい場合は、ここにサイドバー要素のCSSセレクタ―を入力してください。
58	上辺のオフセット	見積表はページのスクロールに応じてウィンドウの上辺にくっつきます。が、サイトに固定ヘッダがある場合などは、ウィンドウの上辺にくっつくのは不適切な場合あります。ここの数字を変えることで、ウィンドウの上辺から少し離れた位置に見積表をくっつけることができるようになります。
59	高度	CSSのz-indexです。
60	ブレークポイント幅	見積表のサイドバー表示は、デスクトップなど幅広のウィンドウでのみ使えます。ウィンドウ幅がこの値以下の場合は、サイドバーへの表示は行われません。ここの数字はサイト側のブレークポイントに合わせると良いでしょう。
61	影を付ける
62	タイトルを表示	見積表の上にタイトルを表示します。
63	明細行を表示	チェックをはずすと明細行が表示されなくなります。
64	番号カラムを表示
65	カテゴリーカラムを表示
66	通常価格カラムを表示
67	単価カラムを表示
68	数量カラムを表示
69	税区分カラムを表示
70	料金カラムを表示
71	数量カラムの配置	数量カラムを表示する位置を選べます。
72	税区分カラムの配置	税区分カラムを表示する位置を選べます。
73	小計行などを表示	チェックをはずすと、集計のうち小計と税額が表示されなくなり、合計だけが表示されるようになります。
74	通常価格を小計に表示	通常価格の集計結果を小計行に表示します。

属性

お客様の属性。

#	項目名	説明
75	ブレークポイント幅	PC表示とスマホ表示でレイアウトが変わります。ウィンドウの幅がここに書いた数字以下の場合、スマホ扱いになります。
76	表のように表示	各項目を表のように表示します。罫線や背景色の装飾が入ります。
77	無装飾の見た目	入力部品からAForms固有の装飾を取り除きます。標準的・トラディショナルな見た目になります。
78	選択時にアニメーション
79	フォーカス時にアニメーション
80	「任意」マークの表示
81	名前の前にマークを表示
82	マークを塗り潰す
83	余白	フォーム全体の余白の広さで、狭く・標準・広くの3つから選べます。 #9と同じ設定項目です。

3 0