Blogpetが新しくなって下に広告がつくようになった。
無料で利用している以上文句も言えないが、正直鬱陶しい事この上ない。
そこで、スタイルシートを使ってこれを覆い隠してしまおうと思う。
Blogpetのソースコード
BlogpetモジュールはJavaScriptによって一連のHTMLを吐き出す仕様になっているので、普通にソースを見てもscriptタグしか表示されない。
そこでFireFoxの機能拡張「https://addons.mozilla.org/extensions/moreinfo.php?id=655」を使って、実際に吐き出されるタグを確認する。
<object id="usa" classid="clsid:..." codebase="http://..." align="middle" height="200" width="130">
<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=...">
<embed src="http://..." align="center" height="200" width="130">
</object>
<img src="http://..."> 長い部分は省略した。
こうして見ると、object（及び旧Netscapeのためのembed）と、その後の（恐らくはアクセス解析用の）imgだけで構成されているのが分かる。
これをどういじったら広告を覆い隠せるだろうか。
height設定
はじめに、objectにheightを設定して下の広告部分だけ隠せないかチャレンジ。
しかし、heightが縮んだ分だけ全体が縮小されて表示されるだけのようで、左右に余白ができペット表示部が小さくなる問題点が発生する上に広告は隠せない。
:after疑似要素
次に、objectの後に広告を覆い隠すのを用意することを考える。
まずは:after疑似要素でブロックレベル要素を作り、これをpositionで重ねてみた。しかしどういうわけか、ブロックレベル要素が生成された様子がない。
アクセス解析画像を使う
img要素のwidthとheightを規定し、positionで重ねてみる。しかしこれも、巧く広告を覆い隠してくれないようだ。何故だろう。
Blogpetの設定でアクセス解析を使っていない場合、この画像自体表示されない可能性があるので、取り敢えずこの方法は放棄する。
要素を手動で入れる
詳細デザイン画面からフッターの内容を手書きで変更し、Blogpetモジュールの直後に適当なclassを振ったdivを入れておく。
例によってpositionで重ねるも効果なし。
z-index
ここに至って重ね順を疑い始めた。本来、要素が重なる時には（確か）後に位置する要素の方が上に来る筈だ。しかし実際のところ、これまでにも上の要素が重なって起きた不具合を多数経験しているので、念の為z-indexを設定してコントロールすることにする。
z-indexはpositionがstaticでない時にのみ有効なので、objectとその後の要素にそれぞれposition: relativeを設定するも矢張り巧く行かない。
良く見ると、swfの下に要素が配置されているようだ。ということは、今までうまくいかないと思っていたのは全て、swfの下に潜り込んでいただけだったのか。
別ファイルでテストしてみる。objectの直後にdivを作って重ねる。矢張りswfが必ず上に来る。
これはつまり、Flashのバグだ。HTML要素でありながらCSSに従わない。
Safari、Opera、Firefox、WinIE6で全て同じ挙動ということは、多分画面描画絡みの問題をFlash自身が抱えているに違いない。
つまり、現在のところ広告を隠す手段は皆無ということだ。有料オプションにも広告非表示が謳われていないしコメントで指摘を受けたが、よく見れば有料サービスの案内の一番下「そのほかの特典」に広告の非表示が記載されていた。、ユーザー側での対処方法もない。厭ならユーザーを止めるしかなさそうだ。
