フィールド入力画面のスタイリング


概要

Typesプラグインのカスタムフィールドグループ編集画面では、CSSエディター(Styling Editor)を使ってカスタムフィールドの外観をカスタマイズすることができます。ユーザーフィールドについても同様にカスタマイズできます。このページでは、Styling Editorの使い方について簡単に説明します。

Styling Editorの場所

フィールドグループ編集画面の上の方に「Styling Editor」セクションがあります。「Open style editor」ボタンをクリックするとStyling Editorが展開します。

「Open style editor」ボタンをクリック

以下では、スタイルエディター内の各セクションごとに説明していきます。

 

Admin styles for fieldsセクション

Admin styles for fields欄では2つのモードを切り替えることが出来ます。「ReadOnly」で表示されるHTMLは、フィールド編集が許可されていないユーザー向けで、フィールドと値のみを表示し、編集(入力)用のフォームは表示されません。「Edit_mode」で表示されるHTMLは、フィールド編集が許可されているユーザー向けで、フィールド値の入力と編集を行うための完全なフォームが表示されます。このオプションを切り替えることで、ユーザーの権限に応じた外観を確認できます。各モードで使用するHTMLとCSSは異なります。

Editモード

Read Onlyモード

 

Field group HTMLセクション

Field group HTMLセクションでは、上記Admin styles for fieldsセクションで選択したモードに応じたHTMLが表示されます。なお、このセクションでHTMLを編集することはできません。このセクションで各要素のCSSクラスを確認し、下のYour CSSセクションで編集を行います。

 

Your CSSセクション

Your CSSセクションは、フィールドをデザインするCSSを実際に入力する場所です。上のField group HTMLセクションでフィールドごとのCSSクラスを確認します。全てのフィールドには、汎用のクラスと、特定のクラスがあることに注意して下さい。例として、各フィールドの説明欄の背景を黄色にしてみます。次のようにCSSを指定します。

cssを記述したところ

 

Field group previewセクション

Field group previewセクションでは、Your CSSセクションで入力したCSSによってフィールドがどのように表示されるかを確認することができます。表示を更新するには、「Update preview」ボタンをクリックします。希望のデザインになったら、「OK」ボタンをクリックして保存します。

プレビューで確認できる