待望のBloggerウィジェット（ガジェット）「連絡フォーム」のテキストエリアのサイズを調整

おすすめ記事ピックアップ

待望のBloggerウィジェット（ガジェット）「連絡フォーム」が登場しました。個人的には、待望の機能です。でもウィジェットとしてしか使えないので、今のところは利用しません。こちらの問い合わせフォーム（http://www.furimuke.com/2013/04/bloggerblogmail.html）の方が便利なので。

詳しくはクリボウさんの記事参照
Blogger に「連絡フォーム」ガジェットが新登場
http://www.kuribo.info/2013/05/blogger-contact-form-gadget.html

しかしながら、今後は利用してゆきたい「連絡フォーム」です。どんどん改良もされていくことでしょう。テストで入れてみたら、サイドに固定するようなデザインを採用しているためか、横幅の調整ができなくなっています。外部のBlogger側のcssで、サイズ等を指定しているため、HTMLを編集しても調整できないのです。

フォームのテキストエリアを調整したいのに。。。涙という人向けにちょっと、強制的に修正する追加のCSSを作成してみました。たぶん正規CSS的には、あまり良くないのかもしれません。またもっとよい方法もあるはずです。そしてすぐ使えなくなるかもしれません。

下記コードをcssに追加してください。フォームの周りのスペースや、テキスト入力エリアのサイズ調整は、数字を変えておこなってください。

/*------------------------------------------------------
ContactForm css
------------------------------------------------------*/

#ContactForm1 {
padding: 10px 10px 10px 20px;
}

.contact-form-widget {
max-width: 550px; !important;
width: 100%;
}

.contact-form-name, .contact-form-email, .contact-form-email-message {
max-width: 550px; !important;
}

簡単に説明すると、まず#ContactForm1で、フォーム周りのスペースを調整できます。paddingは上右下左の順で数字がならんでいるのは、もはや常識ですね。もっと省略した書き方もありますけども。開けたいスペースの大きさで、数字を変更してください。

次の　max-width　が2箇所あります。フォームエリアを広げたい大きさに数字を調整してください。同じサイズ（550pxであれば2箇所とも550px）で良いと思います。

こんな感じにフォームのテキストエリアのサイズが調整できました。