お問い合わせフォーム WordPress

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

2021年3月4日

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

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

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

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

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

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

続きを見る

 

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

\ 完全無料 /

ZeroPlus Gate公式サイト

毎日先着制!

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 関連記事一覧

この記事が役に立ったと思ったら、シェアボタンからX(旧Twitter)などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ!

 

  • この記事を書いた人

じゅんぺい

37歳からWeb制作とブログ開始。Web制作歴5年目でコーディングとWordPressオリジナルテーマ制作が中心。これまで120件以上を納品。当ブログ月間最高15万PVで、370記事以上はWeb制作の技術記事。コンテンツ販売→累計売上1200万円&1500部超え。X(旧Twitter)フォロワー7200人以上。2024年3月からブログの経験を活かしてライターとしても活動を開始。

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