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

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

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

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

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

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

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

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

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

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がデフォルトで付けている物です。

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