4. 構成テンプレートとフォームCSSの使い分け
「構成テンプレート」と「フォームCSS」それぞれのCSSの使い分けを説明します。
「フォームCSS」と「構成テンプレート」のCSSの前提
SPWForm ではエディタの中のHTMLは div.spw-formというラッパーdivの中に構成されます。
さらに、このSPWFormTemplatesアドオンのHTMLのテンプレートでは、すべてのパーツを、div.my-form というラッパーdiv内に構成し、テンプレートに含まれるCSSはすべて、「div.spw-form div.my-form *」からの指定で定義しています。
例：
- div.spw-form div.my-form input { }
- div.spw-form div.my-form textarea { }
- div.spw-form div.my-form .spwf-reqire { }
など。
div.my-formでは、font-sizeがブラウザ幅768px以上の時 16px、それ以下の時14pxと定義しています。そして、各フォーム要素は、基本的にそのフォントサイズからの相対サイズとなっています。
「フォームCSS」と「構成テンプレートのレイアウトCSS」
テンプレートには２種のCSSが存在します。これはそれぞれの役割で切り分けられています。
その役割をご説明します。
「フォームCSS」のCSS
このCSSは「独自CSS」の中の先頭に保存され、「/* SPWForm Form CSS Block */」というコメントで囲まれます。
もし、「独自CSS」の中に既にこのコメントで囲まれた箇所があればその中身を書き換えます。
この「フォームCSS」では入力フォームの枠の色やpaddingの幅、文字の色やサイズ感、ラジオボタンのデザインやチェックボックスのチェックの形など、それぞれのフォームのパーツを統一感を持ってデザインしています。
例えばテキストエリアの入力文字とテキストフォームやラジオボタンのラベルの文字の大きさなどのバランスは重要ですので、それらの文字のサイズなどもこの「フォームCSS」で管理しています。
基本的にショートコードで書き出されるフォームに関するCSSが定義されてると考えれば分かり易いと思います。
「構成テンプレートのレイアウトCSS」
このCSSは「独自CSS」の中の末尾に保存され、「/* SPWForm Form Layout CSS Block */」というコメントで囲まれます。
もし、「独自CSS」の中に既にこのコメントで囲まれた箇所があればその中身を書き換えます。
このCSSは「構成テンプレート」の中のショートコード以外のHTML部分に関するCSSに限定して作成されます。
フォームの見出しとフォーム自体の間隔は並び、位置関係などが代表的です。h2、h3、h4などは基本の文字サイズからの相対サイズで指定されます。
ユーザー毎のCSSへのカスタマイズ
「独自CSS」では上記２種のテンプレートをに関しては「/* SPWForm Form xxx Block */」のそれぞれのブロックに囲まれていない箇所に関しは手を加えないようになっています。
ですので、テンプレートのCSSをベースにしてCSSをさらに環境に応じてカスタマイズする場合、それぞれのCSSを直接変更するより、末尾の「レイアウトCSS」の後に独自のCSSの領域を作成し、そちらで指定する事をお勧めします。そうしておく事で後で「フォームCSS」を入れ替えたとしてもカスタマイズしたCSSは保持されます。
※ ただし、「構成テンプレート」を入れ替えると、エディタ内のショートコードも含め全てテンプレートの内容に上書きされしまいますのでご注意ください。
CSS追記後の確認
フォームCSSは独自CSS欄へ追記されます。既存CSSと同じセレクタがある場合、後に書かれた指定が優先されることがあります。意図しない表示になったときは、独自CSS欄の重複を確認してください。