Contact form 7レイアウト編集について説明します

1. Contact form 7
レイアウト編集

2. Wrodpress管理画面からCSSを変更する。

3. 枠の幅と高さを変更する。

4. 幅と高さが広くなった
変更後

5. メッセージ本文の枠の幅と高さを変更する。

7. ボタンのサイズと装飾を変更する。

8. デフォルトのボタン
ボタンのレイアウト変更

9. C9
Id属性とClass属性を指定する。

10. C1属性を中央寄せにする。

12. ｒecaptcha設定を中央寄せにする。

14. ボタンを中央寄せにする。

16. Recaptcha設定とボタンの幅はどうやって調べたのか？
と思われている方はいらっしゃないでしょうか？
実はChrome拡張機能のPage Rulerを使いました。

17. Chrome拡張機能のPage Ruler

18. 項目名の位置変更
項目名の下の余白を０ｐｘにする

20. 今回の背景は画像が連続してもつながるので支障がない
背景画像の設定
Wordpress管理画面→メディア→貼り付けたい画像

21. 背景画像挿入

22. 文字が見えにくくなったので、
文字色を白に変更します。

23. 文字を白に変更

24. 以上でcontact form 7のレイアウト
の変更について説明を終わります。
ご覧下さりありがとうございました。