ブロックのテーマとスタイルの設定

この記事は、Gravity Forms 公式ドキュメントを翻訳、または加筆したものです。

Block Themes and Style Settings

バージョン2.7 の目玉機能はこれと言って過言ではないでしょう。
まだまだ発展途上と言えるテーマフレームワークですが、今後が期待できそうです。

はじめに

バージョン 2.7 で導入された Gravity Forms のテーマ は、ブロックエディタ内でカスタマイズ可能な、フォームの外観と雰囲気を変える新しい簡単な方法を提供します。
テーマは新しいテーマフレームワークによって提供され、将来的には公式テーマやサードパーティテーマを追加で作成することが可能になります。

入門用のデフォルトテーマである Orbital は、シンプルかつスタイリッシュなフォームのベースとなります。
Gravity Forms ブロックの設定で Orbital を選択すると、外観のオプションを設定・変更できるようになります。

既存のフォームの外観を変更したくないですか？
デフォルトでは何も適用されず、既存のフォームに変更が加えられることはありません。
Orbital は、フォームのGravity Formsブロックの設定を変更することで特に有効にした場合のみ、フォームに適用されます。

テーマの選択

テーマを選択するには、フォームを含む投稿または固定ページを編集し、Gravity Forms ブロックをクリックします。エディタ画面の右側にある「Form styles（フォームスタイル）」をクリックして開き、「FORM THEME（フォームテーマ）」を探します。
FORM THEME で Orbital を選択することで新しいテーマを適用することができます。

テーマ設定

Orbital テーマには現在、少数の共通設定が含まれていますが、今後さらに追加される予定です。Orbital は、あなたのテーマからフォントを継承しますが、以下に概説する設定を使用して、他の多くのタイポグラフィー関連の設定を変更することができます。

Form Styles（フォームスタイル）

「Form Styles（フォームスタイル）」パネルには、前述のようにフォームテーマが選択されています。

Input Styles（入力スタイル）

「Input Styles（入力スタイル）」パネルでは、フォーム入力のサイズ、ボーダー半径、背景色、ボーダー色、文字色を変更することができます。

Label Styles（ラベルスタイル）

「Label Styles（ラベルスタイル）」パネルでは、フォームラベルのフォントサイズと文字色を変更することができます。

Description Styles（説明文スタイル）

「Description Styles（説明文スタイル）」パネルでは、フォームの説明文のフォントサイズや文字色を変更することができます。

Button Styles（ボタンスタイル）

「Button Styles（ボタンスタイル）」パネルでは、フォームボタンの背景色と文字色を変更することができます。
この設定は checkbox や radio などのフォームUI要素にも使用されます。

Preview（ライブプレビュー）

Gravity Forms ブロックは、エディタ画面内でフォームのライブプレビューを提供します。
ライブプレビューを有効にするには、Gravity Forms ブロックをクリックし、Advanced セクションを開いて Preview をオンに切り替えます。

テーマや他のプラグインに Gravity Forms 用のカスタムスタイルが含まれている場合、ライブプレビューはあなたのページで表示されるものと完全に一致しないことがあります。

制限事項

投稿者プロフィール

DoL（CMSラボ所長）DoL（CMSラボ所長）

CMS Laboの所長。
所員はまだない。

DoLは Director of Laboratories の略です。

最新の投稿

投稿者アーカイブ

• GravityForms2023年2月13日スパムハニーポットの機能強化
• GravityForms2023年2月10日ブロックのテーマとスタイルの設定
• GravityForms2023年2月9日Gravity Formsのテンプレートライブラリを利用する
• GravityForms2023年2月8日Gravity Forms セットアップウィザード