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

執筆者:

関連記事

no image

会員大会に出席

所属しているとあるNPO法人の会員大会に出席してきた、この土日。 場所は津沢のコミュニティセンター。 なかなか土地感の無いところだが、そういう既視感がないところが、逆に現実を忘れさせてくれて、よかった …

no image

Responsiveが超高速で作れるArtisteer最高

Webの高速制作ツールのArtisteerがResponsiveに対応しているのは知っていた。 けども、Wordpressでウィジェットとして追加したブロックの一つ一つについて、モバイルで表示したくな …

no image

Wordファイルが開けない。そこで KWIC Finder

会社の同僚のWordファイルが開けなくなって、ヘルプの声がかかった。 こんな時は、Word2007で「開いて修復」をやる。 これでだいたいは成功するのだが、今回はどうしても開けない。 ・Word200 …

ThemlerでResponsive表示で画像の縦横比が狂う

Themlerを試用している。 操作レスポンスは遅いけれど、ビジュアルにWebが作れるので、感動している。 試しに当ブログのテーマをThemlerで作って適用してみた。 だいたいOKなのだが、ブラウザ …

no image

Excelで作ったVBAマクロのシートをZohoで使えるか試してみた

結論でいうと、うごくは動くが、完全ではない。 で、その不完全さが、致命傷だったりする。 自分の場合に気がついたこととして、 ■よいところ ・Googleのアカウントでログインできる。 ・わかりやすい。 …