IE6で透過PNG

IE6では通常透過PNGは適用されないので
折角アルファ属性を持つファイルを指定しても
その下の画像は透けて見えません。
ファイアーフォックスやオペラ、IE7でご覧の方には
ちゃんと背景の漫画が透けて見えると思います。
IEの6以前の方には四角いスペースが
背景の漫画を見えなくしていると思います。 デザインウォーカー:透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる
それを解決するJavaScriptが上記リンクで
掲載されていたので紹介します。
こちらではIE6以下で御覧の方も背景の
漫画が文字の土台を通してご覧いただけると思います。
”韓流”プログラマのユンサンにより作成されたソースで
下記リンクに詳細が公開されています。 透過PNG と IE と IE7

映画風タイトル・クローズアップ

一つ前のアーティクル「外部jQueryテスト」をH1タグにアニメーション適用しました。
このアーティクルが存在する間はブログタイトルが表示と同時に大きくなり始める筈です。
ブラウザがファイアーフォックスかオペラだと上手く動いたのですが、 IE6だと最初、何故か拡大の拡大から設定した拡大値へ縮小してしまう感じになりました。 これはCSSテンプレートで
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまったようです。
上記部分を削除して、尚且つアーティクル内でフォントサイズを小さなものに指定するとIEでもアーティクルのタイトルに偽り無く済むようです。
いつも乍マイクロソフトの唯我独尊には泣かされます。
IE8のベータ版は2008年前半に登場、標準準拠と互換性確保に注力」というニュースも穿って見てしまい勝ちになります。

参照サイト:高橋登史朗さん:jQueryの魔法

---2008/4/2追記--- 当記事がトップページからはみ出したため、 トップページのタイトル拡大機能は20箇遅れの記事 映画風タイトルズームアップ に譲り、当記事では、アクセスするとタイトル文字と色が変わることにしました。 前記事、 外部jQueryテスト での別機能の応用です。 こちらのスピードは以前の7割増しですので、よりダイナミックになっています。

外部jQueryテスト

DIVでtestClassです
DIVでtestClassです
DIVでtestClassです
DIVでnoTestClassです

PでtestClassです

ネタ元は高橋登史朗さんの「jQueryの魔法」です。
ブログ内にjQueryソースを置けないので外部においたソースを読み込めるか確かめました。
実際に駆動されるのでソース自体を外部ドメインにおくことによる支障は無いようです。
IEだと枠に収まり切らない大きさから段々枠の中に納まるように文字が縮小されるように表示されるかもしれませんが、本来の動きは普通の大きさの文字が段々大きくなるように想定しています。ファイアーフォックス、オペラでは想定通り表示されますが、一部IEは他部分でのフォント設定を拾ってしますようです。jQueryの試験運用自体には問題無い為、放置しました。

メルトダウン

はまぞうブログでも圧倒的人気を誇るHibi日記さんの
あれ~~~!ページが壊れてく~~~~!
というページで興味深いjavascriptが紹介されていました。
効果が劇的で面白いのでこのページにも実装してみました。
元ネタは HTML崩壊 meltdown.js です。

この下の「ClickHere★」というボタンをクリックしてみて下さい。
見る見るうちにご覧のページが崩れ始めます。
ページはリロードすれば元に戻ります。
Click Here!

初期設定

「桜」イラスト3カラム
【2008年3月6日~2008年4月13日】
摘要:映画風タイトルクローズアップ
CSSテンプレート
.blogtitle{font-size:150%;}
と指定してある部分が影響してしまうので削除。

カフェタイム (3カラム)
【2008年4月13日~】
「映画風タイトルクローズアップ」に関しては特に問題なしにより.blogtitleはデフォルト設定。

"初期設定" の続きを読む