IT仕事 WordPress

ContactForm7プラグイン-チェックしたチェックボックスの背景色を変える

投稿日:

本日やったこと。

ContactForm7プラグインを使っているが、チェックボックスのクリックが小さくて、なかなかクリックできないので、ホットスポットというか、クリック感知の範囲を広げたかった。

こんなときContactForm7では便利なオプション「use_label_element」が用意されていて、ラジオボタンとチェックボックスにを入れることで、クリック範囲を広げることができるのだ。
チェックボックス、ラジオボタン、メニュー | Contact Form 7 [日本語]
こんなことができるんだー。かんたんにー。知らんかった。改めて尊敬する。すごいプラグイン。

また、ContactForm7のプラグイン内に、手動のHTMLタグでラジオボタンを設置した箇所があり、ここは上記の方法が使えない。
以下の方法で、手動で<LABEL for=”i1″>を書き込んだ。
ラベル <LABEL> – HTMLタグリファレンス/Tips

最後に、このエントリーの表題である「チェックしたチェックボックス(またはラジオボタン)に隣接するラベルのスタイルを変える」・・・のは、とても難しかった。
CSSでやる方法は検索すると結構見つかるのだが、ContactForm7とJQueryの両方を使っているサイトでは、コードが入り組んでいて、難しいっぽいのだ。
無理だわ・できんわ・・・と思いきや、以下のページの「要素の表示・非表示処理」の方法で、可能になった。何時間調べただろうか。見つかってよかった。
[CSS]チェックボックスにチェックを入れた時に要素に変化を付ける方法

「間接セレクタ」って、初めて聞いたし、初めて使った。

CSSは奥が深い。

-IT仕事, WordPress

執筆者:

関連記事

Jazzy Formsで見積を計算してもらいその結果をメールで送る方法

やりたいことは、 「Webサイトの見積フォームを設置し、それを使ってお客さんに見積をしてもらい、その見積結果を管理者宛に送信する」 ・・・というもの。 WordPressのプラグインで、「Jazzy …

no image

スマホ写真を「撮って、選んで、公開」したい。で、AndroidアプリのWordPress登場。

スマートフォンで撮影した画像をブログに簡単に掲載する方法はないか、本日、調べたりスマホいじったりしてみた。 スマホで撮影した写真はDropBoxに自動アップロードするように設定しているので、DropB …

ATOM Cam 購入&アクリルケース内に設置

会社の駐車場の降雪確認用のWebカメラを利用する季節になりました。 昨年までWebカメラとして利用していたスマホが壊れたので、Webカメラを購入してもらいました。 ATOM Tech(アトムテック)の …

no image

Fold Page List と Fold Category List

今度仕事でWordPressを使うのでいろいろ調べている。 WordPressはデフォルトで親メニューも子メニューも出っ放し。 けど、メインメニューだけ出していてクリックしたときだけサブメニューを出し …

no image

モバイルでも見れます

FireFoxに FireMobileSimulator を入れたので、 携帯向けのサイトも作れるようになったかも・・・ってことで、当サイトにWordPress Mobile Editionを入れた …