Wordpressでモーダルウィンドウが開かない

wpサイトでモーダルウィンドウを導入したく、見本サイト様からコードを要らない部分は消してなどしてやっているのですが、どうしても開きません。

コードペンで書きながらやっていた為、コードペンでは問題なく動いたのですが、原因が分からず困っています。
何が原因か、またどうやって見つけたか教えていただけると幸いです。
（説明不足がありましたらお知らせください。）

wpは最新バージョン最新で、jsを使わずcssだけでも出来るものを見つけたので、下記のやり方でできればと思っています。

HTML
1<input class="modalCheck" id="modal01" type="checkbox">
2    <div class="modalBox">
3        <div class="modalcont">
4            <div class="mdBtn mdSmall">
5                <label for="modal01">Modal Open</label>
6            </div><!-- /.content -->
7        </div>
8        <div class="modalWrap" id="modal01Con">
9            <div class="modalBg">
10                <label class="closeModal" for="modal01"></label>
11            </div>
12            <div class="modalCon">
13                <div class="modalInner">
14                    <div class="modalCloseBtn">
15                        <label class="closeModal" for="modal01">×</label>
16                    </div>
17                    <h1 class="ttl modalTtl">タイトル</h1>
18                    <div class="modalText">
19                        <p>aaaaaaaaaaaaa
20</p>
21                        <div class="btn small">
22                            <label for="modal01">× Modal Close</label>
23                        </div><!-- /.modalText -->
24                    </div><!-- /.modalInner -->
25                </div><!-- /.modalCon -->
26            </div><!-- /.modalWrap -->
27        </div>
28    </div>

css
1.modalcont {
2    max-width: 1080px;
3    width: 92%;
4    margin: 3em auto;
5}
6.modalcont {
7    margin-bottom: 0.5em;
8    padding-bottom: 0.25em;
9    font-size: 2em;
10    font-weight: bold;
11    line-height: 1.3;
12    border-bottom: 1px solid #dedede;
13}
14.modalcont p {
15    margin-bottom: 1em;
16    line-height: 1.7;
17}
18.modalCheck {
19    display: none;
20}
21label {
22    cursor: pointer;
23}
24.mdBtn {
25    text-align: center;
26}
27.mdBtn label {
28    display: inline-block;
29    padding: 0.8em 1.5em;
30    color: #fff;
31    font-size: 24px;
32    background-color: #f44336;
33    text-decoration: none;
34    border-radius: 5px;
35    transition: 0.3s cubic-bezier(1, 0, 0, 1);
36    transition-property: background-color, box-shadow;
37    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.3);
38}
39.mdBtn label:hover {
40    background-color: #ea1c0d;
41    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
42}
43.mdBtn.mdSmall label {
44    font-size: 18px;
45}
46.modalWrap, .modalBg {
47    position: fixed;
48    top: 0;
49    left: 0;
50    right: 0;
51    bottom: 0;
52    width: 100%;
53    height: 100%;
54    margin: auto;
55    z-index: 10;
56}
57.modalWrap {
58    opacity: 0;
59    visibility: hidden;
60    transition: 0.3s cubic-bezier(1, 0, 0, 1);
61    transition-property: opacity;
62    will-change: opacity;
63}
64.modalBg {
65    cursor: pointer;
66    opacity: 0.7;
67    background-color: #000;
68    z-index: 2;
69}
70.modalBg label {
71    position: absolute;
72    top: 0;
73    left: 0;
74    right: 0;
75    bottom: 0;
76    display: block;
77}
78.modalCon {
79    position: absolute;
80    top: 5%;
81    left: 0;
82    right: 0;
83    width: 92%;
84    max-width: 640px;
85    height: 86%;
86    margin: auto;
87    z-index: 3;
88}
89.modalInner {
90    overflow: auto;
91    -webkit-overflow-scrolling: touch;
92    position: relative;
93    height: 100%;
94    padding: 0 1.5em 1.5em;
95    cursor: default;
96    background-color: #fff;
97    border-radius: 5px;
98    box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.3);
99}
100.modalCloseBtn {
101    position: absolute;
102    top: 0;
103    right: 0;
104}
105.modalCloseBtn label {
106    display: inline-block;
107    padding: 0.5em;
108    color: #333;
109    text-decoration: none;
110    font-size: 2em;
111}
112.modalCheck:not(:checked) ~ .modalBox>*:not(.modalWrap) {
113    -webkit-filter: blur(3px);
114    filter: blur(0px);
115}
116.modalCheck:not(:checked)~.modalBox .modalWrap {
117    opacity: 0;
118    visibility: hidden;
119}
120.modalCheck:checked~.modalBox>*:not(.modalWrap) {
121    -webkit-filter: blur(3px);
122    filter: blur(3px);
123}
124#modal01:checked~.modalBox #modal01Con {
125    opacity: 1;
126    visibility: visible;
127}
128.modalTtl {
129    padding: 2em 0.5em 1.5em;
130    font-size: 2em;
131    line-height: 1.3;
132    text-align: center;
133}
134.modalText {
135    margin: 0 -1.5em 1em;
136}
137.modalText p {
138    margin-bottom: 1em;
139    line-height: 1.7;
140}
141@media (max-width: 640px) {
142    .modalcont {
143        margin: 1.5em auto;
144    }
145    .modalInner {
146        padding-left: 1em;
147        padding-right: 1em;
148    }
149    .modalTtl {
150        font-size: 1.5em;
151        padding-bottom: 1em;
152    }
153    .modalText {
154        margin: 0 -1em 1em;
155    }
156}

Lhankor_Mhy

2019/07/22 08:20 編集

「モーダルウィンドウが開かない」状態のコードをご提示ください。

退会済みユーザー

2019/07/22 09:05 編集

ありがとうございます。すみません、初心者で分かっておらずがとりあえず確認の為載せているページです。「ウィンドウが開かない」という言葉が適していないかもしれません。現状ボタンは設置してありクリックでモーダルが開く様にしたいのですが、クリックしても反応がありません。前にも疑似のcheckedがうまく効かないことがあったので、私の記述が間違えているのかもしれません

Lhankor_Mhy

2019/07/22 08:46 編集

ソースコード拝見しました。 <link rel='stylesheet' id='child-style-css' href='http://me-blog.aconnect.org/wp-content/themes/cenote_child/style.css?ver=5.2.2 ' type='text/css' media='all' /> <link rel='stylesheet' id='cenote-style-css' href='http://me-blog.aconnect.org/wp-content/themes/cenote_child/style.css?ver=5.2.2 ' type='text/css' media='all' /> 同じCSSを2度読んでいるのには何か理由があるのですか？

退会済みユーザー

2019/07/22 08:51

すみません、そこに関しては単純にどこか自分がミスっているのかもしれないです。 headerにそのまま<link　rel.....は書いてはいないので、子テーマ作ってる時に間違えたんだと思います。そこが関係してくるのでしょうか？

Lhankor_Mhy

2019/07/22 08:52

ソースコードを見てみると、 <p> <input class="modalCheck" id="modal01" type="checkbox"></p> となっていましたが、これは想定と違うのではありませんか？個別記事に直接コピペして自動整形されていませんか？

Lhankor_Mhy

2019/07/22 08:53

> そこが関係してくるのでしょうか？あ、すみません。関係ないと思います。気にならなければ放置してもいいのではないでしょうか。

退会済みユーザー

2019/07/22 09:01

只今自動整形を無効にしたら、表示されました???? 初歩的な事で誠の申し訳ないです他の点も細かく築いてくださりありがとう御座いました！今後wpの特徴も把握しっかりしていきます