IE6のみに「アップデートして下さい」とメッセージを表示させるjavascript

マイクロソフトからはとっくにサポートが終了となり、大手ポータルサイトでもサポート打ち切り、

内閣官房情報セキュリティセンターという国の機関からも「アップデート」を推奨されているブラウザIE6。

http://itpro.nikkeibp.co.jp/article/NEWS/20100621/349374/

 

ここ数年のアクセスの傾向から行くと、だいぶ少なくなってはいますが、

まだまだ数パーセントはIE6を使っている人がいます。

 

IE6に対応したくはないが、IE6ユーザーに「デフォルトで崩れてるサイトじゃん・・・」と思われたくないのもホームページ制作者の心境です。

そこで、IE6でアクセスした場合のみ「アップデートして下さい」というメッセージを表示すれば、

「IE6ユーザーを一人でも減らす事」に貢献し、かつIE6に対応する手間を省く事が出来るかと思います。

 

↓通常のブラウザで見た場合

 

↓IE6で見た場合

 

サイトのデザインを損なわずにメッセージを表示させる事と、通常のブラウザで見た場合は全く関係ないというのがミソ。

使用したのは、以下のスクリプトです。

 

参考サイト

http://www.d-31n.com/blog/wp-template/2224/

 

■HTML部分

<script type="text/javascript" src="../js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(function () {
     if ( $.browser.msie && $.browser.version <= 6 ) {
     $('body').prepend('<div class="ieerror"><a href="http://www.microsoft.com/ja-jp/windows/products/winfamily/ie/function/default.aspx" target="_blank">あなたは旧式ブラウザをご利用中です。このWEBサイトを快適に閲覧するにはブラウザをアップグレードしてください。</a></div>');
     }
});
</script>

※埋め込みはどこでもOKですが、</body>の直前あたりが良いかと思います。

※Jqueryをダウンロードして読み込む事(バージョンは最新のでもイケるはず)

※表示させたいページすべてに埋め込む

 

■CSS部分

/*--------------------
IE6メッセージ
---------------------*/
 
.ieerror {
	color:#FFF;
        background:#000;
        padding: 10px;
        text-align:center;
        font-weight:bold;
	position:absolute;
	top:0px;
	left:0px;
	z-index:1000;
	width:100%;
	opacity:0.8;
	filter: alpha(opacity=80);
	-ms-filter: "alpha( opacity=80 )";
}
 
.ieerror a {
	color:#FFF;
}

 

透過させて一応背後のコンテンツの閲覧は可能にしています。

CSSはお好みで変更して下さい。

今後作るサイトにはガンガン入れていこうかな。

新着ブログ一覧

2016.04.19 Apple製品のRetinaディスプレイの解像度を比べてみる(2016年4月時点)
2016.04.19 WEBサイトの採用・求人ページは常に表示!
2016.04.18 1ページだけのサイトを薦めない理由
2016.04.17 チャレンジしない人生なんて面白く無い
2016.04.10 全角英数字なんて無くなればいいのに
ブログトップへ