サイトリニューアル進捗報告（09/28現在）

09/28（火）分です。
とりあえず、画像部品類を作成しています。
サンプルで後に添付します…と思ったら、Bloggerの調子が悪く、画像添付が何故かできない。。ので、後で新ＵＲＬかデザイン案のページにアップロードします。

一つ前で書いたように、目次ページのボタン部分をJPEGではなく、GIFファイルで持つようにしました。

また、文字部分も結局、項目のタイトル部分（黒色文字）と解説部分（灰色文字）とを別のGIFファイルで持つようにしました。
というのは、半透明影（後述）をつけるときの透明度指定や、文字をギザギザ無く表示させるためにどれだけ大きい文字として画像化しておくべきかといった点で、単純に元の文字の大きさや色の比例関係にはならないと考えたからです。後で微調整できるよう、分けることにしました。

また、いずれも、文字の影を画像ファイルの中に組み込むのではなく、影無しの文字として画像化し、それを画面上では２枚出し、片方（後方）の画像を半透明指定して、微妙にずらして表示させることにしました。
こうすることで、半透明の影を疑似的に表現することができます。
あるいは、さらに、影の部分（文字本体に隠れない部分）のみを別のGIF画像ファイルとして持っておくという手もあるようです（参考：http://blog.info-rich.jp/archives/2007/04/css_4.html）。文字本体に隠れない部分のみのGIF化であれば、それほどファイルサイズも大きくならないかと思いますので、こちらの方法も、“奥の手”としてとっておきたいと思います（今後必要により使います）。

逆に、影を固定的にGIFファイルの中に入れてしまうと、ファイルサイズが大きくなる上（例：影付き文字を画像化→12kB、影無し文字を画像化→7kB）、半透明影にならないので（背景がオレンジ色でも影が灰色のまま）、不便です。

なお、昨日の仕様通り、文字部分をGIF画像化する際、文字の大きさを大きくして保存し、表示の際には縮小して表示させるようにしました。おおよそ２～２．５倍の大きさでGIF画像化すると縮小した時ほぼギザギザ無く表示されることを確認しました。ファイルサイズは大きさが倍になると、ほぼ倍？前後になるようなので、許容されるファイルサイズの総量と文字表示の綺麗さとのバランスで決まることになります（多分２～２．５倍あたりが妥協点）。

しかし、文字の大きさが大きくなると（黒色のタイトル部分）、縮小したとき、文字の太さが無用に太くなってしまうことに気付きました。どうも、文字の大きさに応じて、異なるパターンのフォントが与えられているようで、文字全体の大きさに対する字の太さが微妙に異なるようです。その点は仕方の無いことですが、一応、調べて、別の方法を試してみました。

文字のギザギザはアンチエイリアスが機能していないことが原因とも言えるのですが、当方でもインストールしてあるGIMP2という画像処理ソフトを使って上手く処理できる方法が出ていたので（参考：http://kumacrow.blog111.fc2.com/blog-entry-187.html）、この方法で加工してみました。
背景が薄い色で加工すると、背景を濃い色にしたときに、白いふちが目立ってしまうようですが、当方は、背景色は薄い色だけ（ロールオーバー時：淡いオレンジ、それ以外：淡い灰色）なので、問題ないと考えています。
とはいえ、アンチエイリアスにすると使う色数が一気に増え、より大きい単色文字の場合とGIFのファイルサイズが変わらなくなります。
そこで、上述の白いふちが目立つ問題点も踏まえ、この方法は止め、単純に文字を大きくするだけにしました。
（ちなみに、仰せつかっているWingBrainのサイトデザインも、この方式にしようかと思っています。あちらは、一応JPEG版で区切りの良いまで仕上げているのですが、暫定ＵＲＬに仮アップロードする手前で止まっています。先延ばしモードになりつつあるので、急ぎこちらも方式を見直し、修正したいと思います。）


引き続き、画像ファイル部品の作成を淡々と進めます。一区切りついたら、HTML、CSS、JavaScript記述に移行します。これらは、下案は既にWingBrainのそれを作成したときに出来ているので、それらを組合わせて急ぎ作成します。