はじめに
Contact Form 7で各項目の幅を変更する方法です。
通常はタブ内でサイズ指定をすれば変更可能ですが、Wordpressのテーマによっては無効化されて幅の調整ができない場合があります。
汎用的に設定するのであれば子テーマを作成し、幅の割合を指定する事で問題回避をする事が可能です。
手順
子テーマは作成済とします。
以下の例を用いて解説します。
.wpcf7 select[name="aaa"] {
width: 30%;
}
.wpcf7 input[name="bbb"] {
width: 50%;
}selectやinputは、フォームの種類です。
ドロップダウンメニューならselect、テキストならinput、チェックボックスならcheckboxとなります。
nameに入る部分（aaaやbbb）は、項目の名前になります。
設定した名前に合わせて変更します。
widthのパーセント部分が、幅を調整している所となります。
全体幅からの割合を指定します。
まとめ
Contact Form 7の見た目を改善するには、必須の作業です。
各項目の種類と項目名を、間違う事の無いように注意が必要です。
コメント