MW WP Formのチェックボックスのカスタマイズ

2023年4月27日2023年8月4日

MW WP Formでチェックボックスの外観をカスタマイズする方法を紹介します。この方法はContact Form 7にも応用できます。

カスタマイズ後のチェックボックスデザイン

SIM

今回作りたいチェックボックスは下記の円形デザインです。

MW WP Formのチェックボックスの初期デザイン

SIM

チェックボックスのデフォルトデザインは、四角い枠にチェックマークです。

通常はMW WP Formに限らずWordPressでチェックボックスを作ると下記のようなデザインで出力されます。

補足）リセットCSSの種類によってはチェックボックスの枠とチェックマークが表示されなくなります。

MW WP Formのチェックボックスのカスタマイズの基本的な考え方

SIM

カスタマイズの考え方としては、最初にデフォルトのチェックボックスを非表示にし、代わりに疑似要素の:beforeと:afterでカスタマイズしたチェックボックスを新たに作るイメージです。

MW WP Formでチェックボックスをカスタマイズするには、初期デザインのチェックボックスの枠とチェックマークをCSSで非表示にします。その代わりとして、label要素内にあるspanタグに新たに疑似要素::beforeと::afterを作り、希望のデザインのチェックボックスを新設します。

MW WP FormのチェックボックスのHTML構造

SIM

まずはMW WP FormのチェックボックスのHTML構造を把握しておきます。

このチェックボックスのHTMLに対してCSSでカスタマイズしていきます。

<div id="mw_wp_form_mw-wp-form-6" class="mw_wp_form mw_wp_form_input  ">
 <form method="post" action="" enctype="multipart/form-data"><div class="mw-check-wrapper">
  <dt>好きなフルーツを選んで下さい</dt>
  <dd>
	  <span class="mwform-checkbox-field horizontal-item">
		  <label for="mw-id-1">
		  	<input type="checkbox" name="mw-name[data][]" value="リンゴ" checked="checked" id="mw-id-1" class="mw-class">
		  	<span class="mwform-checkbox-field-text">リンゴ</span>
	  	</label>
	  </span>

	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
  </dd>
 </form>
</div>

MW WP Formでチェックボックスを作る時に各パーツのclassやIDを指定しますが、上の例ではmw-で始まるclass名およびIDがそれに該当します。

SIM

チェックボックスのカスタマイズで使うクラス名は下記の２つだけです。

今回カスタマイズに利用するクラス名

SIM

MW WP Formを作る時に任意のクラス名を自分で記入することになります。

mw-check-wrapper：チェックボックスのformタグのクラス名
mw-class：各labelのinputタグのクラス名

補足：WordPressのpage.phpにMW WP Formのショートコードを書く方法

WordPressテンプレートファイルにショートコードを貼り付けるのに、下記のようなWordPress関数を利用できます。

WordPressテンプレートファイルにショートコードを書く方法

<?php echo apply_shortcodes(‘ショートコード’); ?>

ショートコードのWordPressテンプレートファイルでの使用例

例えば、今回の例ではMW WP Formでは[mwform_formkey key=”6″]というショートコードが生成されましたので、これをWordPressの固定ページのテンプレートファイル（page.phpあるいはpage-$slug）に貼り付けたい場合は下記のようになります。

<?php echo apply_shortcodes('[mwform_formkey key="6"]'); ?>

参考サイト｜ショートコードのWordPressテンプレートファイルでの使用法

情報の出典は下記のとおりで、Contact form 7でも同様に使えます。

参考サイト

WordPressテンプレートファイルにショートコードを貼り付けるには下記２つの方法があります。

チェックボックスの初期デザインを非表示にする

SIM

まずは、デフォルトのチェックボックスを非表示にして消します。

チェックボックスの初期デザイン（枠とチェックマーク）を非表示にすると下のような外観に変わります。

チェックボックスの初期デザイン（枠とチェックマーク）を非表示にする方法は下記の２つの方法のいずれかです。

CSSでinputタグを非表示にする方法

この例では、inputタグのclass名にmw-classを指定しましたので、下記のようなCSSでチェックボックスの枠とチェックマークを非表示にできます。

SIM

デフォルトのチェックボックスを非表示にする方法は２つありますが、WordPressのオリジナルテーマ案件ではリセットCSSを使う場合が多いです。

.mw-class{
   display: none;
}

さらにdtタグ、ddタグを使う場合には下記のCSSでデフォルトの余計な書式を消せます。

// ラベルテキスト行の余白等
.dd {
  display: block;
  margin-inline-start: 0px;
}
// チェックボックス行の文字の太さ
.dt{
  font-weight: normal;
}

リセットCSS（destyle.css）で非表示にする方法

私のこちらの方法を使っています。

コーディングするときにはスタイルをほとんど消した状態の方が速いので、いつもdestyle.cssのような強力なリセットCSSを使っています。

