Contact Form 7 とは？
ワードプレスの問い合わせフォームといえば、「Contact Form 7」です。このブログでも使用させて頂いています。とても便利なプラグインで、ほとんど設定せずに（メールアドレスの設定くらい）そのまま使用できます。でも、送信ボタンのデフォルト色が黒っぽい色で、最低限、ここだけでも、ホームページの色にあわせて、変えられるとうれしいですよね。この記事では、送信ボタンの色だけ簡単に変えようということで、色替え方法を紹介したいと思います。
色替え方法
送信ボタンの色替えは、CSSで行います。変えるのは以下赤枠の送信ボタンです。
以下をコピー＆ペーストして、CSSに設定してください。コピー後、色設定のところを変えてください。
- .wpcf7 input[type=“submit”] {
- background:#9c5e31;
- }
- .wpcf7 input[type=“submit”]:hover {
- background:#9c4230;
- }
色設定は
- 2行目の「#9c5e31」が通常の表示色
- 5行目の「#9c4230」がマウスオーバー時の表示色
です。ちなみに、上記設定は、このブログの問い合わせフォームの色設定になります。
色は以下のWebColorのサイト等を参考にしてください。
CSSの設定方法
CSSの設定方法は子テーマを使用するとかプラグイン「Simple Custom CSS and JS」等を使用するとかいろいろな方法がありますが、ここでは、ワードプレスの標準機能を使用した設定方法とTCDテーマでの設定方法を紹介します。
標準ワードプレスの設定
「外観→カスタマイズ→追加CSS」で、以下追加CSS設定画面になります。CSSを設定後、公開ボタンを押してください。
TCDテーマの場合その１
このテーマMuumの場合、上記方法では、「Microsoft Edge」では色変更できたのですが、「Google Chrome」ではなぜか色が変わりませんでした。TCDテーマの場合は、他にも設定箇所があります。このテーマでは、固定ページの編集ページの下方のカスタムCSSエリアに設定したらOKでした。
TCDテーマの場合その２
TCDテーマの場合、TCDテーマオプション画面から、「基本設定→カスタムCSS」でも設定できます。
最後に
ここまで問い合わせフォーム「Contact Form 7」の送信ボタンの簡単な色替え方法を紹介しました。
参考になりましたでしょうか。ぜひホームページのテーマ色合わせにご活用ください。
