IE6でアクセスしたらページ右上に「アナログ」と表示するJavaScript

IE6を使って閲覧すると右上に『アナログ』って出るようにしようぜ。

このメッセージは各地で反響を呼んでいて、先日のCSS Nite in Ginza, Vol.29でも取り上げられました。
すでに何人かの方がこのネタに反応してスクリプト等を公開していますが、私もこのネタに乗って、「ie6_analog.js」というJavaScriptを作ってみました。

2008年12月22日　8時25分
ダウンロードのリンクが間違っていたので修正しました。

1.fixed.jsのインストール

「ページの特定の箇所に常に何かを表示する」という技は、CSSの「position : fixed;」を使えば可能です。
ただ、IE6はfixedには対応していません。

そこで、「fixed.js」というJavaScriptのライブラリを利用します。
fixed.jsは、以下のページの最後の「module」のリンクからダウンロードすることができます。

ダウンロードしたfixed.jsは、ご自分のサーバーにアップロードしておきます。

次に、以下からZipファイルをダウンロードします。

ダウンロードしたファイルを解凍すると、「ie6_analog.js」と「ie6_analog.css」の2つのファイルができます。

ie6_analog.cssは、そのままご自分のサーバーにアップロードします。
また、CSSの中身をご自分の好きなようにカスタマイズしてからアップロードされても構いません。

次に、ie6_analog.jsの先頭部分を以下のように書き換えてから、アップロードします。

書き換える箇所	内容
var innerHTML = 'アナログ';	メッセージとして表示する内容を指定します。 HTMLを指定することもできます。
var fixedURL = '・・・';	fixed.jsのアップロード先のURLを指定します。
var cssURL = '・・・';	ie6_analog.cssのアップロード先のURLを指定します。
var topMargin = 0;	メッセージの上の余白をピクセル単位で指定します。
var rightMargin = 0;	メッセージの右の余白をピクセル単位で指定します。
var timeOut = 0;	メッセージを表示し続ける時間を秒単位で指定します。この値を0にすると、ページが開いている間は表示され続けます。

最後に、「アナログ」のメッセージを表示したいページで、HTMLの「</body>」タグの前に、以下の行を追加します。
「アップロード先」の箇所は、ie6_analog.jsのアップロード先に応じて書き換えます。

<script type="text/javascript" src="http://アップロード先/ie6_analog.js" charset="utf-8"></script>

ページのHTMLの構造によっては、ページの横幅が広がる現象が起こります。
横スクロールバーが表示されている状況でページの横幅が広がると、その広がった部分の背景が正しく表示されない場合があります。

コメントする