とりあえず、初めにテンプレートについて。
出来上がったテンプレートはこんな感じ（画像をクリックするとページが開きます）↓


以前作ったのは黒ベースで暗かったので、今回は明るくしようかと、青を使ったシンプルなデザインのテンプレートにしました。涼しげな感じになったと思います。もうスグ夏だし、雰囲気的にはいい感じじゃないかと。

基本的に線で囲ったりってのは好きじゃないです（前回のは囲ってましたが）。なんだか線で囲うと窮屈な感じがしてしまうので。

ちなみに、本当なら下の画像のように、意味も無くグラデーションをかけたものにしたかったんです。（画像はクリックで拡大します）


が、Internet Explorer（IE）でもFirefoxでも表示できるように設定したら、ブラウザの幅が狭い場合、スクロールバーが上手く表示さず、操作性が悪いものになっちゃって…。
「これは共有テンプレートにはできんだろう」と思いグラデーションは無しにしました。

グラデーションは画像を使ったんですが、IE6では「透過色が使えない」「"position:fixed;"が使えない」ので、アーでもない、コーでもないと、結構、苦労したのになぁ…。

以下、いつか参考にするかもしれないので、その事についてまとめておきます。

まず、透過色について。

以下のページで紹介されているJavascriptを使わせて頂きました。
アルファ画像を扱うalphafilter.jsライブラリ[to-R]

このJavascriptを読み込むだけで透過色は問題解決。といっても、Javascriptの内容については理解できてないですが…。


次の問題、「"position:fixed;"が使えない」について。

これに関しては下の二つのページを参考にしました
IEで固定座標を指定する方法
position

とりあえず「IEで固定座標を指定する方法」の方を試してみるも上手くいかず、「position」を見ながら「あ～そうか」と自分なりに理解して、「IEで固定座標を指定する方法」をちょっと変えて作りました。

結局、どうしたかを簡単に示すと、以下のような感じになります。ここでは簡単のため上側のグラデーション画像を固定する方法のみ示します。

CSSの編集
これで、bodyは高さをウィンドウサイズにし、そこからはみ出た部分をスクロールするように設定します。
で、画像を表示するブロックは
とします。IE6は子セレクタ（「body > div.GradationTop」の「>」部分）を認識しないので「body > div.GradationTop 」以下は無視されます。一方FirefoxやIE7などのブラウザは子セレクタを認識するので、「div.GradationTop」の情報を上書きします。

また、HTMLはこんな感じ↓
で、そんなこんなで出来上がったサンプルページはこちら↓
サンプルページ

ブラウザのウィンドウ幅を狭めると、スクロールバーの操作性が悪くなるのが分かると思います。

今回は、画面全体にグラデーションをかけようとして上手くいかなかったんですが、任意の要素に対して固定位置を設定するのには使えますね。

「IE6がもっと、まともなブラウザなら、こんな苦労しなくて済むのに」と思いつつ、IE7が早く浸透してほしい、いや、Firefoxがもっと浸透してくれれば…。まぁ、勉強できたので良しとするか。 でも、一度ビル・ゲイツのメガネを割ってやりたい。

ちなみに、こういったグラデーションのかかった効果は画像を使わなくてもJavascript使えば出来るようです。が、それに思い至ったのはテンプレートを審査に出したあと。なので、またテンプレート作る気になったときには挑戦してみようかと考え中。でも、その前にJavascriptちゃんと勉強しときたいなぁ。

って、そんな事やってるからGIMPについて書かなくなってしまうんですね…。GIMPについてもちゃんとやりますよ。