WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。
Contact Form 7プラグインでお問い合わせフォームを導入してみたけど送信ボタンの見た目が寂しい。そんな時にぜひ活用したいのが「テーマ側」であらかじめ準備されているCSSデザインを適用して見た目を切り替えてしまうというテクニックです。今回は本サイトで使用している「賢威」というテーマを参考にしながらボタンデザインのcss（class属性）を適用していきます。どんなテーマでも大半がすでに用意されているCSS（class）がありますのでぜひご利用中のテーマに合わせて適用してみてくださいませ。
ちなみに賢威では上記のボタンCSSパターンが準備されていました。豊富なカラーでありがたい限りですね。では前回にお問い合わせフォームを導入したContact Form 7の送信ボタンへ見た目を適用していきましょう。ちなみに現在はCSSを適用していない状態なのでシンプルな見た目となっています。
現在の状態でも悪くはありませんが、閲覧者によっては「送信ボタンと認識してもらえない可能性」がありそうです。念のためにContact Form 7の公式サイトも覗いてみましたが、送信ボタンに対して「CSSのclass属性」を追加できると記載されていました。
ちなみに「賢威」ではボタンにCSSを適用する際は以下となるようです。
▼矢印あり
<a href="#" class="btn dir-arw_r btn_bluegreen"><span class="icon_arrow_s_right"></span>送信ボタン</a>
▼矢印なし
<a href="#" class="btn btn_bluegreen">送信ボタン</a>矢印ありの方だと「spanタグ」が「aタグ」内側に必要だったり複雑な設置になってしまいますのでここでは「矢印なし版」を適用していきます。
では早速、Contact Form 7のフォーム画面を開いていきましょう。
フォームの一覧が開いたら該当データを選びクリックして画面を開きます。
次にsubmitボタンに指定の方法でCSSを追記していきましょう。
公式サイトの記述方法に従ってCSSのclass属性を追加していきます。賢威ではclassを２つ追加する必要がありますので以下の記述となります。
念のために作業用としてコピペできるソースも掲載しておきますね。
[submit class:btn class:btn_bluegreen "上記内容で送信する"]CSSの追記が終わったら最下部の「保存」ボタンを押して完了です。
最後にページを確認してみましょう。
ばっちり反映されていますね。
念のため色別でのソースコードを置いておきますのでぜひご活用ください。
▼オレンジ
[submit class:btn class:btn_orange "上記内容で送信する"]
▼グリーン
[submit class:btn class:btn_bluegreen "上記内容で送信する"]
▼グレー
[submit class:btn class:btn_gray "上記内容で送信する"]
▼ブルー
[submit class:btn class:btn_style03 "上記内容で送信する"]
▼ホワイト１（白ベース）
[submit class:btn class:btn_style01 "上記内容で送信する"]
▼ホワイト２（薄灰ベース）
[submit class:btn class:btn_style02 "上記内容で送信する"]最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
