TopMovable TypeJavaScript > Lightbox JS/Litebox で BlogPet を背景画像の下に隠す
2007年11月 8日

Lightbox JS/Litebox で BlogPet を背景画像の下に隠す

Posted at November 8,2007 12:17 AM
Category:[BlogPet, JavaScript]
Tag:[, ]

Lightbox JS でブログパーツ BlogPet の Flash を隠すカスタマイズLightbox JS / Litebox でブログパーツ BlogPet の Flash を PNG 背景画像の下に隠す方法です。

以前、「Lightbox JS でブログパーツ等の Flash を PNG 背景画像の下に隠す」という記事を書いたのですが、BlogPetのソースコードが変更されており、ご質問を頂きましたので再掲します。

1.BlogPet のスクリプトを取得する

BlogPet 表示用の script 要素の src 属性に記述されたURLをブラウザ(Firefox 推奨)に入力すると、下のようなスクリプトが表示されます。

(function() {
 
	try {
		request = encodeURIComponent(document.URL);
		referrer = encodeURIComponent(document.referrer);
	} catch (e) {
		request = escape(document.URL);
		referrer = escape(document.referrer);
	}
 
 
	document.write(
	"<object id='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
		"classid='clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' " +
		"codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' " +
		"width='130' " +
		"height='220'>" +
	"<param name='allowScriptAccess' value='sameDomain' />" +
	"<param name='movie' value='http://media.blogpet.net/5/8/243658.swf' />" +
	"<param name='play' value='true' />" +
	"<param name='loop' value='false' />" +
	"<param name='menu' value='false' />" +
	"<param name='quality' value='high' />" +
	"<param name='bgcolor' value='#ffffff' />" +
	"<param name='FlashVars' value='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
	"<embed name='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
		"type='application/x-shockwave-flash' " +
		"pluginspage='http://www.macromedia.com/go/getflashplayer' " +
		"width='130' " +
		"height='220' " +
		"allowScriptAccess='sameDomain' " +
		"src='http://media.blogpet.net/5/8/243658.swf' " +
		"play='true' " +
		"loop='false' " +
		"menu='false' " +
		"quality='high' " +
		"bgcolor='#ffffff' " +
		"current_url='" + request + "'" +
		"FlashVars='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
	"</object><br />"
	);
 
 
})();
 
 
 
 
document.write('<object id="site" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="130" height="100" align="middle"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://kk.blogtoy.net/swf/48.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="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /><embed src="http://kk.blogtoy.net/swf/48.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="130" height="100" name="site" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /></object>');

これを「ファイル」→「名前をつけてページを保存」を選択し、任意のファイル名(blogpet.txt 等)で保存します。

2.スクリプトの修正

保存したスクリプトを任意のエディタで開き、下記の青色部分を追加してください。注:計4ヶ所あります。

(function() {
 
	try {
		request = encodeURIComponent(document.URL);
		referrer = encodeURIComponent(document.referrer);
	} catch (e) {
		request = escape(document.URL);
		referrer = escape(document.referrer);
	}
 
 
	document.write(
	"<object id='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
		"classid='clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' " +
		"codebase='http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0' " +
		"width='130' " +
		"height='220'>" +
	"<param name='allowScriptAccess' value='sameDomain' />" +
	"<param name='movie' value='http://media.blogpet.net/5/8/243658.swf' />" +
	"<param name='play' value='true' />" +
	"<param name='loop' value='false' />" +
	"<param name='menu' value='false' />" +
	"<param name='quality' value='high' />" +
	"<param name='bgcolor' value='#ffffff' />" +
	"<param name='wmode' value='transparent' />" +
	"<param name='FlashVars' value='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
	"<embed name='usa.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' " +
		"type='application/x-shockwave-flash' " +
		"pluginspage='http://www.macromedia.com/go/getflashplayer' " +
		"width='130' " +
		"height='220' " +
		"allowScriptAccess='sameDomain' " +
		"src='http://media.blogpet.net/5/8/243658.swf' " +
		"play='true' " +
		"loop='false' " +
		"menu='false' " +
		"quality='high' " +
		"bgcolor='#ffffff' " +
		"current_url='" + request + "'" +
                "wmode='transparent' " +
		"FlashVars='public_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&domain=api.blogpet.net&current_url=" + request + "' />" +
	"</object><br />"
	);
 
 
})();
 
 
 
 
document.write('<object id="site" classid="clsid:xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="130" height="100" align="middle"><param name="allowScriptAccess" value="always" /><param name="movie" value="http://kk.blogtoy.net/swf/48.swf" /><param name="play" value="true" /><param name="loop" value="false" /><param name="menu" value="false" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="FlashVars" value="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /><embed src="http://kk.blogtoy.net/swf/48.swf" loop="false" menu="false" quality="high" bgcolor="#ffffff" width="130" height="100" name="site" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" wmode="transparent" FlashVars="domain=kk.blogtoy.net&amp;source=/swf/13.swf&amp;onclick=/click/2/classic/8" /></object>');

3.スクリプトをブログに設定

