連絡フォームガジェットのデザインは、初期のままだと幅が違うので違和感があります。
またメッセージ欄の幅を変えられますが、縦にも横にも広がってしまうので使い勝手が良くありません。
そこで、デザインを少し変更してみるのはいかがでしょうか。
↓↓↓
本記事ではCSSの追加で連絡フォームのデザインを編集する方法を解説します。
CSSの追加方法
左のメインメニューから【テーマ】を選択し【カスタマイズ】をクリックします。
そこから【詳細設定】の【CSSを追加】を選択します。
【カスタムCSSを追加】にCSSを入力できます。
後述のCSSを入力したら保存をして、反映されているか実際にブログを確認しましょう。
連絡フォームのCSS
当ブログで実際に追加したCSSは以下の通りです。
/*連絡フォームCSS*/
.contact-form-email,
.contact-form-email-message,
.contact-form-name {
max-width:100%; /*入力欄幅*/
min-width:100%; /*入力欄幅*/
background: rgba(255,255,255,0.85); /*入力欄色*/
border-radius: 2px; /*入力欄丸角*/
border: none;/*入力欄枠無し*/
}
.contact-form-email-message {
min-height: 150px; /*メッセージ欄高さ*/
}
.contact-form-email,
.contact-form-name {
height:25px; /*名前欄＆メール欄高さ*/
}
.contact-form-button-submit {
border-radius : 20px; /*送信ボタン丸角*/
line-height: .5; /*送信ボタン位置*/
padding: .8em 1.5em; /*送信ボタン大きさ*/
border: none; /*送信ボタン枠無し*/
}
.contact-form-button-submit:hover {
transform: scale(1.1); /*送信ボタンホバー拡大*/
background:#f4ff81; /*送信ボタンホバー色*/
}
上記をそのまま使うと当ブログと同じ連絡フォームになります。
色などはブログの雰囲気に合わせて変更するのをオススメします。
コメントアウトで説明文を追記しているので、それを参考に変更してみてください。
連絡フォームのデザインを変更して使いやすくしよう！
軽いデザイン変更ですが、横幅が100%で固定されるだけでも使い勝手が良くなります。
入力欄の大きさなど、小さいことですがこだわってみてはいかがでしょうか。
参考ブログ様
