コンタクトフォームのデザイン変更

Question

https://obot-ai.com/obot-download/

こちらのページのデザインを
中央よりにして、Width80%にしたいです。
必須の字や、文字ももっと大きくして分かりやすいコンタクトフォームを作成したいのですが
ご教示お願い致します。

Accepted Answer

ECマスターズの田辺です。

資料ダウンロードというのは題名のところでしょうか、
それともボタンの資料ダウンロードでしょうか。

題名の資料ダウンロードは、
資料ダウンロードを囲っているに対して
text-align: center;
を指定してください。

ボタンの資料ダウンロードは、
contact_style.cssの５０行目

.text-xs-center {
    margin: 0 auto;
    font-size: 1.2rem;
} 

の中に
text-align: center;
を加えてください。


また、obot aiサービス資料ダウンロードという文言や
その下のテキストも中央に揃えたい場合には
下記規則の追加をお願いいたします。

h1, h1 + p { text-align: center; }

Answer

ECマスターズの田中です。

諸々の設定は、スタイルシートを利用することで可能となります。
下記で解説する各規則は、
〜の中、もしくは外部スタイルシートファイル内にご記載ください。

> 中央よりにして、Width80%にしたいです。

body .table-contactform7 { width: 80%; }

上記規則を追加することで設定できますが、
現在既に、中央揃え・width90%の状態となっております。

項目名（お名前・法人名、など）の部分の横幅が
表組み全体の28%に設定されていることが原因で、
アンバランスになっているように見えていると思います。

一度、下記２行の規則を加えていただき、
背景が赤（項目名）と青（入力部分）の部分が
それぞれどれほどの横幅を取っているか、
ブラウザの横幅を拡縮させながらご確認いただきますようお願いします。

body .table-contactform7 th { background: red; }
body .table-contactform7 td { background: blue; }

> 必須の字や、文字ももっと大きく

まずは一度、下記規則を加えていただき、
数値を増減させて調整を行っていただきますようお願いします。

span.required-contactform7 { font-size: 2em; } /* 項目名 */
span.title-contactform7 { font-size: 2em; } /* 「必須」 */
span.wpcf7-form-control-wrap input { font-size: 2em; } /* 入力欄 */

Answer

ありがとうございます。
できました。

ちなみに資料ダウンロードも中央ぞろえにしたいのですが
教えてもらえますか？