Q&A
body.single01,html.single01
というセレクタは、
<html class="single01>
<body class="single01">
という要素がないと効きませんが、それは大丈夫そうですか？
Wordpressで「Easy FancyBox」プラグインを利用してiframeで記事ページの「single01」を読み込んでいます。
php
1<a href="/single01/" class="fancybox-iframe"> 2<img src="single01.jpg"> 3</a>
iframeが開いたあとのbodyの背景を透過させて、トップページのレイアウト全体が透けて見えるようにしたいのですが、行き詰まりまして助けてほしいです。
fancyboxのプラグインファイルに「allowtransparency="true"」を追加して、「single01」に以下classを入れましたがだめでした。
そもそも他ページの枠を透過することは不可能なのでしょうか。
<iframe id="fancybox-frame" allowtransparency="true" style="border:0;margin:0;overflow:auto" src="/single01/" allow="autoplay; encrypted-media" tabindex="999"></iframe>
css
1body.single01,html.single01 { 2background: transparent; 3}
すいませんがよろしくお願いいたします。
ありがとうございます。
<html class="single01>
<body class="single01">
という要素はあります。
「Easy FancyBox」については分かりませんが、FancyBox3のサンプルを見たところ、.fancybox-content に背景色が付いているようでした。
もしかしたら、同じ要素や別の要素に背景色があるのかもしれません。
一応全部調べて背景色はない状態で確認しております。
よろしくお願いいたします。
!important付けても駄目ですか？あとはCSSの読み込み順の問題とか（プラグインCSSよりも後で指定する）
!important でも駄目でした。
cssの順番も問題ないと思うのですが。
そもそもLightbox系のiframeの透過ができるか知りたいのですが。
皆様のコメントを参考にコードを書き直してcssも整理しようと思います。
ゴチャゴチャになってきてしまい何が原因か分からなくなってきてしまいましたので。
公式のサンプルを見るとfancybox-overlayという要素をtransparentにすれば良さそうです。ただし、インラインでスタイルを適用しているようなので、プラグイン本体を書き換えるのか、JSでDOM操作して書き換えるとかする必要がありそうです。
皆様ありがとうございます。実装できました。
以下スタイルは不要でした。
body.single01,html.single01 {
background: transparent;
}
以下実装スタイル
#fancybox-outer, #fancybox-content {
background: transparent!important;
}
プラグインファイル
jquery.fancybox.min.js
から出力される
<iframe ～ に
allowtransparency="true"
を追加。（おそらくここがきちんと出力されていなかったのが原因でした。）
皆様の時間を無駄にさせてしまい申し訳ございませんでした。
このような場所を利用させていただき感謝しております。
> Lightbox系のiframeの透過ができるか知りたい
http://fancybox.net/
↑こちらのサンプルを触って試しましたが、透過は可能なようですね。
ただ、
https://ja.wordpress.org/plugins/easy-fancybox/#wp-toolbar
↑これを見ると、「This plugin uses an updated version of the original FancyBox 1.3.4」とあり、完全に同じものではなさそうです。
実際のページを拝見できれば、もう少し何かわかることがあると思うのですが。
ご解決されて何よりです。
お手数ですが、自己解決の処理をお願いいたします。
回答1件
0
自己解決
皆様ありがとうございます。実装できました。
以下スタイルは不要でした。
body.single01,html.single01 { background: transparent; }
以下実装スタイル
#fancybox-outer, #fancybox-content { background: transparent!important; }
プラグインファイル
jquery.fancybox.min.js
から出力される
皆様の時間を無駄にさせてしまい申し訳ございませんでした。
このような場所を利用させていただき感謝しております。
投稿2021/03/24 07:02
総合スコア10
あなたの回答
tips
プレビュー
