模様替えでやったこと　その1

Top

模様替えでやったこと　その1

角を丸くしてみたのですが、これが思ったより大変(T.T)

角を丸くする方法は、昔からありますが一応ご紹介。

角丸の四角の画像を角だけを使ったりいろいろ方法がありますね。

今回は、ソースをシンプルにしたかったのと
背景に画像を使ったので、角の部分を透過させたかったのと
枠線のみ必要なデザインなので上記の方法とはちょっと違って
こんな感じで上下の部分を作って、縦線は1ピクセルのセルで作ってあります。

横幅はサイトにあわせて作ります。
Fireworksがおすすめです。スライスで一発(^_^)

あとは、できたテーブルの中心のセルに
<div class="blogbody"> ~ </div>
までを入れてしまいます。

これでOK!!

と、ここまでは楽にできました。

ところが！

画像の書き出しで問題が。

PNG形式で背景透明で書き出すと、角丸のエッジがとてもきれいに抜けるのですが
これが、WindowsIEではきれいに抜けてくれません。

仕方ないので、透過GIFを使いましたが
これだとどうしても角丸のエッジがギザギザします。

背景が青系なので、うすめの青を背景色にして、
その青色を透過させてなんとかごまかしました。汗

この微妙な抜け具合をつかむまでに何回も書き出したり
角丸テーブルの貼り付けをやり直したり
ブログ再構築を何回もして、もうへろへろ。

なんだよ〜 WIN IE！

え？？、そんな面倒な背景使うからいけないんだって？
それを言わないで〜〜

Posted: Sun - May 2, 2004 at 05:26 PM