WordPress個別サポート

Contact Form 7で作成する問い合わせフォームは項目をカスタマイズできますが、追加した「電話番号」が細くなることがあります。

「電話番号」だけ細くなる

「電話番号」だけ細くなる

組み合わせるテーマによって異なりますが、BizVektorを使うと初期設定で作成される「お名前」や「メールアドレス」に適用されるスタイルのグループに「電話番号」(type="tel"のinputタグ)が含まれていないために上記のようになります。

具体的にはBizVektorのplain.cssで「お名前」や「メールアドレス」などのテキストボックスには次の2つのスタイルが適用されています。

/* テキストボックスのスタイル(1) */
input[type="text"], input[type="email"], textarea {
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #CCC;
    padding: 2px;
    font-size: 12px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}

/* テキストボックスのスタイル(2) */
#content form input[type="text"], #content form input[type="email"], #content form textarea {
    position: relative;
    overflow: hidden;
    padding: 5px 10px;
    margin: 5px 5px 5px 0px;
    width: 90%;
}

電話番号(type="tel")に対しても同じスタイルが適用されるように、電話番号(type="tel")を対象にしたCSSを子テーマのstyle.cssなどに入力します。

/* 電話番号のスタイル(1) */
input[type="tel"] {
    background: none repeat scroll 0% 0% #F9F9F9;
    border: 1px solid #CCC;
    padding: 2px;
    font-size: 12px;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset;
}

/* 電話番号のスタイル(2) */
#content form input[type="tel"] {
    position: relative;
    overflow: hidden;
    padding: 5px 10px;
    margin: 5px 5px 5px 0px;
    width: 90%;
}

電話番号のテキストボックスが他と同じ太さになります。

「電話番号」が他と同じ太さに

「電話番号」が他と同じ太さに

他のテキストボックス項目と同じスタイルを適用したので幅が広すぎるのが気になる方は「width: 90%;」の部分を「width:160px;」などに変更してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
WordPress講座の問い合わせ先

関連記事

BizVektorのカスタマイズ

WordPressカスタマイズ

WordPressによるサイト作成のヒント

WordPressプラグイン

スポンサーリンク
西沢直木によるWordPress講座の紹介
ホームページ作成講座WordPress個別サポート