社員ブログ

フォントを変更したらフォームの横幅がサイドバーを無視する

2012年08月27日 月曜日

このグリニッジのコーポレートサイトは約2年前にリニューアルしました。コンテンツ内容の改修ついでに、フォントをメイリオ(ヒラギノ)に変更しようと思いました。

テスト環境でメイリオを適応してみると、フォームがサイドバーを無視して幅MAXに。その改善策です。
ちなみにサイトはWordPress、フォームはContact Form7を利用していますが、今回はCSSの問題です。

えらいことになっている

まずは、期待値。

期待値の表示

メイリオにした場合。

サイドバーを無視して幅がMAX

※要因切り分けの為にborder:red、greenを付けています。

CSSを修正

要因はなんてことはない、widthの指定が足らなかった、という事でした。
何のwidthかというと、textarea。
input も select も td も tr も table も正しく指定していたのに、本当に盲点でした(反省。

●CSSに追記したメイリオ
body, textarea, input, select {
 font-family: "メイリオ", "ヒラギノ角ゴ Pro W3",
 "Hiragino Kaku Gothic Pro", "MS Pゴシック", sans-serif;
}
●textareaの幅を追記
textarea {width: 100%;}
 ※100%でなくとも、px指定しておけばOK

改善後

結論

メイリオ(ヒラギノ)にする時は、 input , select , textarea の幅指定を忘れずに!

 

追記(2012年8月27日):この投稿は午前中でしたが、午後にはメイリオを適応しました!

Trackback URL
文字サイズサイズ小サイズ中サイズ大