ウェビメモ

web

IE6にも対応させました！スクロールしてもついてくるソーシャルボックス

こんにちは、霙です。
先日公開しご好評いただいたソーシャルボックスたんですが、実はIE6非対応でした。
世の中には、私のようにIEの存在を完全に無視している方は少数派のようですので、
CSSを書き加えるだけでIE6でも動くコードをご紹介致します。

これをheaderに書き足すだけ。

IE7未満のブラウザに対して以下の命令をしてあげるだけでOKなのですよ！top値は調整してくださいね。

<header>～</header>
<!--[if lt IE 7]> 
<style type="text/css">
 #social_box {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+300));
 }
</style>
<![endif]-->

その他のコードは前回とまったく同じです。

HTML
<div id="wrap">
    <ul id="social_box"> 
        <li>お好きなソーシャルボタンのコード</li>
        <li>お好きなソーシャルボタンのコード</li>
        <li>お好きなソーシャルボタンのコード</li>
    </ul> 
    <div id="main"></div>
    <div id="side"></div>
</div>
CSS
#wrap{
	width:960px;
	margin:10px auto;
}

#social_box{
	background:#fff;
	width:60px;
	padding:15px;
	margin-left:-100px;
	text-align:center;
	position:fixed;
	top:300px;
	list-style-type:none;
}

#main{
	width:660px;
	float:left;
}

#side{
	width:300px;
	float:left;
}

はい。これでIE6でもちゃんと動くようになったのではないでしょうか？当サイトには相変わらず実装しておりませんが。

IEで見た時なんかカクカクする・・？

そういう方は下記のコードをbodyのcssに書き加えてみてください。

CSS
body{
	background: url(null) fixed #ffffff;
}

そんな感じで皆さんのブログにぜひぜひ実装してみてくださいね！
以上、霙でした！

IEアイコン配布元：Destroy, Ie, Internet explorer icon | Icon Search Engine

5/25追記

かっこいいPageTop用ボタンを発見しました！！

参考：Themes Kingdom

Ranking