＞ ＞ ＞ Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す

Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す

Posted at March 17,2006 2:17 AM
Tag：[Flash, JavaScript, Lightbox]

Lightbox JS でブログパーツ等の Flash を隠すカスタマイズサムネール画像から拡大画像をポップアップさせずにスマートに表示する Lightbox JS、以前当サイトでもLightbox JS で画像を表示するをエントリー致しましたが、ブログに設置している Flash（こうさぎ等）については拡大画像表示時に PNG 背景画像（overlay.png）の下に隠れないという問題があります。

Flash は門外漢なのですが、テンプレートご利用サイトの Atelier Shuhei Weblog さんより解消するための情報（下記リンク参照）を頂きました。ありがとうございました。
またこの件に関して他の方からもご質問を頂いておりますので、本エントリーにて紹介させて頂きます。本カスタマイズを行うことで、スクリーンショットのように拡大画像を表示した際、ブログツールを背景画像の下に隠すことができます。

Atelier Shuhei Weblog：隣の花は紅い
SitePoint Forums：force flash to play below dhtml menu?

１．サンプル

とりあえず作ってみました。

修正前／修正後

それぞれの右サイドバーにこうさぎとメロメロパークの Flash を置いています。エントリーにあるサムネール画像をクリックして拡大画像が表示された時に Flash がどのように表示されるかをご覧ください。今のところ Windows 2000/XP IE6/Firefox1.5/Opera8 で正常に隠れることを確認しています。

このサンプル用に初めてブログペットを登録しました（笑）。

２．修正方法

object 要素がHTML上にある場合と、そうでない場合の修正方法について記します。

２．１ object 要素がHTML上にある場合

下記の param 要素を object 要素内に追加します。 

<param name="wmode" value="transparent">

それから embed 要素に wmode 属性を追加します。

wmode="transparent"

wmode 要素の value 属性に "transparent" を設定することで Flash ムービーの背景を透明に設定することができるようです。
おおざっぱに書いた Flash 用HTML コードへの挿入イメージは下記（青色部分）のようになります。

<object>
<param name="…" value="…" />
<param name="…" value="…" />
<param name="wmode" value="transparent">
<embed src="…" wmode="transparent" />
</object>

それぞれの挿入位置は任意です。なお embed 要素の一番最後に wmode 属性を追加する際は、タグを閉じるマーク（"/"）の前に半角空白を挿入してください。挿入しないと XHTML valid なページになりません。

２．２ object 要素がHTML上にない場合

ペット系のブログパーツは JavaScript で読み込む形式になっているものがあります。そのような場合は script 要素の src 属性に記述された URL をブラウザに入力して、表示（またはダウンロード画面）された内容をコピーして、それをページに貼り付けます。そこに２．１と同じ内容のHTMLコードがありますので、それを修正します。
なお、この変更を行った場合の Flash の動作について、当サイトでは保証致しません（単に背景に隠すことに着目した変更を行っているだけです）。予めご了承ください。
以下、BlogPet を例に説明します。

BlogPet のHTMLソースは下記のようになっています。

<script language="JavaScript" type="text/javascript" src="http://www.blogpet.net/js/hogehoge.js" charset="UTF-8"></script>

リストの青色部分をマウスコピーして、ブラウザのURLに入力します。IEであればダウンロード画面になりますので、一旦ファイルとして保存します。Firefoxであればソースが表示されますので、全ての内容をマウスコピーしてください。

その内容は下記のようになっていると思います。

var today=new Date();
var tseconds=today.getSeconds();
document.write("<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username=hogehoge&tseconds="+tseconds+"' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=hogehoge&tseconds="+tseconds+"' /></object>");
document.write("<img src='http://www.blogpet.net/add_log.php?username=hogehoge&url="+document.URL+"&referrer="+document.referrer+"'>");

上記のコードを script 要素で括り、２．１と同様に param 要素と embed 要素へ wmode 属性を追加します（青色部分）。

<script type="text/javascript">
var today=new Date();
var tseconds=today.getSeconds();
document.write("<object id='usa' classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' width='130' height='200' align='middle'><param name='allowScriptAccess' value='sameDomain' /><param name='movie' value='http://www.blogpet.net/usa.swf' /><param name='play' value='true' /><param name='loop' value='false' /><param name='menu' value='false' /><param name='quality' value='high' /><param name='FlashVars' value='username=hogehoge&tseconds="+tseconds+"' /><param name='wmode' value='transparent' /><embed src='http://www.blogpet.net/usa.swf' loop='false' menu='false' quality='high' bgcolor='#ffffff' width='130' height='200' name='usa' align='middle' allowScriptAccess='sameDomain' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer' FlashVars='username=hogehoge&tseconds="+tseconds+"' wmode='transparent' /></object>");
document.write("<img src='http://www.blogpet.net/add_log.php?username=hogehoge&url="+document.URL+"&referrer="+document.referrer+"'>");
</script>

