Wordpress

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

はじめに

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

ブログ記事について

ブログ記事は基本、毎週月曜日午前中に発信!(私感/私考カテゴリについては随時)
今回参照して頂いた記事以外、メニューや検索機能を使用して頂けると目的の情報に辿り着ける事もあります。
多少でも記事に価値があると感じましたら、コメントまたは以下の支援のご協力を頂けましたらありがたいです!

公式ホームページについて

当ブログではITエンジニア関連のテクニカルな事、そして様々な商品のレビュー記事を公開しています。
一方ホームページでは、それ以外の少しビジネス寄り(企業や個人事業主向け)のサービスや情報を発信します。

該当される方、ご興味のある方はホームページの方もご参照ください。

コメントを残す

*