マイクロソフトからはとっくにサポートが終了となり、大手ポータルサイトでもサポート打ち切り、
内閣官房情報セキュリティセンターという国の機関からも「アップデート」を推奨されているブラウザ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 | 全角英数字なんて無くなればいいのに |