追加する際の注意点として、２．１では属性値を「"」で括ってましたが、２．２では必ず「'」で括ってください。誤って「"」を使用すると表示されなくなります。

修正が終わったら、これまで設定していた表示用のHTMLコードと入れ替えます。

３．関連サイト

ネットを検索したところ、下記の情報がありました。日本語入力や実行速度についての問題が記されています。

Posted by yujiro   このページの先頭に戻る
関連記事
関連記事をもっと読む
トラックバックURL


トラックバック

≫ LiteBox導入してみました。 from Another Rocomotion
tsuさんに教えていただき、LightBox JSを導入してみました。これいいですね。画像をクリックすると、同一window内にポップアップで画像表\示し... [続きを読む]

Tracked on March 19, 2006 11:58 AM

≫ 画像ポップアップ、カレンダー休日表示 from SWEET WATER Web Server
今回は以下の二つのカスタマイズに挑戦してました。参考サイトは勿論小粋空間さんです ? Lightbox JS でブログパーツ等の Flash を PNG ... [続きを読む]

Tracked on March 19, 2006 12:06 PM

≫ やっと『Lightbox JS』を導入 from へたれweb-directorの覚え書き
ずっと『Lightbox JS』を使いたかったのですが、アバター表示に使っているFlashがオーバーレイ画像（黒い画面）の上にきてしまい、うまくいかない... [続きを読む]

Tracked on April 28, 2006 6:51 PM

≫ Lightbox JS でブログパーツ等の Flash を背面に隠す方法 from べんじゃみんのブログ
サムネイルした画像をクリックした際に、リンクせずに現在の画面内でオリジナルの画像を拡大表示してくれるエフェクトが搭載できる「Lightbox JS」です... [続きを読む]

Tracked on May 11, 2006 12:29 PM

≫ YouTubeの動画をブログに貼ってAmazonアフィリエイト from TEDDY-G本家
　そんなことしたらRevverじゃん、という気もしないではないが、YouTub [続きを読む]

Tracked on June 17, 2006 9:17 PM

≫ Lightbox 2.02＆Addrel v0.02を導入 from Gimlet
「Lightbox」は、FC2ブログの頃に導入をしていたんですが、「Nice titles」との相性が悪いのかどうしても構文エラーが出てしまってLight... [続きを読む]

Tracked on October 4, 2006 11:34 AM

≫ Lightbox JS v2.0 と Flash from web-conte.com
web-conte.comでも画像の拡大表示時に使っている「Lightbox JS v2.0」。これ、ページ内にFlashが同居していると厄介なのである。... [続きを読む]

Tracked on October 23, 2006 7:53 PM

≫ Lightbox JS v2.0の導入 from 双数姉妹HPリリースノート
Lightbox JS v2.0を導入する。写真（サムネイル画像）をクリックする... [続きを読む]

Tracked on November 9, 2006 2:51 AM

≫ lightboxを導入しました from 三浦仮想研究所
　画像リンクをクリックした際、ファイルがポップアップして表示されるlightboxを導入しました。　マニュアル通りやったにも関わらずOpera&Firef... [続きを読む]

Tracked on November 11, 2006 3:50 PM

≫ litebox 写真をカッコよく表示 from Memo for a Moment
lightbox2.0の軽量版にあたるliteboxを導入してみた。 つまづきそうな所は、、、 link,scriptタグのsrcを書き換えl... [続きを読む]

Tracked on January 3, 2007 8:49 PM

≫ Highslide JS 導入テスト from （※当社比1.1倍）
画像の見せ方を変わったものにしたくて，導入してみました． タグですら理解してないのに，JavaScriptに手を出したのは，無謀でした． ... [続きを読む]

Tracked on March 26, 2007 6:44 PM

≫ フラッシュも暗闇に消す（Lightbox） from DAISUKI-JAM
Lightbox JS v2.2 Pluginを使用していますが、サムネイル画像をクリックした時にフラッシュの画像（BlogPet等）は黒背景にうまく隠れ... [続きを読む]

Tracked on March 29, 2007 2:46 PM

≫ Lightbox：サムネイル画像クリックで格好良く画像をオーバレイ from DIS is the BLOG
ブログやホームページに貼り付けた画像のサムネイル... [続きを読む]

Tracked on December 24, 2007 12:43 AM

≫ [Ajax]thickbox.jsで拡大した画像の上にswfが表示されるのを防ぐ from SCRATCHBRAIN.BLOG v2
昨日までの拡大時のイメージ swfが拡大画像の上にある。... [続きを読む]

