AI要約
スペーシングはフォームデザインの重要な部分であり、WPFormsでは、フィールド、タイトルなどの間のスペーシングは、サイト訪問者に最適なエクスペリエンスを提供するためにデフォルトで設定されています。
とはいえ、ウェブサイトはそれぞれユニークです。そのため、特定のスタイルに合わせてフィールド間のカスタムスペーシングを設定したい場合は、まさにここにたどり着きました。
この記事では、WPFormsでフィールド間のスペースを強制的に設定する方法をステップバイステップでご紹介します。ここでは少しコードを扱う必要がありますが、私の方法に従うために事前のコーディング知識は必要ありません。
WPFormsのフォームフィールド間のスペースを調整する方法
このガイドのすべてのスペーシング変更は同じ形状に従います。フォームのどの部分を移動したいかを決定し、一致するCSSをコピーしてから、変更が1つのページ、1つのフォーム、またはサイト上のすべてのフォームに影響するかどうかに基づいて貼り付け場所を選択します。
ステップ1：WPFormsプラグインをインストールする
新しく始める方にとって、WPFormsは2,100以上の既製のテンプレートを備えたドラッグアンドドロップフォームビルダーなので、通常は空のキャンバスからではなく、必要なものに近いものから始めることができます。
以前に作成したことがない場合は、シンプルな連絡フォームの作成に関するこのガイドが最も簡単な方法です。この特定のジョブでWPFormsを最も気に入っている点は、コードに触れる前にどれだけ多くのことを変更できるかということです。
ビジュアルスタイルコントロールは、色、境界線、フィールドサイズ、コンテナのパディングを処理し、これらは人々がCSSを必要とすると想定している驚くべき量のことをカバーしています。
開始するには、Proライセンスを購入してください。次に、ウェブサイトにWPFormsをインストールします。ヘルプが必要な場合は、WordPressにプラグインを追加する方法の手順に従ってください。
以下の例では、この既製のアンケートフォームテンプレートを使用しています。これは、スペーシングの変更を明らかにするのに十分なフィールドを備えています。
ステップ2：まず組み込みのスペーシングコントロールを試す
CSSを記述する前に、ビジュアルコントロールがすでに目的どおりに機能するかどうかを確認する価値があります。フォームを開き、ビルダーで**設定 » テーマ**に移動するか、ブロックエディター内のフォームをクリックして、そこで同じパネルを開きます。
これらの設定のうち3つはスペーシングを直接変更します：
- **フィールドスタイル » サイズ:** これはフィールドの高さを変更し、ここではより有用なラベルとその入力の間のギャップを変更します。**小**、**中**、**大**の間で切り替わります。
- **ラベルスタイル » サイズ:** ラベルのテキストサイズを調整し、各ラベルがフィールドの上に占めるスペースをシフトします。
- **コンテナスタイル » パディング:** フォームの外側の端の内側のスペースを設定します。フォームが背景や境界線に押し付けられているように感じるときにそれを増やします。
ただし、正直な制限をここに示しますが、これらのコントロールのいずれも、フィールド行と次のフィールド行の間の垂直ギャップを設定しません。これは人々が変更したい最も一般的なことです。
そのギャップは各フィールドの上下で15pxに固定されており、それを移動する唯一の方法はCSSです。組み込みコントロールで十分な場合は、ここで停止できます。行自体がまだきつすぎるか緩すぎる場合は、読み続けてください。
ステップ3：変更したいスペーシングのCSSをコピーする
以下の各スニペットは2つの形状で提供されます。1つはサイト上のすべてのWPFormsフォームに適用され、もう1つはIDで単一のフォームをターゲットにします。これは、1つのフォームが他のフォームとは異なるスペーシングを必要とする場合に役立ちます。
フォームのIDを見つけるには、**WPForms » すべてのフォーム**に移動し、フォーム名の上にカーソルを合わせます。または、特定のフォームを開き、埋め込みをクリックして、ビルダーから直接フォームのショートコードをコピーすることもできます。
WPFormsはこれらの要素に独自のスタイルを適用するため、値が優先されるには`!important`が必要になることがよくあります。ここでは本当に必要な場所にスニペットを含めました。
フィールド間のスペース（垂直ギャップ）
これがほとんどの人が求めているものです。WPFormsは各フィールドに上下15pxのパディングを適用するため、隣接するフィールドは30px離れて配置されます。私のアンケートフォームでのデフォルトの間隔は次のとおりです。
すべてのフォームで変更するには：
.wpforms-container .wpforms-field {
padding-top: 30px !important;
padding-bottom: 30px !important;
}両方の値を大きくするとフィールドが均等に離れ、小さくするとフォームが引き締まります。片方向にのみ間隔を広げたい場合は、`padding-top`のみを設定し、下はそのままにします。
単一のフォームの場合は、IDを追加します：
#wpforms-2294 .wpforms-field {
padding-top: 30px !important;
padding-bottom: 30px !important;
}フォームタイトルの下のスペース
デフォルトでは、ページのH1はフォーム内ではなく、フォームの上に配置されます。WPFormsは、最初のフィールドが始まる前にフォームタイトルの下に35pxを配置します。
これはフィールド間の間隔よりもかなり大きいですが、意図的です。タイトルはヘッダーであり、ヘッダーはそれ以下のコンテンツよりも多くのスペースを必要とするためです。
タイトルをフォームコンテナ内に配置したい場合は、エディターで埋め込みフォームをクリックし、右側のパネルで**タイトルを表示**をオンにします。
その場合、タイトルが二重に表示されないように、ページのH1を非表示にすることをお勧めします。H1をクリックして表示される目のアイコンを押します。
変更前のタイトルの間隔は次のとおりです。
これを制御するには、コンテナのパディングをゼロにし、タイトルのマージンを実際に必要な値に設定します。
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}
.wpforms-container-full .wpforms-title {
margin-bottom: 15px !important;
}`padding-bottom`を0のままにし、`margin-bottom`のみを変更します。
これを15pxに設定すると、タイトルと最初のフィールドの間隔が、フィールド同士の間隔と同じになります。
フォーム全体を均一なブロックとして読みやすくしたい場合にすっきり見えます。私のアンケートフォームでの結果は次のとおりです。
両方のセレクターに`#`を使用した単一フォームバージョン：
#wpforms-2294 .wpforms-head-container {
padding-bottom: 0 !important;
}
#wpforms-2294 .wpforms-title {
margin-bottom: 15px !important;
}ラベルとそのフィールドの間のスペース
この間隔はフィールドの間隔のように見えるため、人々を混乱させますが、別々に制御されています。
最新のマークアップでは、WPFormsは`--wpforms-field-size-input-spacing`というCSS変数でこれを設定しており、デフォルトは15pxです。
変数をオーバーライドすることは、WPForms独自のサイジングロジックを維持するため、ラベルのマージンを直接操作するよりもクリーンです。
.wpforms-container-full {
--wpforms-field-size-input-spacing: 8px;
}これを約8pxに下げると、各ラベルが入力フィールドに近づき、視覚的に両者を結びつけます。
これは長いフォームで非常に役立ちます。タイトでラベルとフィールドの間隔が狭く、行間の間隔が広いと、どのラベルがどのボックスに属しているかを判断するのがはるかに簡単になります。
これにCSSを触りたくない場合は、ステップ2の**フィールドスタイル » サイズ**コントロールで同じ変数を変更できます。
横並びフィールド間のスペース
レイアウトフィールドまたはWPFormsの列クラスを使用してフィールドを隣り合わせに配置すると、20pxのガターで区切られます。これを変更するには少し注意が必要です。ガターは2つの値から構築されており、それらが一致する必要があります。
各半分の幅の列は`calc(50% - 10px)`に20pxの左マージンが設定されています。マージンのみを変更すると、列がその行からはみ出します。両方を一緒に調整します。
.wpforms-container .wpforms-one-half {
width: calc(50% - 20px) !important;
margin-left: 40px !important;
}ルールは、幅の引き算がガターの半分になるということです。40pxのガターは20pxの引き算、30pxのガターは15pxの引き算になります。
そもそもこれらの行を構築する方法については、複数列フォームレイアウトのガイドを参照してください。
送信ボタンの上のスペース
最新のマークアップは、独自の変数--wpforms-button-size-margin-topで送信ボタンの上部マージンを制御します。これはデフォルトで10pxに設定されており、私のフォームでは次のようになります。
そのため、他のすべてをそのままにして、独自の値を設定できます。
.wpforms-container-full {
--wpforms-button-size-margin-top: 30px;
}通常、ボタンにフィールドよりも多くのスペースを与えるのは正しい判断です。これにより、アクションが入力されているものから分離され、違いがすぐにわかります。
余分なスペースの削減または削除
さて、上記のすべては逆方向に機能し、ギャップを閉じることは、ギャップを開くことと同じくらい一般的な要求です。行を引き締めるには、フィールドのパディングをデフォルトの15pxより小さくします。
.wpforms-container .wpforms-field {
padding-top: 5px !important;
padding-bottom: 5px !important;
}戦っているギャップがフォーム内ではなく、フォームとその周囲のコンテンツの間にある場合、原因は通常フィールドではなくコンテナです。コンテナのパディングをゼロに設定し、タイトルの間隔を削除します。
.wpforms-container-full {
--wpforms-container-padding: 0px;
}
.wpforms-container-full .wpforms-head-container {
padding-bottom: 0 !important;
}あまりにもタイトにしすぎないように注意してください。行がラベルとそのフィールドの間隔よりも近くなると、人々はどのラベルがどの入力に対応しているかを誤読し始め、苦情ではなく誤ったデータとして表示されます。各フィールドに少なくとも8pxのパディングを維持することをお勧めします。
ステップ4：CSSを追加する場所を選択する
同じCSSでも、貼り付ける場所によって動作が異なり、適切な場所を選ぶことで、すべてのページで繰り返し記述したり、そのままにしておきたいフォームのスタイルを誤って変更したりすることを避けることができます。
| どこに追加するか | 何に影響するか |
|---|---|
| WPFormsビルダー | そのフォーム、どこに埋め込まれても |
| ブロックエディター | そのページにあるその埋め込み |
| WPCode | あなたのサイトのすべてのフォーム |
方法1：WPFormsビルダー
フォームを開き、設定 » テーマに移動してから、高度な設定タブに切り替えます。そこにカスタムCSSボックスがあります。スニペットを貼り付けてから、保存をクリックします。
ここに追加されたスタイルはフォーム自体に保存されるため、すべてのページに追従します。これは、WPFormsブロック、ショートコード、またはDiviモジュールで埋め込んでも同様です。
ほとんどの人にとって、これは正しいデフォルトです。なぜなら、ページごとに1回の変更ではなく、1回の変更で済むからです。オプションの全セットは、フォームビルダーでフォームをスタイリングするドキュメントでカバーされています。
方法2：ブロックエディター
ページまたは投稿のフォームブロックをクリックして右側のスタイリングパネルを開き、高度な設定セクションを開いて、そこにCSSを追加します。
ページを公開または更新して適用します。ここでの違いはリーチです。ブロックエディターに追加したものはすべて、その特定の埋め込みにのみ影響します。
連絡先フォームをサイト全体で実行し、専用の連絡先ページで広々とした間隔を取り、サイドバーでよりタイトな間隔を取ることができます。フォームを複製する必要はありません。
このパネルはWPFormsブロックで埋め込まれたフォームにのみ表示されることに注意してください。ショートコードでドロップされたフォームには表示されません。ブロックエディターでフォームをスタイリングするに関するドキュメントで、残りのコントロールを確認してください。
方法3：WPCode（サイト全体）
上記の2つの方法は、単一のフォームまたは単一の埋め込みにスコープされています。これはほとんどの場合に望ましいことです。しかし、多数のフォーム全体で間隔を標準化したい場合は、サイト全体で一度設定する方が、それぞれを開くよりも効率的です。
サイト全体のCSSはテーマの変更にも耐えますが、テーマのカスタマイザーを通じて追加されたCSSはそうではありません。WPCodeはこれを簡単にする無料のプラグインです。WordPress管理メニューから、プラグイン » 新規追加に移動します。
WPCodeを検索し、結果内の横にある今すぐインストールをクリックします。インストールが完了すると、ボタンが有効化に変わります。それをクリックします。
WPCodeを有効にした状態で、コードスニペット » + スニペットを追加に移動します。
カスタムコードを追加（新規スニペット）オプションの下にあるスニペットを使用をクリックします。
スニペットに名前を付け、コードタイプのドロップダウンからCSSスニペットを選択します。これは重要です。WPCodeは、コードがPHPのままになっていると正しく適用しません。
CSSを貼り付け、コードプレビューの下にある挿入設定はデフォルトのままにします。このガイドのどのスニペットも、これ以上の設定は必要ありません。
スニペットを保存し、右上のトグルで有効化します。そのトグルがオンになるまでサイトに何も変更は表示されません。これはほとんどの人が最初に引っかかる点です。
これはすべてのフォームに適用されるため、一部を除外したい場合は、スニペットのフォームIDバージョンを使用してください。特定のフィールドに独自のクラス名を追加して、それらをターゲットにすることもできます。これはカスタムCSSクラスのドキュメントで説明されています。
フォームフィールド間にどれくらいのスペースを置くべきですか？
主な原則は近接性です。つまり、ラベルはそのフィールドに、そのフィールドが次のフィールドにあるよりも近くにあるべきです。
どこでも均等な間隔があると、どのラベルがどのボックスに属しているのかを推測することになり、まさにそのためにラベルとフィールドの変数はデフォルトで15pxになり、隣接するフィールドは30px離れています。
デザインシステムにおける一般的なガイドラインは、フィールドの高さを50％から75％の間隔で配置することです。WPFormsフィールドは、中サイズで高さ43pxなので、推奨範囲は約21pxから32pxになります。
30pxのデフォルトは快適に収まるため、何かを変更すべきかどうか不明な場合は、おそらく変更する必要はありません。考慮すべき点がいくつかあります。
- セクションにフィールドよりも多くのスペースを確保する：フォームに連絡先詳細や支払い詳細などの明確なグループがある場合は、グループ間のギャップを2倍または3倍にして、構造が一目でわかるようにします。
- モバイルとデスクトップの一貫性を保つ：WPFormsはすでにレスポンシブな間隔を処理しているため、本当に壊れている場合を除き、モバイル固有の間隔を追加することは避けてください。
- 一度に1つの値だけ変更してください：スペーシングの問題は、通常5つではなく1つの原因です。フィールドのパディングを調整し、フォームを確認してから次に進んでください。
デザイン面については、フォームデザインのベストプラクティスに関するガイドで、レイアウトとフィールドの順序についてさらに詳しく説明しています。
WPFormsのフォームスペーシングに関するFAQ
WPFormsのフォームスペーシングは、サポートでよく話題になります。通常、間隔が広すぎたり、CSSが反映されないといった問題です。ここでは、最もよく見られる質問をいくつか紹介します。
WPFormsのフィールド間のスペースを減らすにはどうすればよいですか？
フィールドのパディングをデフォルトの15pxより小さくしてください。.wpforms-container .wpforms-field { padding-top: 5px !important; padding-bottom: 5px !important; }を使用し、そこから調整してください。ラベルが入力フィールドに視覚的に接続されたままになるように、少なくとも8pxは確保してください。
なぜフォームフィールド間にこれほど多くのスペースがあるのですか？
各フィールドには上下に15pxのパディングがあり、隣接するフィールドはテーマが何かを追加する前に30px離れています。このギャップがそれよりも大きく見える場合、テーマはおそらくフォームコンテナ内のフォーム要素または段落に独自の余白を適用しています。
CSSを使用せずにフォームのスペーシングを変更できますか？
一部可能です。フィールドスタイル » サイズはラベルとフィールドの間隔を変更し、コンテナスタイル » パディングはフォームの端の内側のスペースを変更します。どちらもコードなしで行えます。フィールド行間の垂直方向の間隔には視覚的な制御がないため、CSSが必要です。
同じ行にある2つのフィールドの間にスペースを追加するにはどうすればよいですか？
横並びのフィールドは、calc()幅とそれに一致する左マージンから作成された20pxのガターを使用します。幅の引き算をガターの半分に保ちながら両方を一緒に変更してください。そうしないと、列がその行からはみ出してしまいます。
スペーシングCSSが機能しないのはなぜですか？
多くの場合、フォームIDセレクタの#が欠落しているか、WPForms独自のスタイルが優先されています。セミコロンの前に!importantを追加し、セレクタがフォームと一致していることを確認してください。機能しないCSSのトラブルシューティングに関するガイドで、残りをカバーしています。
WPFormsでフォームを中央揃えするにはどうすればよいですか？
それはスペーシングの問題というよりコンテナの幅の問題なので、ここにあるスニペットでは対応できません。通常のアプローチは、margin: 0 autoを使用してフォームコンテナにmax-widthを設定することです。
次に、フォームデザインの残りをカスタマイズする
フィールドとラベルのスペーシングは、CSSが1〜2行で役立つフォームデザインの数少ない部分の1つですが、それ以外はほとんどすべて、先ほど使用したのと同じ設定 » テーマパネルでポイント＆クリックで操作できます。ブロックエディターを使用したフォームのスタイリングに関するガイドで、すべてのコントロールを詳しく説明しています。
スペーシングだけでなくレイアウトも再考する場合は、フォームレイアウトのデザインで列構造とフィールド順序について説明し、WordPressで問い合わせフォームをスタイリングする方法は、特に問い合わせフォームに関する次の読み物として役立ちます。
フォームの作成準備はできましたか？最も簡単なWordPressフォームビルダープラグインで今日から始めましょう。WPForms Proには多くの無料テンプレートが含まれており、14日間の返金保証が付いています。
この記事がお役に立った場合は、FacebookとTwitterでフォローして、WordPressの無料チュートリアルやガイドをさらにご覧ください。
