ワードプレスの無料プラグインでお問い合わせフォームやお申し込みフォームを作ったんだけど、デザインがいまいちなんだよなぁ…
と思うこと、ありませんか？
私が使っているワードプレスのフォームのプラグイン『MW WP Form』も便利なんですが、そこが味気ない…。
ということで、『MW WP Form』の送信ボタンの色や大きさなどを変える方法をご案内します。
ボタンのデザインをCSSで設定する
ワードプレスにログインして、左側メニューの[外観]-[カスタマイズ]を選択します。
さらに左側メニューの[追加CSS]を選択します。
その枠の中に、下記のコードをコピー＆ペーストします。
<pre><code>/* フォームボタン */
.mw_wp_form [type=submit] {
width: 150px; /* ボタンの横幅の長さ */
line-height: 2em; /* ボタンの縦幅の高さ */
margin: 10px auto;
background: #ffd0d6; /* ボタンの色*/
color: #333; /* ボタンのテキストの色 */
box-shadow: 0px 1px 3px rgba(0,0,0,.5); /* ボタンの影の設定 */
border: 0; /* ボタンの枠線の設定 */
border-radius: 2px; /* ボタンの角の丸みの設定 */
}
.mw_wp_form [type=submit]:hover {
background: #aee0dd; /* マウスカーソルを上に乗せた時のボタンの色 */
color: #333; /* マウスカーソルを上に乗せた時のボタンのテキストの色 */
box-shadow: 0px 1px 3px rgba(0,0,0,.5);/* マウスカーソルを上に乗せた時のボタンの影の設定 */
}</code></pre>上部の公開ボタンを押します。
『MW WP Form』を設置したフォーム（お問い合わせフォームなど）のウェブページを開き、ボタンの色などが下記のように変わっていることを確認してください。
↓ ボタンにマウスカーソルを乗せたら下のように変わります。
ボタンの色を変える
上記の設定のままだと、ボタンの色はピンクになっていて、カーソルを乗せると水色に変わる状態になっています。
これを好きな色に変更しましょう！
↑をご覧ください。
赤枠の記述が、カーソルを乗せていない普通の時のボタンの設定です。
そして、青枠の記述が、カーソルを乗せた時のボタンの設定です。
さらに、それぞれ、オレンジ下線の部分が、ボタンの色を設定していて、緑下線の部分がボタンのテキストの色を設定しています。
『#ffd0d6』がピンク色のカラーコードで、『#aee0dd』が水色のカラーコードなので、普通がピンクのボタンで、カーソルを乗せると水色に変わります。
同じように『#333（本当は#333333ですが、全て同じ数字の場合、3つに省略できます）』が黒色で、ボタンのテキスト『確認画面へ』の色が黒になります。
なので、それぞれの#から始まるカラーコードを変えると、お好きなボタン色・テキスト色に変えることができます。
カラーコードの調べ方
カラーコードはどう調べるか…ですが、『色の名前とカラーコードが一目でわかるWEB色見本』というカラーコード一覧表を出しているウェブサイトが多数ありますので、”カラーコード”で検索して、そのようなサイトを参考にするのが楽です。
また、Googleで例えば『#e89f4a』を検索すると、↓のようにカラーコードが表示されます。
『HEX』と書かれた部分ですね。
そのすぐ上のバーを横スクロールすると、色を変えられますし、さらに上の○の場所を変えると、色の薄さを変えられるので、ここで好きな色を探すのもいいと思います！
ぜひ、ウェブサイトのイメージに合った色のボタンにしてみてくださいね。
