お問い合わせフォーム WordPress

【WordPress】Contact Form 7のチェックボックスのデザインを画像にカスタマイズする方法

※ 当サイトではアフィリエイト広告を利用しています

Contact Form 7のチェックボックスのデザインって画像に変更する方法ない?

チェックボックスのデザインをデフォルトではなく、デザインカンプ通りにしたい場合があると思います。

そこで今回はチェックボックスのデザインを画像にしたり背景色を変える方法を解説します。

Contact Form 7の基本的な使い方については以下の記事を参照下さい。

あわせて読みたい
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

Contact Form 7のチェックボックスのデザインを画像にカスタマイズする方法

今回はチェックボックスの色やチェックした時のアイコンをカスタマイズしていきますが、色を変えるにはcolorbackground-colorを使えばいいという訳ではありません。

まずはContact Form 7がデフォルトで表示させるチェックボックスを非表示にして、自作したチェックボックスを表示させるという形になります。

最初にデフォルトのチェックボックスを見てみます(無料テーマ『Twenty Twenty-Two』の場合)

Contact Form 7:デフォルトのチェックボックス

Contact Form 7:デフォルトのチェックボックス

このようにチェックを入れた時の背景は青になっています。

ただサイトのイメージカラーに変更したい場合があるかと思います。

しかしこの青色は単純にbackground-colorで変更・・・という訳にはいきません。

 

コード解説

それではどうするかというと、デフォルトのチェックボックスは見えなくして、希望のデザインを書いて擬似要素で表示させます。

全体のコードを見てみます。

.wpcf7-form-control-wrap {
  display: block;
}
span.wpcf7-list-item {
  margin: 0 30px 0 0; /* 項目右側の余白設定と、デフォルトの左側の余白を打ち消す */
  position: relative;
}
.wpcf7-list-item-label {
  cursor: pointer; /* labelにhoverした時にカーソルを表示させる */
  font-size: 16px; /* 項目のフォントサイズ */
}
input[type="checkbox"] {
  opacity: 0; /* デフォルトのチェックボックスを見えなくする */
  position: absolute;
}
.wpcf7-list-item-label::before {
  /* チェックボックスのデザイン */
  border: 1px solid #333;
  content: "";
  display: inline-block;
  height: 15px;
  margin-right: 10px;
  position: relative;
  top: -1px;
  vertical-align: middle;
  width: 15px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::after {
  /* チェックアイコン */
  background: url(アイコン画像のURL) no-repeat center;
  background-size: contain;
  content: "";
  height: 15px;
  left: 1px;
  position: absolute;
  top: 8px;
  width: 15px;
}
input[type="checkbox"]:checked + .wpcf7-list-item-label::before {
  /* チェックしたボックスの背景色を設定 */
  background-color: #ffffbc;
}

この『wpcf7』というclassは自分で付けた物ではなく、Contact Form 7がデフォルトで付けている物です。

ポイントは以下になります。

  • デフォルトのチェックボックスを見えなくする
  • beforeで自作したチェックボックスを表示
  • checked + afterでチェックされた時のチェックアイコンを表示
  • checked + beforeでチェックされた時のチェックボックスの背景色を設定

今回はチェックを入れたら背景色を薄い黄色にして、チェックアイコンをこちらの犬のアイコンにしてみます。

犬のアイコン

犬のアイコン

そして完成したチェックボックスはこちらです。

Contact Form 7:チェックボックスをカスタマイズ

Contact Form 7:チェックボックスをカスタマイズ

アイコンの位置や四角のデザイン(先の太さや色)などはデザインに合わせて変更・調整可能です。

まとめ

今回はContact Form 7のチェックボックスのデザインを画像にカスタマイズする方法を解説しました。

デフォルトのデザインのままだと『デザイン通りにコーディングして下さい』と言われると思うので、実装できるようにしておきましょう。

ちなみに犬のアイコンはフリー素材サイトicooon monoというサイトからダウンロードしたものです。

icooon monoの使い方はこちらの記事を参照下さい。

あわせて読みたい
フリーアイコン素材サイト icooon-monoの使い方
【商用利用可】フリーアイコン素材サイト『icooon-mono』の使い方【色変更なども解説】

続きを見る

関連記事Contact Form 7 関連記事一覧

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-お問い合わせフォーム, WordPress
-