Pocket

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

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

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

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

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

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

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

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

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

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

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

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

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


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

.wpcf7 input[type="submit"] ,
.pushbutton-wide{
	background-color: #ff7fa1;
}

 

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”blue” bg=”blue”]上のコードをコピペして貼り付けしてね!
赤字の部分を好きなカラーコードに変更してくださいね![/chat]

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


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

スポンサーリンク

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

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

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

.wpcf7 input[type="submit"] {
width:100%;
padding:10px;
border-radius:0px;
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #98ddfc;
transition: 0.3s;
}

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

.wpcf7 input[type="submit"] {
width:100%;
padding:10px;
border-radius:0px;
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border: none;
box-shadow: 0 3px 0 #ddd;
background: #98ddfc;
transition: 0.3s;
}

 

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”green” bg=”green”]カラーはbackgroundのところで変更してくださいね[/chat]

 

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”green” bg=”green”]幅はwidthのところで変更できます[/chat]

 

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”green” bg=”green”]高さはpaddingのところを変更してください[/chat]

[chat face=”1574546982283.jpg” name=”クリミア” align=”right” border=”green” bg=”green”]影をつけたくない場合にはbox-shadowを0pxにすればOK![/chat]

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

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

.wpcf7 input[type="submit"] {
width:60%;
padding:20px;
border-radius:0px;
-webkit-border-radius: 10px;  
-moz-border-radius: 10px;
border: none;
box-shadow: 0 0px 0 #ddd;
background: #98ddfc;
transition: 0.3s;
}
Pocket