質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2608閲覧

ワードプレス[Contact form7]のチェックボックスをクリックしてもマークが表示されない現象を解決したい

Enuos

総合スコア13

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/07/20 02:00

編集2019/07/21 01:14

ワードプレス_5.11
テーマ_cocoon
コンタクトフォーム7_5.1.3を使用しています。

問い合わせを設置したのですが、
チェックボックスをクリックしてもチェックマークが表示されない現象が起きています。

クリックは可能で必須項目にして送信もできるので
機能的には動作していますが、
見た目が変わらないのでチェックしたかがわからない問題があります。


試したこと
コンタクトフォームを一旦削除して再度有効化した
→変わらず表示れない

他ID「X」でコンタクトフォームを利用したが
そちらでは問題なく表示された。

「X」でテーマとプラグインを同じ状態にして確認したが
そちらでは問題なく表示された。

コンタクトフォームのCSSに!マークがあったので
「X]にコピーしてみたが再現できなかった(問題なくチェックが表示された)

また、プラグイン[Democracy Poll]を使った
アンケート画面でも同様にチェックボックスが表示されないです。


チェックマークが表示されない原因
確認するとよいポイントなどを教えていただきたいです。

お手数ですがよろしくお願いいたします。


チェックマークが付かない写真
イメージ説明
コンタクトフォームのCSSに!がある写真
イメージ説明
Democracy Pollでもチェックマークが表示されない
イメージ説明


@charset "UTF-8"; /*! Theme Name: Cocoon Child Template: cocoon-master Version: 0.0.5 */ /************************************ ** 子テーマ用のスタイルを書く ************************************/ /*必要ならばここにコードを書く*/ /*フロント固定ページのタイトルを非表示*/ .home.page .entry-title{ display: none; } /************************************ ** レスポンシブデザイン用のメディアクエリ ************************************/ /*1240px以下*/ @media screen and (max-width: 1240px){ /*必要ならばここにコードを書く*/ } /*1030px以下*/ @media screen and (max-width: 1030px){ /*必要ならばここにコードを書く*/ } /*768px以下*/ @media screen and (max-width: 768px){ /*必要ならばここにコードを書く*/ } /*480px以下*/ @media screen and (max-width: 480px){ /*必要ならばここにコードを書く*/ } /*Contact Form 7カスタマイズ*/ /*スマホContact Form 7カスタマイズ*/ @media(max-width:500px){ .inquiry th,.inquiry td { display:block!important; width:100%!important; border-top:none!important; -webkit-box-sizing:border-box!important; -moz-box-sizing:border-box!important; box-sizing:border-box!important; } .inquiry tr:first-child th{ border-top:1px solid #d7d7d7!important; } /* 必須・任意のサイズ調整 */ .inquiry .haveto,.inquiry .any { font-size:10px; }} /*見出し欄*/ .inquiry th{ text-align:left; font-size:14px; color:#444; padding-right:1px; width:30%; background:#f7f7f7; border:solid 1px #d7d7d7; } /*通常欄*/ .inquiry td{ font-size:13px; border:solid 1px #d7d7d7; } /*横の行とテーブル全体*/ .entry-content .inquiry tr,.entry-content table{ border:solid 1px #d7d7d7; } /*必須の調整*/ .haveto{ font-size:7px; padding:5px; background:#ff9393; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /*任意の調整*/ .any{ font-size:7px; padding:5px; background:#93c9ff; color:#fff; border-radius:2px; margin-right:5px; position:relative; bottom:1px; } /*ラジオボタンを縦並び指定*/ .verticallist .wpcf7-list-item{ display:block; } /*送信ボタンのデザイン変更*/ #formbtn{ display: block; padding:15px; width:350px; background:#ffaa56; color:#fff; font-size:18px; font-weight:bold; border-radius:2px; margin:25px auto 0; } /*送信ボタンマウスホバー時*/ #formbtn:hover{ background:#fff; color:#ffaa56; border:2px solid #ffaa56; }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yasutomi

2019/07/20 09:52

コードは画像ではなくコードブロックで貼ってください。
Enuos

2019/07/21 01:12

お返事ありがとうございます。 写真内容のコードを貼り付けました。
yasutomi

2019/07/21 02:52

問題の該当箇所のCSSコードを 貼り付けていただけなかったので回答不可です。
Enuos

2019/07/21 05:12

貼り付けるコードが違うという事でしょうか・・・。 CSS貼ったのは子テーマのstyle.cssだけで、 問題のある問い合わせを作った固定ページには何も貼っていない状態です。 問題のあるページの詳細を加えてみます。 ご指摘ありがとうございました。
Enuos

2019/07/21 23:58

該当するコードが他にもあるということに気づきました。 お返事とご指摘ありがとうございました。
guest

回答2

0

ベストアンサー

<head>内にwp_head();が記載されていないとか?

投稿2019/07/21 15:27

mksk

総合スコア247

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Enuos

2019/07/21 23:58

教えていただいたコードについて調べ、 順番にコードが書かれているページを見たところ 異常が起きていたページではcocoon設定の「スキン」が他とは違っていました。 異常のないページと同じスキンにしたところ チェックマークが正常に表示されるようになりました。 コードの記載がないというご指摘のおかげで気づくことができました。 ありがとうございます。
guest

0

使用テーマcocoon

cocoon設定のスキンを「Hygiene」にした場合に
コンタクトフォーム7のチェックボックスがうまく表示されないという異常でした。

他のスキンに変えたところ正常に表示されるようになりました。

※問題のおきたスキンだけなぜ表示されないか、
どこのコードが悪かったかは私ではわかりませんが
他のスキンを使い問題を回避しました。

投稿2019/07/22 00:07

Enuos

総合スコア13

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問