チェックボックスのデザインをデフォルトではなく、デザインカンプ通りにしたい場合があると思います。
そこで今回はチェックボックスのデザインを画像にしたり背景色を変える方法を解説します。
Contact Form 7の基本的な使い方については以下の記事を参照下さい。
Contact Form 7の基本的な使い方【WordPressお問い合わせフォームの定番プラグイン】
続きを見る
- 完全無料
- 30日間でWeb制作を学べる
- 現役エンジニアへの質問無制限
- オンラインの動画学習なので時間場所を問わず勉強可能
- 最大4回の学習サポート面談
- 毎日人数制限ありの先着制
(有料になっていたらすいません🙇♂️)
Contact Form 7のチェックボックスのデザインを画像にカスタマイズする方法
今回はチェックボックスの色やチェックした時のアイコンをカスタマイズしていきますが、色を変えるにはcolor
やbackground-color
を使えばいいという訳ではありません。
まずはContact Form 7がデフォルトで表示させるチェックボックスを非表示にして、自作したチェックボックスを表示させるという形になります。
最初にデフォルトのチェックボックスを見てみます(無料テーマ『Twenty Twenty-Two』の場合)
このようにチェックを入れた時の背景は青になっています。
ただサイトのイメージカラーに変更したい場合があるかと思います。
しかしこの青色は単純に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のチェックボックスのデザインを画像にカスタマイズする方法を解説しました。
デフォルトのデザインのままだと『デザイン通りにコーディングして下さい』と言われると思うので、実装できるようにしておきましょう。
ちなみに犬のアイコンはフリー素材サイトicooon monoというサイトからダウンロードしたものです。
icooon monoの使い方はこちらの記事を参照下さい。
【商用利用可】フリーアイコン素材サイト『icooon-mono』の使い方【色変更なども解説】
続きを見る