- 2009-08-07 (金) 15:27
- plugin
まずは手抜き超簡易版。配布コードそのまま流用してます。
wp_footer()に挿入し、position:absoluteでページ上部に持っていくものです。
PHP:
-
<?php
-
/*
-
Plugin Name: IE6 No More(ja)
-
Plugin URI: http://tenderfeel.xsrv.jp/
-
Description: IE6から他のモダンブラウザへの乗換えを進めるキャンペーン<a href="http://www.ie6nomore.com">IE6 No More</a>のタグをbody閉じタグ付近に挿入します。
-
Author: Tenderfeel
-
Version: 1.0
-
Author URI:http://tenderfeel.xsrv.jp/
-
*/
-
-
function nomore_tag()
-
{
-
// 他言語への変更はソース張替えで可能
-
print "<div style='border: 1px solid #F7941D; background: #FEEFDA; text-align: center; clear: both; height: 75px; position: absolute;top:0;left:0;'><div style='position: absolute; right: 3px; top: 3px; font-family: courier new; font-weight: bold;'><a href='#' onclick=\"javascript:this.parentNode.parentNode.style.display='none'; return false;\"><img src='http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg' style='border: none;' alt='Close this notice'/></a></div><div style='width: 640px; margin: 0 auto; text-align: left; padding: 0; overflow: hidden; color: black;'><div style='width: 75px; float: left;'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg' alt='Warning!'/></div><div style='width: 275px; float: left; font-family: Arial, sans-serif;'><div style='font-size: 14px; font-weight: bold; margin-top: 12px;'>あなたは旧式ブラウザをご利用中です</div><div style='font-size: 12px; margin-top: 6px; line-height: 12px;'>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div></div><div style='width: 75px; float: left;'><a href='http://www.mozilla.jp' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg' style='border: none;' alt='Get Firefox 3.5'/></a></div><div style='width: 75px; float: left;'><a href='http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=ja' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg' style='border: none;' alt='Get Internet Explorer 8'/></a></div><div style='width: 73px; float: left;'><a href='http://www.apple.com/jp/safari/download/' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg' style='border: none;' alt='Get Safari 4'/></a></div><div style='float: left;'><a href='http://www.google.com/chrome?hl=ja' target='_blank'><img src='http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg' style='border: none;' alt='Get Google Chrome'/></a></div></div></div>";
-
}
-
-
add_action('wp_footer','nomore_tag');
-
?>
nomore_tag関数をfunctions.phpにコピペしてテンプレートのbody開始タグ直下から呼び出せば
position:absolute使わなくても良くなります。
ごちゃっとしすぎだよな…と思って作ったのが次のもの。
jQuery版
比較的真面目に作ってみたプラグインの方はjQueryが必要です。
Wordpress用になってますがjQuery Plugin単体でも使えると思います。
jQueryのブラウザ判別を利用する場合は1.3以上、使わない場合は1.2.6以上あれば大丈夫。なはず。
判別部分にわずか12文字でIEを判別するスクリプトというのを使ってみています。
jQueryのブラウザ判別は初期状態でコメントアウトしてあるのでお好みで変更してください。
オリジナルソースとの差異
- ソースを大いに簡略化
- インラインCSSを全てCSSファイルへ移した
- closeボタンを画像だけに変更。クリック時にremove()
- body直下にある最初の要素にmargin-top:75px追加し、アラート要素を絶対配置により表示。
closeボタンをクリックした際にmargin-topを0にする
（空間が出来てしまうための対処）
編集後のXHTMLソース
HTML:
-
<!--[if IE 5 | IE 6 ]><div id="IE6NoMore"><div class="wrap"><img class="warning" alt="Warning!" src="http://www.ie6nomore.com/files/theme/ie6nomore-warning.jpg"/><div class="nomore-message"><strong>あなたは旧式ブラウザをご利用中です</strong>このウェブサイトを快適に閲覧するにはブラウザをアップグレードしてください。</div><a target="_blank" href="http://www.mozilla.jp"><img class="firefox" alt="Get Firefox 3.5" src="http://www.ie6nomore.com/files/theme/ie6nomore-firefox.jpg"/></a><a target="_blank" href="http://www.microsoft.com/downloads/details.aspx?FamilyID=341c2ad5-8c3d-4347-8c03-08cdecd8852b&DisplayLang=ja"><img class="IE8" alt="Get Internet Explorer 8" src="http://www.ie6nomore.com/files/theme/ie6nomore-ie8.jpg"/></a><a target="_blank" href="http://www.apple.com/jp/safari/download/"><img class="safari" alt="Get Safari 4" src="http://www.ie6nomore.com/files/theme/ie6nomore-safari.jpg"/></a><a target="_blank" href="http://www.google.com/chrome?hl=ja"><img class="chrome" alt="Get Google Chrome" src="http://www.ie6nomore.com/files/theme/ie6nomore-chrome.jpg"/></a></div><img src="http://www.ie6nomore.com/files/theme/ie6nomore-cornerx.jpg" class="close" alt="Close this notice"/></div><![endif]-->
クローズボタンのjavascript
JavaScript:
-
onclick="javascript:this.parentNode.style.display='none'; return false;"
CSS
CSS:
-
/* IE6 No More CSS --------------------------*/
-
#IE6NoMore {
-
position: absolute;
-
top:0;
-
left:0;
-
width:100%;
-
height: 75px;
-
border-top: 1px solid #F7941D;
-
border-bottom: 1px solid #F7941D;
-
background: #FEEFDA;
-
text-align: center;
-
z-index:100;
-
}
-
#IE6NoMore img {
-
border:0;
-
}
-
#IE6NoMore div.wrap {
-
width: 640px;
-
margin: 0 auto;
-
text-align: left;
-
padding: 0;
-
overflow:hidden;
-
color: black;
-
}
-
#IE6NoMore .close {
-
display:block;
-
position: absolute;
-
right: 3px;
-
top: 3px;
-
font-family: courier new;
-
font-weight: bold;
-
cursor:pointer;
-
}
-
-
#IE6NoMore img.warning {
-
width: 53px;
-
height:73px;
-
float: left;
-
}
-
-
#IE6NoMore .nomore-message {
-
width: 275px;
-
padding:12px;
-
float: left;
-
font-family: Arial, sans-serif;
-
font-size: 12px;
-
}
-
#IE6NoMore .nomore-message strong {
-
font-size:14px;
-
padding-bottom:5px;
-
display:block;
-
color:#CC0000;
-
}
-
-
#IE6NoMore .firefox,
-
#IE6NoMore .IE8,
-
#IE6NoMore .safari {
-
margin-right:20px;
-
}
-
-
#IE6NoMore .chrome {
-
}
Demo
現在このブログで使用しています。IE6で閲覧するとアラートが表示されます。
wordpressでの使用方法
解凍後、プラグインディレクトリへフォルダごとアップロード。その後管理画面から有効化すればOK。
必要があればjsファイルやCSSファイルを編集してください。
ダウンロード：IE6 No More Plugin (v1.1)
IE9用にif文の条件式変更しました
関連記事
- Newer: [js] 文字列を縦書きに変換する
- Older: WindowsVista(Home Premium SP1)が再起動を無限に繰り返す
