ワードプレスの使い方

JINのお問い合わせボタンの色を変える 簡単コピペ

「クリミアの天使」では、以前テーマに「chocolate」を使わせていただいていました。
とてもかわいく気に入っていたのですが、デザインを考えようと思うと、知識のない私にはなかなかたいへん。

そこで、機能満載のうえ、操作も比較的容易なJINに変更しました。

アフィンガー5などは、機能も多くて魅力的ですが、ひとつひとつが難しくて、なかな使いこなせそうもなくて・・・。

JINではContactForm7(お問い合わせ)のボタンの色が地味

けれども、ふと気づいたら、お問い合わせページのボタンの色が、デフォルトのままだと薄グレーで、とっても地味。変更する場所もないようなのです。

こういった場合には、cssを入れて変更するしかないのですね。

JINの場合、cssのコードを入れる場所が、

外観 → カスタマイズ → 追加CSS

と準備されているのはとてもありがたいです。
以前は、「テーマの編集」から変更しなければならず、不安がありましたから。

なるほど。追加CSSにコードを入れるだけで、簡単にボタンに色がつきます。

JINのContactForm7の送信ボタンの色を変える

では、さっそく作業しましょう。

外観 → カスタマイズ → 追加CSS とすすみます。


次に赤い枠の中にコードをコピペで入れます。

 

クリミア
クリミア
上のコードをコピペして貼り付けしてね!
赤字の部分を好きなカラーコードに変更してくださいね!

最後に「公開済み」のボタンを押すのを忘れないようになさってください。


これでめでたく「送信」ボタンに色がつきました。
簡単にできて良かったです。

スポンサーリンク

送信ボタンの色や幅も変更したい時は?

私は、色が変われば満足だったのですが、もっとボタンの存在感を持たせたい!
幅や高さも変更したい!

という場合には、どのようなcssを入れればよいのか、ご紹介します。

これで、色だけでなく幅や高さの変更ができました。

 

クリミア
クリミア
カラーはbackgroundのところで変更してくださいね

 

クリミア
クリミア
幅はwidthのところで変更できます

 

クリミア
クリミア
高さはpaddingのところを変更してください
クリミア
クリミア
影をつけたくない場合にはbox-shadowを0pxにすればOK!

いろいろ変更して遊んでみました。
幅(width)を80%に。高さ(padding)はわかりやすく20pxと太くしてみました。
そしてシャドウはなしに(box-shadow: 0 0px)。

ボタンのデザイン自由自在で楽しいですね!