午前中はよく晴れて、日中はやや寒さが和らいだ気がした。

今日は銀行や郵便局でいろいろと手続きをするのに時間がかかった。郵便局は、いちいち紙に書いたりとか、いろいろあるからなぁ。

げんちゃん素材街について、「素材街」と銘打っているのだから街っぽくしたいが、トップページはもっと普通にしたいということで、建物一つ一つを小さくし、街自体を小さくすることにした。それがこれ。

文字は入らないのだが、まぁ普通のメニューもつけるので、マウスオーバーで説明が出たりすればいいかなと。あと、素材系のページは結構JavaScriptも多用していて、背景色が変更できたり、マウスオーバーで壁紙をページ全体に適用したりしている。その辺の「見せ方」にも工夫が必要のようだ。

雪がどんどん降っていた。

商人物語ゲーム街の室内ドット絵が一応完成。といっても、ゲームに参加している人でないとわからないのだが、一応こんな感じ。

この間作成した風景は、それほど表示させる機会はないが、室内ドット絵は毎回表示されるので結構大事である。しかも、ただの飾りではなく、クリックできる場所が結構ある。このように、画像の任意の場所をリンクにするのは、なかなか難しい。これをどうやって実現するかについては、３つくらいの方法がある。まずは、スタイルシートの絶対配置による重ねあわせを利用した方法。げんちゃん素材街のように、建物の間を走る車とか、重ね合わせの表現ができる。ただ、スタイルシートを厳密に組まないと、難しい。また、絶対配置した部分はいいが、その周囲の編集がし難くなる。次に、テーブルを細かく組み、テーブルの各セルに背景画像を設定し、その上に画像をのせる方法。画像の重ね合わせは、背景画像と、のせる画像の２つまでしかできないが、手軽に使うには適している。あと、クリッカブルマップを使う方法もある。これは、１枚の画像の特定の場所をリンクとする方法で、地図などに使うと便利である。今回用いたのは、テーブルタグを使った方法で、以下のように画像を区切っている。

少しテーブルタグを知っている人なら、テーブルタグで左側を２行にして、右側が１行という配置はできそうだが、右側の変則的な列の配置はできないように見える。このような変則的なセルの結合をさせるには、結合させていないダミーのセルを上にこっそり配置しておくとよい。最近はテーブルデザインは使われなくなってきているが、テーブルタグを理解すると、意外と便利である。テーブルの中では、「valign」と「align」によって、クリックさせたい画像を配置すればよい。

朝晩は結構冷えて、寒かった。

室内ドット絵を作成中。キャラクターを描くのが面倒だが、少しずつ描いていこう。商人物語のほか、素材街などでも用い、「建物に入ると、部屋」みたいなイメージを作り出したいところ。

一応オフィスのつもり。