コードをコピペするだけでIE8以下で閲覧したときに警告を表示する『ie-owakon』を作りました

以前、「IE8以下で閲覧したユーザーに嫌がらせをする」というエントリを書いたのですが、それを改良して、コピペで簡単にご自分のサイトに表示できるようにしました。

概要

IEで閲覧したユーザーだけに、メッセージボックスをページ上部に表示させます。IE対応がほんとめんどくさいっていうか古いバージョンのIEとかオワコンなので作りました。

サンプル

こういう感じで出ます。

使い方

表示させたいバージョンを選んでコードをコピーし、あなたのサイトの<body>タグ直下に貼り付けてください。 7行目background-color、8行目color、9行目borderはそれぞれボックス背景色、文字色、ボックス下枠線色です。お好みで変えてください。デフォルトでは薄いグレーです。

ボックスはIE用条件分岐コメントで出し分けているだけです。複雑なコード書けないです…。

IE8以下で閲覧したときメッセージを出す

<!--[if lte IE 8.0]>
<style type="text/css">
#ie{
    width:100%;
    margin:0;
    padding:50px 0;
    background-color:#f5f5f5;
    color:#333333;
    border-bottom:1px solid #cccccc;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    line-height:1.3em;
    background-image:url('http://dl.dropbox.com/u/282961/ieowakon/owakon.png');
    background-repeat:no-repeat;
    background-position:right bottom;
}
#ie a{
    color:#333333;
    text-decoration:underline;
}
</style>
<div id="ie">
    あなたがお使いのブラウザでの閲覧は推奨していません。<BR/>
    <a href="http://www.google.co.jp/chrome/">ブラウザの乗換えをおすすめします。</a>
</div>
<![endif]-->

IE7以下で閲覧したときメッセージを出す

<!--[if lte IE 7.0]>
<style type="text/css">
#ie{
    width:100%;
    margin:0;
    padding:50px 0;
    background-color:#f5f5f5;
    color:#333333;
    border-bottom:1px solid #cccccc;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    line-height:1.3em;
    background-image:url('http://dl.dropbox.com/u/282961/ieowakon/owakon.png');
    background-repeat:no-repeat;
    background-position:right bottom;
}
#ie a{
    color:#333333;
    text-decoration:underline;
}
</style>
<div id="ie">
    あなたがお使いのブラウザでの閲覧は推奨していません。<BR/>
    <a href="http://www.google.co.jp/chrome/">ブラウザの乗換えをおすすめします。</a>
</div>
<![endif]-->

バージョンにかかわらずIEで閲覧したときメッセージを出す（IEホビロンな人向け）

<!--[if IE]>
<style type="text/css">
#ie{
    width:100%;
    margin:0;
    padding:50px 0;
    background-color:#f5f5f5;
    color:#333333;
    border-bottom:1px solid #cccccc;
    text-align:center;
    font-size:18px;
    font-weight:bold;
    line-height:1.3em;
    background-image:url('http://dl.dropbox.com/u/282961/ieowakon/owakon.png');
    background-repeat:no-repeat;
    background-position:right bottom;
}
#ie a{
    color:#333333;
    text-decoration:underline;
}
</style>
<div id="ie">
    あなたがお使いのブラウザでの閲覧は推奨していません。<BR/>
    <a href="http://www.google.co.jp/chrome/">ブラウザの乗換えをおすすめします。</a>
</div>
<![endif]-->

キャラクター

オワコンちゃん（暫定）は、みちょこさん（@michocolate）に描いてもらいました。かわいいですね！

どうぞご利用ください

自由に利用・改変してください。なお利用することによって生じた不利益については一切責任を負いません。IEユーザー減らそう！

INFORMATION