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

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

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

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

HTML

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

CSS

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

Q&A

解決済

1回答

3177閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

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

HTML

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

CSS

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

0グッド

1クリップ

投稿2019/07/22 08:16

編集2019/07/22 08:43

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}

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

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

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

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

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

Lhankor_Mhy

2019/07/22 08:20 編集

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

退会済みユーザー

2019/07/22 09:05 編集

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

退会済みユーザー

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の特徴も把握しっかりしていきます
退会済みユーザー

退会済みユーザー

2019/07/22 09:02

もしよければ回答に記載いただければ、ベストアンサーにさせていただきたいのですがお時間大丈夫でしたらお願いいたします。
kei344

2019/07/22 13:35

まだ質問が「受付中」になっていますが、いったんご自身の回答をもって「解決済」にされてはいかがでしょうか。
guest

回答1

0

ベストアンサー

Lhankor様ありがとうございます!

今回はwpの初期値?で自動整形の為必要のないタグが入っていました。

今後も必要ないので、無効化するためにfunctionに追記しています
https://www.plusdesign.co.jp/blog/?p=10491

上記サイト様参考になります!

投稿2019/07/22 13:05

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問