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

vrneuman
HubSpot Employee

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

 

Horizontal Spacerモジュールを使用する

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

 

カスタム CSS を使用する

  • HubSpotアカウントにて、[マーケティング] > [ファイルとテンプレート] > [デザインツール]の順に進みます。
  • ファインダーで、フォルダの中からCSS ファイル探し、クリックして選択します。
  • 以下のコードを追加すると、ウェブサイト全体ですべてのフォームが中央揃えになります。
/* モジュール内のフォームを中央揃えし、幅の最大値を適用する */
form.hs-form,
.hs_cos_wrapper .form-title {
max-width: 600px;
display: block;
margin: 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;
display: block;
margin: 0 auto;
}

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

/*フォーム送信ボタンを中央揃えする */
center-form.hs_submit {
    text-align: center;
}
  • 右上の [変更を公開]をクリックします。

*本投稿は人間の翻訳者を介さない自動翻訳で提供されております。英語版はこちらからご覧になれます。

0 コメント

この投稿にはまだ回答がありません

この投稿にはまだ回答が寄せられていません。しばらく経ってからもう一度ご確認ください。また、役に立つ情報をご存じの場合はぜひ回答を投稿してください。

投稿に回答する

回答の仕方についてご不明な場合は、コミュニティーのガイドラインをご覧ください。

0件の返信