お問い合わせフォームの送信ボタンの色が変えられません

  • S

    Contact Form 7を導入してお問い合わせフォームをつくることはできましたが、送信ボタンの色が見づらいため、変更しようとCSSを追加したりなど試行錯誤しましたがうまくいかず、ご教授いただけたら幸いです。

    0_1654782891435_001.jpg

    マニュアル確認済み
    キャッシュクリア済み
    プラグイン全停止済み
    WordPressのバージョン : 6.0
    ご利用のサーバー名 : ConoHa WING
    PHPのバージョン : 7.4
    OS : Windows10
    ご利用のブラウザ : Microsoft Edge
    該当サイトのURL :https://notebook-e.com

    0 1 件の返信

  • @shihtzu さん

    こんにちは！
    画像ありがとうございます。

    サイトのURLをご共有いただけますか？？

    お手数おかけしますが、よろしくお願いいたします！

    0
  • S

    当方のサイトURL掲載いたしました。
    お手数をおかけします。
    何卒よろしくお願いいたします。

    0 1 件の返信

  • @shihtzu さん

    URLありがとうございます！

    以下のコードを追加 CSS に書くとどうでしょうか？？
    （ 3b4675 の所に指定したいカラーコードを入れてあげてください）

    .wpcf7-form input[type="submit"] {
	background-color: #3b4675;
}

    ご確認よろしくお願いいたします！

    0
  • S

    @tsu_ さん

    ご回答ありがとうございます
    追加CSSに教えていただいたコードを入れてみましたがやはり反映されず、再度検証したところ
    他のサイトで参照した、楽天アフィリエイト外側の枠線を消すための下記コードが入っていたことが原因のようでした。

    .rakuten_aff table, .rakuten_aff th, .rakuten_aff td {
border: none !important ;

    教えていただいたコードを上記コードの上に入れ替えたところ送信ボタンの色が変更されました。
    ありがとうございました。

    ちなみに上記のコードはこのまま入れておいて支障はないものなのでしょうか。
    それと、送信ボタンの上にマウスポインタを乗せた時の色（ロールオーバー）の変更はどのように行えばいいのでしょうか。

    再度の質問にてお手間をおかけいたしますがご教授よろしくお願いいたします。

    0 1 件の返信

  • @shihtzu さん

    教えていただいたコードを上記コードの上に入れ替えたところ送信ボタンの色が変更されました。
    ありがとうございました。

    ちなみに上記のコードはこのまま入れておいて支障はないものなのでしょうか。

    こちらについてですが、最後「 } 」が抜けていますね。。
    だから、上に書かないと反映されなかったんだと思います！

    楽天アフィリエイトの外枠を消したい場合は、
    残しておいても良いんじゃないでしょうか？？
    （末尾に } を書き足してあげてください）

    それと、送信ボタンの上にマウスポインタを乗せた時の色（ロールオーバー）の変更はどのように行えばいいのでしょうか。

    ↓ のようなイメージです！

    .wpcf7-form input[type="submit"]:hover {
	background-color: #3b4;
}

    「css マウスオーバー 色」で検索をかけていただくと
    参考記事がたくさん出てくると思うので、そちらも併せて参考にしてみてください！

    よろしくお願いいたします。

    0
  • S

    返信遅くなり申し訳ありません。

    教えていただいたコードでマウスオーバーの色を変えることができました！
    まだまだわからなことが出てくるかと思いますのでその際はまたご教授下さい。
    ありがとうございました！

    0 1 件の返信

  • @shihtzu さん

    ご報告ありがとうございました！

    マニュアルなどを見ても分からないものなどは、ご相談いただければと思います。
    https://jin-theme.com/manual/

    また、検索の時に「WordPress 〇〇」と入れると
    WordPress に関する情報が出てきやすいので、お試しください。

    引き続き、よろしくお願いいたします！
    （ご確認いただければ、ご返信には及びません）

    0