HubSpot テンプレートのフォームを中央揃えにする。

水平方向スペーサーモジュールまたはカスタム CSS を使用すると、HubSpot テンプレートのフォームを中央揃えできます。

水平方向スペーサーモジュールを使用する。

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• ファインダーで編集するテンプレート名をクリックします。
• 右側のインスペクターで、[+追加]をクリックして、2 つの新しい水平方向スペーサーモジュールを挿入します。1つをフォームモジュールの左に、一つを右に挿入します。

カスタム CSS を使用する

• HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
• ファインダーで、フォルダでCSS ファイルを探し、エディターでクリックして選択します。
• 以下のコードを追加すると、ウェブサイト全体ですべてのフォームが中央揃えになります。

/* モジュール内のフォームを中央揃えし、幅の最大値を適用する */
form.hs-form,
.hs_cos_wrapper.form-title {
max-width:600px;
ディスプレイ: ブロック;
マージン:0 auto;
}

/*フォームモジュール内のフォームタイトルを中央揃えする*/
.hs_cos_wrapper.form-title {
text-align: center;
}

/*フォーム送信ボタンを中央揃えする*/
.hs_submit { 
    text-align:enter;
}

• 特定のフォームのみを中央揃えしたい場合は、テンプレートのフォームモジュールにカスタムクラスを追加し、そのクラスのモジュールにのみ適用されるようにCSS を調整します。たとえば、カスタムクラスcenter-formをテンプレートのフォームモジュールに追加すると、CSS は次のようになります。

/* モジュール内のフォームを中央揃えし、幅の最大値を適用する */
form.hs-form,
.center-form.hs_cos_wrapper.form-title {
max-width:600px;
ディスプレイ: ブロック;
マージン:0 auto;
}

/* フォームモジュール内のフォームタイトルを中央揃えする */
.center-form.hs_cos_wrapper .form-title {
text-align: center;
}

/*フォーム送信ボタンを中央揃えする */
center-form.hs_submit {
    text-align: center;
}

• 右上の [変更を公開]をクリックします。