貴方のサイトを私色に

DIVコンテナに頼らないスタイルを完成させ、しばらく後に思いついたのは『これを突き詰めれば自分のサイトのスタイルで余所のサイトを見れるのではないか?』と言う事でした。ユーザースタイルシートに自分のサイトで使っているシートを使う事ができるのでは無いだろうか、と思ったわけです。これは、そのためにシートを改造していく過程です。ユーザーエージェントには普段常用しているInternet Explorer 5.5 を用いています。

まずはやってみる

webサイトのスタイルシートを無効にする

まず、自分のシートだけを適用できるよう、webで指定されているスタイルシートを無効にしなければなりません。IE4/5にはスタイルシートをoffにする機能が標準には無く、一見するといきなり行き詰まってしまったように見えますが、これはレジストリをいじる事により可能です。方法に付いてはHTML鳩丸倶楽部鳩丸ご意見番 - Microsoft Internet Explorer 5 でスタイルシートを無効にする方法を参照してください。(というかかなり前にここを参照に設定済だったのですが)

ユーザースタイルシートを適用する

次に、自分のサイトのスタイルシートを適用させます。単純にディレクトリ構造保ったままコピーしてやればうまくいくかと思ったのですがうまくいきません。どうやらユーザースタイルシート中では @import を認識してくれない様です。認識してくれれば便利だと思うのですが無理なようなら仕方ありません。分割してあったシートをインポートしている順番につなげ合わせ、一つのファイルにまとめる事にしました。で、完成したのが次のシートです。

取り敢えず見てみる

さっそく適用してIEを立ち上げてみると…自分のサイトはclass属性に依存している部分で見栄えに違いがあるものの、ちゃんとレンダリングされました。まあ、もともと自分のサイトで調整していたスタイルなのですから当然ですね。

style1.css スクリーンショット(1)

System I.F.C. 最上位ルート。update-time部が通常のp要素と同様に装飾されてます。

style1.css スクリーンショット(2)

Recommended Links。ナビゲーションバーの装飾がやはり通常ul要素と同じになっています。外部へのアンカーの装飾も(当然ですが)されていません。

style1.css スクリーンショット(3)

My "User Style-Sheet"。見出し、水平線、引用ブロックは問題なくレンダリングされています。

ところが他のサイトを見に行ったとたん色々と問題が。テーブルの指定はそもそも指定なかったので仕方ないが、その他にも予想外のブロック要素の使われ方をされるとおかしくなってしまいます。

本当はここにそれらのサイトのスクリーンショットを入れていたのですが、人様のサイトのスクリーンショットを掲載するのはさすがに問題ありと思い削除しました。それぞれのサイトの作者の了解が得られれば改めて公開します。自分のサイトが正しく表示されない様を掲載されて面白いと感じる人間はいないように思われる為、ここでは実際に遭遇した例を元に自前でhtmlを用意することにします。

それらのおかしなレンダリングのされ方は私の用意したユーザースタイルシートの不具合であり、該当サイトの作者には何の責任もありません。

今後はそれらの不具合に対応できるよう、style1.css を改造していく事になります。

(続く予定)

Copyright © 1999- TAKEKURA Tihiro, System I.F.C. All Rights Reserved.