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;」などに変更してみてください。

WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
トラブル解決でお急ぎのときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • ログインできなくなった
  • 画面が真っ白(500エラー)になった
  • 間違ってサイトを消してしまった
  • 引っ越し・SSL対応がうまくいかない
  • CSS・PHPのカスタマイズがうまくいかない
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク