バナー部分にメニューを付けた

この夏の暑さと悪天候のためキャンプにも行かず引き篭もってココログのデザインを弄っております (^^；

今回の変更点は表題のように「バナー部分にメニューを付ける」ということ。
右側のリンクを削ってバナー部分に移動させてみよう、という魂胆です。

これまではバナー部分を非表示にし

（#banner { display: none; } ）

代わりに

<a id="banner-img">

の部分に画像を指定しヘッダとして画像だけを表示させていました。

A#banner-img {
DISPLAY: block;
padding: 0px;
background: url(画像のURL);
height: 画像の高さpx;
}

ヘッダ部分はそのまま残しておき、Banner部分に記述されるサブタイトル内にメニューとなるダグを書き加えました。
単純にブロック要素内にリンクを書けば楽なものをリスト表示を使ってみたのでスタイルシートの記述が少し面倒になってしまったのはご愛嬌でしょうか（変な文章だな）。

#banner ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 0px;
}
#banner li {
display: inline;
padding: 0px 5px 0px 10px;
margin: 0px 0px 0px 0px;
font-size: x-small;
}

こんな感じです。
display: inline;
でリストを横並びの表示にさせています。

フォントはピクセル単位の指定にし大きさを固定さようとしたけど、Mozill系のブラウザでは文字サイズの変更が効いてしまうため無駄な足掻きは止めて相対的なサイズ指定にしました。

以上が大まかな変更点です。
ココログベーシックでもかなりデザインで遊べますね。

そんな事をしている暇があったら面白いエントリーを書け、って言われそうですけど (^^ゞ

参考サイト：
　☞ KOROPPYの本棚