Tracked on October 21, 2008 2:04 AM

≫ 本日のわたくし -Lightboxなどで、Flashが前面に表示される編- from spring-tree
Flashを使用しているページに、Lightboxなどを使用している場合、 Flashが前面にきてしまい、グレーの背景に隠れないってことがあります。 こん... [続きを読む]

Tracked on January 19, 2009 1:06 PM

≫ Lightbox等の写真ポップアップ時にFlashが最前面に表示される時の対処法 from WEBサイトを作り始めたひとの覚書
すっかりお馴染みになった、画像をかっこよく拡大表示する 「Lightbox JS」等のスクリプト。 普段Firefox中心なので気付かなかったですが I... [続きを読む]

Tracked on June 11, 2010 5:07 PM
コメント

おはようございます?。
暗闇にポカ?ンと浮かぶFlashが気になっていたので（笑）、この情報トテモ助かります。
有り難うございました。

[1] Posted by toycozy : March 17, 2006 7:27 AM

今朝、特定のエントリーの背景だけ変える方法を探しに「小粋空間」を訪問すると、いきなり私のネームが出てきたのでびっくりです。見よう見まねで、Flashを隠したのですが、技術的にしっかりサポートしていただいて感激です。
　リンク先が私のblog・mainになっていますが、こちらの方がよいかなと思います。

[2] Posted by n_shuhei : March 17, 2006 9:28 AM

いつも気になっていたので、非常に助かります！
私はFlashの仕様かとあきらめていました…
ありがとうございました。

[3] Posted by 白露 : March 17, 2006 12:31 PM

＞toycozyさん
こんにちは。
記事参照ありがとうございます。
私の知りえない情報でしたが（笑）、お役に立ててなによりです。

＞n_shuheiさん
こんにちは。
ご連絡ありがとうございます。
頂いたURLにもリンクを貼っております（基本的にサイトのトップと記事の両方にリンクするようにしています）のでご安心ください。

＞白露さん
こんにちは。
記事参照＆コメントありがとうございます。
ではでは！

[4] Posted by yujiro : March 17, 2006 2:28 PM

