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

今日を入れて、あと４日で９月も終わりですね。。あっという間です。
金曜日～土曜日の深夜、半ば夜通しで頑張ってTOPページと目次ページのデザインを仕上げました。
土曜日、日曜日とも夜は図らずも爆睡してしまったので、今朝からまた作業を再開しました。
今週木曜日までには、公約通り最低限度のところまでは進めたいと思います。


今日の早朝起きて調査検討したことですが、目次ページの各項目のボタン（画像）について、JPEGファイルにすると、１個につき25kB程度の容量になるため、できるだけページを軽くするためにも、JPEGではなく、GIFファイルにしようと思います。今日この後、画像ファイルの部品を揃える予定です。

ボタン部分だけは半透明の影を止めて、薄い灰色の固定色の影にし、文字部分とアイコン部分とを別のGIFファイルにします。背景色（薄い灰色）の部分は画像ファイルにはしません。

文字部分とアイコン部分を分けるのは、文字部分をできるだけ大きめな文字の画像としておき、表示はそれを縮小した形にしたいためです。このようにすると、GIFファイルにしても、文字がギザギザにならず、比較的綺麗な形のまま保存できるからだそうです。あるサイトに出ていたGIFに関するテクニックの一つです。

背景色の部分は、ロールオーバーを実現するため、およびサンプルを作成したときに綺麗な表示ならなかったため、敢えて画像ファイルにはしないことにしました。
マウスカーソルが乗っかった時に背景をオレンジ色にしたいのですが、JPEG方式だと、背景が薄い灰色のときとオレンジ色のときとで別々の画像ファイルを用意しなければならず、ただでさえ一つの画像ファイルのサイズが大きいのに、ボタンの数×２の数だけ画像ファイルが必要になってしまうためです。
アイコンと文字を（透過）GIFファイルにすれば、背景を透明化できるので、背景色は別途CSSやJavaScriptからロールオーバー（マウスオーバー）の有無によって色を変えれば、上述の機能を実現できます。

参考までに、サンプルとして、ボタン画像ファイルのJPEG版とGIF版を以下にアップロードしておきます（ただし、GIF版はサンプルなのでアイコン、文字、背景とも一つのファイルになっています）。

＜JPEG版＞








＜GIF版＞