Contact Form 7で送信ボタンが中央に寄らない？スピナーが原因かも【解決CSS付き】

WordPressでお問い合わせフォームを設置する際に、絶大な人気を誇るプラグイン「Contact Form 7」。当スクールのWebサイトでも使っていますが、送信ボタンが微妙に中央からズレてしまうことがありました。

送信ボタンが中央寄りでない原因とは？

通常の表示

一見中央に見えますが、少しだけ左にズレています。気にならない人には気にならないかもしれませんが、デザイナーとしては放っておけませんよね。

スピナー(wpcf7-spinner)がレイアウトを崩していた

スピナーが表示されている状態

検証ツールで調べてみると、送信時に表示される読み込み用のスピナー（wpcf7-spinner）が要素として存在しており、それがスペースを取ってしまい、送信ボタンをわずかに押し出していました。

CSSでスピナーを非表示にする方法

スピナーはデフォルトで表示される仕様ですが、必要がない場合は以下のCSSで非表示にできます。

.wpcf7-spinner {
    display: none !important;
}

これをテーマの追加CSSに追加することでスピナー非表示になり、送信ボタンがちゃんと中央に配置されました。スッキリ解決！

まとめ：Contact Form 7の送信ボタンを中央揃えにしたいなら

• Contact Form 7の送信ボタンが左にズレる原因は「スピナー」の存在
• .wpcf7-spinner { display: none !important; } で簡単に非表示にできる
• 見た目を整えたいときには、こうした細かい修正が効果的

フォームのデザインを整えることで、サイト全体の印象もアップします。気になる方は（デザイナーとしては気にして欲しい！）ぜひ試してみてください。

オンラインデザインスクール創人塾では、WordPressを用いた本格的なWebサイト制作スキルはもちろん、サイトのセキュリティ管理や適切なプラグインの選定・運用ノウハウまで、プロのWeb制作者に必要な知識を網羅的に習得できる講座をご用意しています。ご興味のある方は、お気軽にご連絡ください。

▶創人塾の詳細はこちら