こんにちは！兵庫県明石市でホームページ制作やWEBコンテンツなどを作成しているnafu-laboです。
wordpressのプラグイン、「NINJA FORMS」。簡単にお問い合わせフォームが作成できてとても便利ですよね！
NINJA FORMSのレイアウトやデザインを変えたい場合は「Ninja Forms +Layout and Styles」というプラグインもあります。しかしながら、有料なので少しくらいのデザインの修正ならなるべくお金はかけたくない人も多いと思います。
この記事では、追加CSSに数行コードを追加することでNINJA FORMSで作成したお問い合わせフォームの送信ボタンをページの真ん中に配置する方法を説明します。もちろん無料で出来ますのでやってみてください！
nafu-laboやってみると結構簡単ですよ
- wordpressのプラグイン、NINJA FORMSを使っている
- 送信ボタンの左寄せがどうもしっくりこなくて真ん中に寄せたい人
- なるべく有料プラグインは買いたくない
NINJA FORMSの送信ボタンのBEFORE→AFTER
NINJA FORMSでお問い合わせフォームを作ると、送信ボタン（Submit）が左に配置されています。
BEFORE(デフォルト)
nafu-laboこのままでも機能としては充分なのですが、なんだか左寄せがしっくりこないので
AFTER
nafu-laboこのように変更します。
次の項目から設定方法を説明しますね！
送信ボタンを真ん中に寄せる方法
結論としてはカスタムCSS に数行コードを加えることで変更ができます。順番に説明します。
作成したフォームの画面から右クリック→「検証」をクリック
もしくは「command+option+i」を同時に押す
検証ツールが起動できたら出てきた画面の一番上の左側に四角と矢印マークが表示されるのでここをクリックします。
これ↓
nafu-laboマークが青色に変われば選択できています
送信ボタンにカーソルを合わせると、送信ボタンについている名前(id)が表示されるのでこれをメモしてください。
右側の要素の画面でid＝””のところをダブルクリックでコピーできますよ！
外観→カスタマイズ
追加CSSをクリック
以下の画像を参考にコードを追加してください
↓コピーできるよ
/*ninjaforms-submit-button*/
#nf-field-8{
display:block;
margin:auto;
}
まとめ
この要領で背景色を変えたりすることも可能です。
追加CSSに数行コードを加えるだけなので、是非やってみてくださいね。
