HTML & CSS & JavaScript

WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その④

チャックボックス、ラジオボタンの文字列をlabelタグとspanタグを巧く使う事で「ボタン化」し、より分かりやすく、スマホでもタップしやすいデザインに変更する。WordPressでContact Form 7を利用する場合は「use_label_element」を忘れずに!

Advertisement

WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その③

セレクト項目の文字色に関して最初の「選択してください」については、テキストインプット部分やテキストエリアの入力見本の文字色のようにうっすらと見える風にして、別の文字列が選択されたらハッキリとした通常の文字色にしたいでしょう、そうでしょう。というのがこのカスタマイズの出発点。

WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その②

入力する郵便番号は、全角・半角の数字、ハイフン(全角・半角)の有無など想定できる入力状況全てで自動入力は反応してくれる。漢数字、ローマ数字は無理だけどw 厳密さを求めるのなら、別途JavaScriptなどで文字列を成形する必要があるだろう。

WordPressのプラグイン「Contact Form 7」で出力されたフォームをちょっとカスタマイズ──その①

WordPressで構築したサイトにプラグインの「Contact Form 7」を使ってメールフォームを設置した際の備忘録を複数回に分けて記事に。今回はplaceholder(プレースホルダ)の設定でブラウザ間でバラツキのある文字色を統一する。

Colorboxをカスタマイズして両サイドに表示されるアイコンをコンテンツの外側に配置する

jQueryのLightbox系のプラグイン「Colorbox」のCSSをカスタマイズして、両サイドのコンテンツに被さるように配置された「戻る(Previous)」「次へ(Next)」のアイコンを外側に配置するためのあれやこれ。ついでに、同一ページ内でコンテンツに合わせてモーダルウインドウの背景色を替える方法も。

YouTubeの動画をPCではモーダル表示!スマホでは一般的な表示で見せたい!もちろんレスポンシブ対応ね

YouTubeに掲載している動画を自分の所でも見せたいという依頼。一覧表示されている動画プレーヤーをクリックしたらモーダルウインドウが表示され、そこで動画の再生がはじまる事。さらに一覧に表示されている動画のタイトルなどのテキスト情報も、そのままモーダルウインドウ上に引き続き表示される事という条件。

リストの項目タグである「<li>」を横並びにする様々なやり方

以前勤めていた会社で、月一程度で「勉強会」をやっていた。もちろん、就業時間内w こちらで問題を作成し、それぞれのコーダーがクライアント案件の合間にその問題を解き、「勉強会」で答え合わせとその解説をするというもの。その時の資料が出てきたので折角なので記事を作成しよう。