今度は外国のデザイン

またデザインを変えてみた。いろんなことをついやってみたくなる。^_^; このテンプレートのように、サイドのメニューやエントリの背景が透けて、ボディの背景画像が見えるようにしてみたかった。実際ストライプやドットの透過gif を作ってみたが、その上に文字を載せると、えらく見ヅライっちゃ~。これじゃ自分で読むのも疲れるから、やっぱやめた。でも確かに透過gif を使っているように見えるブログをどこかで見た。いくら探してももう見つからないのが残念。あれはプロのデザインのようだったなぁ。。。

今回の miz graphics! さんのテンプレートでは、蝶々の画像に4枚のjpg、ボディ部分に使われている背景画像用の水色と青に塗られた1枚のgif が、zipファイルに同梱されていた。この画像をCSSでposition 設定をして一枚の画像のように仕上げるもの。

Movable Type のサイドやエントリ部分のcontentなどと同じだ。これが見事にピタリとはまって一枚のように見える。そして透過背景のようにみえるところにエントリが来るように、同じくCSSでpositionを定義する。このデザイナーさんの所は皆こういうデザインだった。背景画像に透過されたようにエントリ部分を薄い色でパターン化するのは、私も考えていたが具体的にサンプルとして導入してみることで、より分かりやすかった。こんどは自分でもこうやって背景を作ってみようと思う。