destyle.cssのCDN

destyle.cssのgithub

https://github.com/nicolas-cusan/destyle.css

SIM

なお、destyle.cssでもddタグのCSSはリセットできなかったので、自分でCSSを書いてクリアする必要があります。

// チェックボックス行の文字の太さ
.dt{
  font-weight: normal;
}

チェックボックスの新設（カスタマイズ）

SIM

ここまでは下準備の行程で、ここから本題のチェックボックスのカスタマイズ行程になります。

はじめにチェックボックスのカスタマイズに使うHTMLとCSSの全文を載せておきます。

<div id="mw_wp_form_mw-wp-form-6" class="mw_wp_form mw_wp_form_input  ">
 <form method="post" action="" enctype="multipart/form-data"><div class="mw-check-wrapper">
  <dt>好きなフルーツを選んで下さい</dt>
  <dd>
	  <span class="mwform-checkbox-field horizontal-item">
		  <label for="mw-id-1">
		  	<input type="checkbox" name="mw-name[data][]" value="リンゴ" checked="checked" id="mw-id-1" class="mw-class">
		  	<span class="mwform-checkbox-field-text">リンゴ</span>
	  	</label>
	  </span>

  	<span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
	  <span class="mwform-checkbox-field horizontal-item">中身省略</span>
  </dd>
 </form>
</div>

// 初期デザインのチェックボックスを非表示
.mw-class {
  display: none;
}
// ラベルテキスト行の余白等
.mw-check-wrapper dd {
  display: block;
  margin-inline-start: 0px;
  margin-top: 20px;
}
// チェックボックス行の余白等
.mw-check-wrapper dt{
  font-weight: normal;
  margin-top: 20px;
}
// チェックボックス内のラベルをインラインブロック化
.mw-check-wrapper label {
  display: inline-block;
}
// ラベル文字の左側の余白：チェックボックの枠が入るスペース＋ラベル文字との余白
.mw-class + span {
  padding-left: 28px;
  display: inline-block;
  position: relative;
}
// チェックボックスの枠とチェックマークの共通書式
.mw-class + span::after,
.mw-class + span::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
}
// チェックボックスの枠
.mw-class + span::before {
  border: 1px solid #aaaaaa;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
// チェックマークにチェックが付いていない時
.mw-class + span::after {
  border: none;
  background-color: #f72585;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;

}
// チェックマークにチェックが付いた時
.mw-class:checked + span::after {
  display: block;
}

新設するチェックボックスが入るスペースの確保

チェックボックスのinputタグ（.mw-class）直後のspanタグ（チェックボックスの文字列：リンゴ…）を起点に左側に、新設するチェックボックスの枠が入るスペース（padding-left）を確保します。

さらに、新設するチェックボックスはこのspanタグを起点に疑似要素の::beforeと::afterで作るので、このspanタグをposition: relativeに設定します。

// ラベル文字の左側の余白：チェックボックの枠が入るスペース＋ラベル文字との余白
.mw-class + span {
  padding-left: 28px;
  display: inline-block;
  position: relative;
}

新設するチェックボックスの枠のCSS設定

チェックボックスの枠は、先程起点に設定したspanタグ（チェックボックスの文字列：リンゴ…）の疑似要素::beforeで作ります。

// チェックボックスの枠
.mw-class + span::before {
  display: block;
  position: absolute;
  border: 1px solid #aaaaaa;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

新設するチェックボックスのチェックマークのCSS設定

チェックボックスのチェックマークは、先程起点に設定したspanタグ（チェックボックスの文字列：リンゴ…）の疑似要素::afterで作ります。

// チェックマークにチェックが付いていない時
.mw-class + span::after {
  display: block;
  position: absolute;
  border: none;
  background-color: #f72585;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
}
// チェックマークにチェックが付いた時
.mw-class:checked + span::after {
  display: block;
}

チェックマークを作る時には、チェックしてない時とした時でCSSを分ける必要あります。その辺りを簡潔にまとめると下記のようになります。

チェックマークを作る時のポイント

チェックマークを付けてない時：
.mw-class + span::after {
display: none;
}
チェックマークを付けた時：
.mw-class:checked + span::after {
display: block;
}

SIM

以上で、説明は終わりです。

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

SIM

■清水WEB制作代表
■コーディング：WordPress（オリジナルテーマ制作等）・HTML・Sass・FLOCSS・JavaScript（jQuery）等
■集客力：YouTube/Instagram/ブログでそれぞれ登録者数16000人/フォロワー13000人/月間最大アクセス50000PVの集客実績があります
■文章作成：博士号所有、会社員時代は科学雑誌に寄稿していたので文章作成も得意です
■写真技術：Amazon Kindle出版で、写真集・撮影編集解説書を５冊好評発売中です