BlogPet 表示用の script 要素の src 属性 charset 属性を削除し、代わりに2項の内容を追加します。なお、language 属性も非推奨なので削除しても良いでしょう。

変更前

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

変更後

<script type="text/javascript">
[2項の内容をここに入れる]
</script>

以上です。
これで、ページ上の LightBox JS/LItebox 画像を表示した時、BlogPet が背景画像の下に隠れればOKです。

Posted by yujiro
関連記事
人気エントリー
トラックバックURL


トラックバック

Litebox その2 from PEEKABOO
先日導入したLiteboxですが、Flashのブログパーツが画像にかぶってしまうのが気になっていました。ブログのカスタマイズでいつもお世話になっている小粋... [続きを読む]

Tracked on November 11, 2007 12:59 AM
コメント

こんばんわ
またまた少しお伺いします><Lightbox JS2.0を導入したのですが
ここでは 2.0をMT4.0に導入するエントリーがみあたらず
なんとか自力で導入したのですが
画像の表示じたいは できているようなのですが 黒い背景が
画像のところまでしかありません
スクロールすると 画像より下が そのまま表示されています
これは すべて黒で表示することはできないのでしょうか?
それとも わたしの導入のしかたがおかしかったのか、、、、
こちらで おききするのは 筋ちがいかな?ともおもいましたがなにか 解ればとおもいコメントいたしました
なにかわかればでいいので 解決策などありましたら よろしくおねがいいたします
説明わかりにくいと思いますが http://mashyu.sakura.ne.jp/test見てもら得れば症状がわかるとおもいますので お暇なときによろしくお願いします

[1] Posted by ましゅ : November 8, 2007 4:22 PM

yujiroさん、こんにちは。
いつもお世話になっております。

早速エントリーしていただいてありがとうございました!
お蔭様で、画像の前にしゃしゃり出ていたBlogPetが、ちゃんと後ろでおとなしくしているようになりました。
見た目もよくないばかりか、せっかくの画像が隠れてしまい、それがとても気になっていたので、本当にうれしいです。

ありがとうございました。
実は会社でちょこっと作業をしてしまったので(笑)、家に帰ったらうちのブログにもエントリーさせていただこうと思っています。

それではこれからもよろしくお願いいたします。
失礼いたします。

[2] Posted by まひな Author Profile Page : November 9, 2007 2:29 PM

>ましゅさん
こんばんは。
ご質問の件ですが、こちらから拝見させて頂いたところではコメントの事象は発生しませんでした。
ご利用のブラウザは何をお使いでしょうか。

>まひなさん
こんばんは。
ご連絡ありがとうございました。
無事に直ったようでよかったです。
ではでは!

[3] Posted by yujiro Author Profile Page : November 10, 2007 10:44 PM

yujiro様 いつもお世話になりす
こちらは ブラウザはIE7です
ほかのブラウザでh確認してひないのですが
いちどほかの ブラウザでも 確認してみます

[4] Posted by ましゅ : November 11, 2007 4:32 AM

opera Firefox を インストして 確認してみました
operaの場合 画像表示に関してはもんだいないようです
Firefoxは 画面を最大にして見ると 右端が少し元の画面が表示されます縮小で少し小さなウィンドウだと 問題ないようです
ただ この二つとも 私は折りたたみで offで指定してるところがあるのですが
(トラックバックピープル)クッキーは使わずに 
しかし すべて 開いた状態で表示されてしまいます
フラッシュの時計や ブログパーツのゲームなども 表示されないのがあります(test)のほうではなくて(blog)のほうで。。。
うーーーん
むずかしいですね。。。。。(つд・)
なにがなにやら。。。。。。頭が混乱してきました><
できれば IEで なんとかしたいんですけどねー
無理ならしかたがないのですけど。。。。。

[5] Posted by mashyu : November 11, 2007 5:25 AM

>mashyuさん
こんにちは。
IE7の件ですが、今のところ有効な対処がみつかりません。
お役に立てず申し訳ありません。
それではよろしくお願い致します。

[6] Posted by yujiro Author Profile Page : November 19, 2007 11:50 AM

yujiro様こんばんわ
いつもお世話になります。
上記の件了解しました
いろいろお手数おかけして申し訳ありませんでした

[7] Posted by ましゅ : November 20, 2007 1:06 AM
コメントする

*必須



お知らせ:2008年5月現在、多忙のため、7月頃までコメントを速やかに回答できない状態が続きます。ご質問の内容によっては回答が7月以降になる可能性がありますので、予めご了承ください。

太字 イタリック アンダーライン ハイパーリンク 引用

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

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

Now loading...
Entry Trackbacks
Litebox その2
 [PEEKABOO] 11/11 00:59
Entries of this Category
QRcode

現在停止中です
携帯電話からこのQRcodeを撮影することで携帯用URLを取得することができます

URI for cellular phones
ギターに入った猫
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

loading ...
BlogPeople
Now loading...
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
クリエイティブ・コモンズ・ライセンス
Powered by
Movable Type 4.1
 
List Me!