ある方のブログに「IEでは角丸はムリかも？」なんてコメントをしちゃったのでちょっと調べてみました。
ご存知のとおりIE８まではCSS3が使えないので「border-radius」を使った角の丸めは適用になりません。
「border-radius」の使用例は以下
これは、CSS3で角を丸くするCSSのサンプルです。
#samplecss3{
padding:15px;
color:#000;
background:#999;
border-radius:15px;
-webkit-border-radius:15px;
-moz-border-radius:15px;
}
CSSはかんな感じです。
- 「border-radius」はCSS3草案
- 「-webkit-border-radius」はSafari,Google Chrome用
- 「-moz-border-radius」はFirefox用
です。
CSS3が使えないIEの場合は、擬似要素と背景画像を使えば強引ですが角が丸くなります。
まずはフォトショとかでまん丸の画像を作ってそれを4分割。4つの画像を4隅に配置します。
これは、角を丸くするCSSのサンプルです。
#sample{
padding:15px;
color:#000;
background:#999;
}
#sample:before{
content:url(左上画像);
display:block;
margin:-15px -15px 0 -15px;
height:15px;
font-size:1px;
line-height:0.1;
background:url(右上画像) no-repeat top right;
}
#sample:after{
content:url(左下画像);
display:block;
margin:0 -15px -15px -15px;
height:15px;
font-size:1px;
line-height:0.1;
background:url(右下画像) no-repeat bottom right;
}
擬似要素の「:before」「:after」を使っているので今のところIE8限定です。
画像をうまく作りこめばCSS3使うより若干美しい表現が可能になるか？と。いずれにしても面倒臭いっすけど･･･
アメブロの場合だと記事部分の「.entry .entry_head」「.entry .foot」をうまく使えば背景画像を使って角丸ができそうですが、横幅を変更するたびに背景画像を作り変えなきゃならんかもしれん･･･ 頑張ってみてください。
あとは、JavaScriptを使ってもできますけどすいません･･･そこまで調べてません。