画像付きのメニュー

「縦書きの表紙」のまとめのページを作りましたら 気持ちに区切りがつき  二年ぶりに「新しい表紙」を作ってみたくなりました。
今度は普通に横書きにして 中央の大きな花の画像は止めよう という所までは すぐに決まりましたが コンテンツや更新メニューの並べ方は あれこれ悩みました。

画面幅を10:80:10に分け 80%の白地の部分を左右に分けました。 画面サイズの違いに対応できるよう  ピクセルで幅を決めたものを順に左に寄せるように並べることにして 更新メニューには それぞれの画像を飾りましたが 一番上にも小さな画像を並べて それにもリンクをつけました。

IE 幅:1280
幅:1280
お気に入り
お気に入り

幅:1280 では 更新メニューが横に三つ並ぶようにしました。 そのサイズを基準に作りましたので  もっと広い画面では 横に並ぶ数が増えて短くなり 索引などの列の長さが気になるかもしれません。

お気に入りを出しても横に並ぶメニューの数が減らないようにと 右の索引などの列との間に 余裕を持たせましたので 全画面で見ると少し間が空いた感じがします。
Netscape で見ても 同じように見えますので 「お気に入り」さえ無かったら もう少し整った形に 作ることが出来たのに・・・と残念に思っています。

幅:1024
幅:1024
幅:800
幅:800

幅:1024 以下では 更新メニューは二つしか並びませんので メニューの列が長くなります。  そのためにもと 上に並べた小さな画像に リンクをつけました。

幅:800 では 文字サイズを大きくすると タイトルと画像が重なってしまいますし お気に入りを出すと  索引などの列が下に落ちます。
「あらゆる環境に対応できる表紙」を目指しましたが これくらいが私の限界です。