　yujiroｻｧﾝ｡.:♪*:･'(*⌒―⌒*)))
　　いつもお返事ｲﾀﾀﾞｷありがとぉ?
　ございますm(__)m　とても感謝します＾?＾♪
　早速、挑戦してみまぁぁすヾ(;´▽｀A`


　　　　マネェ★より

[5] Posted by マネェ★ : March 17, 2006 5:55 PM

いつもお世話になっております。
Flashパーツが前面に出てしまう件、もう、スッキリって感じで、早速紹介させていただきました。ありがとうございます。

[6] Posted by ARCH : March 18, 2006 3:25 AM

＞ARCHさん
こんばんは。
記事参照＆ご紹介ありがとうございます！
私は Flash を表示させていないので全く気がついておりませんでした。（笑）
ではでは！

[7] Posted by yujiro : March 19, 2006 2:16 AM

こんにちは。

うちも似たような画像POP UPを利用しているんですが、画像がFlashに隠れる現象が以前から気になっていました。
記事を読ませていただいて早速試してみたのですが、一つ欠点（？）が見付かりました。

「ブラウザー上に見えていないとFlashが起動しない。スクロールして少しでも見えれば起動する。」

ファイルを引っ張るとの直接貼り付けるのとではやはり違うのでしょうか＾＾；
それともうちの環境が悪いかな？

[8] Posted by WIND : March 19, 2006 10:56 AM

＞WINDさん
こんばんは。
情報ありがとうございます。
「起動しない」というのは Lightbox JS の起動に関わらず、ということですね。
感覚的にはリンクリストの JavaScript を直接埋め込んでいることと同じなので、違いはないと考えています。
ところで「Flash が見えていない状態で起動している」ということを、どのようにして確認されているのかご教示頂ければ幸いです。

いずれにしても、２．２につきましては動作を保証するカスタマイズでないことを記してますので、ご了承ください。
それではよろしくお願い致します。

[9] Posted by yujiro : March 21, 2006 2:04 AM

こんにちは。
お返事ありがとうございます＾＾

「なぜ起動していないのが解るのか？」

実はBlogPetの背景でBGMを設定できるFlashを導入しています。
で、Petを設置（ブラウザー上では見えない位置）しているページを表示すると、BGMが鳴らないのです。おかしいと思いつつ、Petが見える位置にスクロールすると読み込みが開始されたのです。
そこで他のFlashも確認してみたのですが、やはり同じように見えるところまでスクロールして初めて読み込まれていました。

てな感じです＾＾；

[10] Posted by WIND : March 21, 2006 11:21 AM

＞WINDさん
こんばんは。
早速のご返事ありがとうございます。
勉強になりました。

[11] Posted by yujiro : March 22, 2006 12:46 AM

＞yujiroさん
いつもご丁寧な回答ありがとうございます。
Flashではないのですが、私のサイトでご覧いただけるようにlightboxを機能させたときにAmazon　affiliateのselect　boxを隠すことができなくて困っています。Amazonに質問もしてみたのですが、HTMLソースの加工は禁止しているとの回答です。　yujiroさんは、Search　this　siteでのselect　boxはlightboxを動かすと隠れるようにされていますが、どのようにされているのでしょうか。いつもビギナーの質問で申し訳ありませんが、ご教示いただければありがたいです。

[12] Posted by n_shuhei : May 12, 2006 9:12 AM

＞n_shuheiさん
こんばんは。
このシリーズの最初に記してある通り、IE/Opera では iframe による表示部分がきれいに隠れないものがあるようです（FirefoxではOK）。
色々調べてみましたが今のところ解決策はみつかっておりません。
なおAmazon の検索フォームのHTMLをそのままページに書き出したところ、隠れました。
それではよろしくお願い致します。

[13] Posted by yujiro : May 14, 2006 11:33 PM

＞yujiroさん
早々のご回答ありがとうございます。
Amazonの検索フォームを小さいほうに変更しましたら、隠れました。大きい方ではだめでした。
Thnks a lot!

[14] Posted by n_shuhei : May 15, 2006 7:03 AM

＞n_shuheiさん
こんにちは。
ご連絡ありがとうございました。
無事に解消されてなによりです。それにしても不思議ですね。
ではでは！

[15] Posted by yujiro : May 15, 2006 10:36 AM

最近,NHK時計を自分のlivedoor blogに設置したんですが、flashが使われてるためにlightboxとかちあってしまいました。それで検索した結果、こちらのページを参考に試行錯誤しているのですが、私がjsに疎く、ブログペットと若干勝手が違う故に、実現できず困っております。よろしければご教授願えませんでしょうか。よろしくお願いいたします。

[16] Posted by neo : November 20, 2006 5:37 AM

＞neoさん
こんにちは。
ご質問の件につきまして、実現可能と思われますがNHKが配布の際にコード改変を禁止しているため、申し訳ありませんが回答については控えさせて頂きたいと思います（そういう意味では他のパーツも同じかもしれませんが）。
お役に立てず申し訳ございません。

[17] Posted by yujiro : November 21, 2006 1:08 PM

youjiroさん、こんにちは。
いつも大変お世話になっております。
遅ればせながら、Serene BachにLiteboxを設置いたしました。
（昨夜該当記事にTBさせていただき、弊ブログでは成功となっておりましたが、反映されていないようです）
Litebox自体はステキに動作しております。
（以前はLightbox Plusを設置しておりましたが、何かと干渉してしまっていたのか、背景がどうやっても表示されず、またローディング画像もセンタリングできませんでした）とところが、BlogPet他、いくつかFlashのブログパーツを設置しておりますので、こちらの記事も参考にさせていただいたのですが、どうもうまくいきません。
BlogPetのソース自体が、まったく違うものになっておりますので、どうしたらいいのか途方にくれております。

お忙しいところ大変恐縮ですが、何かアドバイスをいただけましたら幸いです。

[18] Posted by まひな : October 24, 2007 3:57 PM

＞まひなさん
こんにちは。
お世話になります。

ご質問の件ですが、ご要望事項として承りました。動作確認ができしだいエントリー致しますので、申し訳ございませんがしばらくお時間ください。
それではよろしくお願い致します。

[19] Posted by yujiro logo : October 25, 2007 3:49 PM

yujiroさん、こんばんは。
早速のお返事ありがとうございました。
お忙しいにもかかわらず、動作確認していただけるとのことで感謝しております。
ありがとうございます。

2点お詫びです。
まずトラックバックの件、今日きちんと反映されていました。
承認待ちだったのでしょうか、早まったことを書きまして申し訳ございませんでした。

もう1点、これが一番申し訳ないことなのですが、yujiroさんのお名前を打ち間違えてしまいました。
決してお名前を間違えていたわけではないのです……。
失礼をお許しください。

それでは今後ともよろしくお願い申し上げます。

[20] Posted by まひな logo : October 25, 2007 11:34 PM

＞まひなさん
こんばんは。
トラックバックは承認待ちでした。
公開が遅くなり申し訳ありません。

名前間違い、どうぞお気遣いなく。
ではでは！

[21] Posted by yujiro logo : October 26, 2007 12:12 AM
コメントする
greeting

*必須

*必須（非表示）


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り（プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り）、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります（全て半角文字）