【WordPress】プラグインContact Form 7の入力項目幅の変更

はじめに

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の見た目を改善するには、必須の作業です。
各項目の種類と項目名を、間違う事の無いように注意が必要です。