WordPress CSS お問い合わせフォーム

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

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

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

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

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

参考記事
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


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:チェックボックスをカスタマイズ

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

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

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

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

続きを見る

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

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