[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
昨日の記事に書きましたが天下のIEがborder-radiusに対応していない為どうしたら楽に（←ここ、重要です）ボックス要素の角を丸くできるかいろいろ調べました。
JavaScriptを使えば実現できるというのは前から知ってはいたのですが、私自身がJavaScriptにあまりと言うか全く詳しくないので、ロクに調べもせず「無理っ！」と決めつけて手を出さずにいました。しかし今回ばかりはどうしても角を丸くしたいという無意味なこだわりがあったため結構頑張って調べました。
結果的にはかなりあっさりと実現できてしまい拍子抜けです。その方法をメモがてら記事にしておきたいと思います。
※以下の内容は忍者ブログでの場合になります。
必要な物は「Nifty Corners Cube」というJavaScriptライブラリです。他にも角を丸くするためのライブラリはあったのですが、なぜこれかと言うと…検索したら最初に出てきたから(笑)。
まずはNifty Corners CubeからNiftyCube.zipをダウンロードし解凍します。いろいろとファイルが展開されますが必要なのはniftycube.jsとniftyCorners.cssのみ。
まずメモ帳などのテキストエディタでniftycube.jsを開き、37行目あたりの
l.setAttribute("href","niftyCorners.css");を
l.setAttribute("href","http://file.～.com/niftyCorners.css");
のようにhttp://file.～から始まる絶対パスに直します。niftycube.jsとniftyCorners.cssを同じ階層へアップするのでパスの修正は要らないと思ったのですが、修正しないと動作しないようです…。何故だ!?
ま、とにかく次にniftycube.jsとniftyCorners.cssをサーバにアップロードします。
次にテンプレートの編集でHTMLの＜head＞～＜/head＞の中に下記のタグを記述します
<script type="text/javascript" src="http://file.～.com/niftycube.js"></script>
画像を呼び出す場合と同じようにniftycube.jsへのパスはhttp://file～で始まる絶対パスでの記述になります。これを間違えると動きません。
次にniftycube.jsを実行させるためのスクリプト（？）をこれも＜head＞～＜/head＞の中に記述します。記述例は以下のようになります。これは実際にこのテンプレートのHTMLに記述されている内容です。
<script type="text/javascript">
window.onload=function(){
Nifty("div.article","big");
Nifty("div.plugin");
Nifty("div#footer");
}
</script>
このNifty Corners Cube、idセレクタにもclassセレクタにも対応しています。セレクタの複数指定も可能なようです。背景画像もOKです。角の丸みの大きさの指定や特定の角のみ丸くするといったオプションも用意されています。
border-radiusでの角丸とこのNifty Corners Cubeでの角丸、border-radiusでの描画の方が綺麗なんです。Nifty Corners Cubeではアールの部分に若干のガタつきがあるんですよね。ですからこのNifty Corners Cubeはborder-radiusに対応していないIEだけに適用させたいな、と私は思った訳です。で、結局最終的には下記のようなタグになりました。
<!--[if IE ]>
<script type="text/javascript" src="http://file.～.com/niftycube.js"></script>
<script type="text/javascript">
window.onload=function(){
Nifty("div.article","big");
Nifty("div.plugin");
Nifty("div#footer");
}
</script>
<![endif]-->
<!--[if IE ]>～<![endif]-->は条件付きコメントと言って条件に合致するブラウザ以外では中身ごとただのコメントとして扱われるそうです。ですから上記のように記述すればIEの場合にだけNifty Corners Cubeを実行させる事が出来る訳ですね。
記事にするとダラダラ長いですがやってる事は非常に簡単な事なので10分もあれば全ての作業が終わると思います。簡単ですね！もっと早く挑戦していれば良かったな。っていうかIEがborder-radiusに対応してくれたらもっと簡単に済むんだけどね！
