タブメニュー - MMOがしたいぞ -- World of Warcraft

デザイン「tpl002_ホワイト」の上部にある、タブメニューを弄ってみる。

よくある、マウスを乗せると色が変わるようにしてみた。
いろいろ試してみたが、ユーザ定義CSSで上書きするだけではうまくいかず、結局、「基本デザインのCSSを無効化する」ことにした。

-基本デザインのCSSを全部コピーして、ユーザ定義CSS欄に貼り付け。
-基本デザインのCSSを無効化する にチェック。

タブメニューに関するデザインは、/* ----- Tab ----- */ 以降に書いてある。
タブは全部で6個あり、その１つ１つにデザインが設定されている。

class	メニュー
tab01	編集
tab02	設定
tab03	ログイン中
tab04	ログアウト
tab05	ログイン
newpage	新しいページ

「ログアウト」タブを例に、以下が基本デザイン

.tab04{
    text-align:center;           /* テキストを領域の中央に */
    width:80px;                  /* 領域の幅 */
    background:#fff;             /* 背景色(なぜか白設定) */
    padding:3px;                 /* テキストの周りの幅 */
    float:left;                  /* 左寄せ？ */
    color:#000;                  /* テキスト色(なぜか黒設定) */
    border:#333 solid 1px;       /* 領域のボーダー(色,種類,太さ) */
    border-width:1px 1px 0 1px;  /* ボーダーの太さ(上,右,下,左) */
}

微妙になぞな表記があるが、気にしない。
これを、下記のように追加変更する。

.tab04{
    width:80px;
    float:left;
}

.tab04 a{                         /* 通常時 */
    text-align:center;
    width:80px;
    border:#333 solid 1px;
    border-bottom-width: 0;       /* ボーダーの太さ(下:0) */
    float:left;
    padding:3px;
}

.tab04 a:hover{                   /* マウスオーバー時 */
    text-align:center;
    width:80px;
    border:#333 solid 1px;
    border-bottom-width: 0;
    float:left;
    padding:3px;
    background: #ddd;             /* 背景色(RGB) */
}

タブ全体が<a>タグの要素になっていて、マウスを乗せると背景に色が付く、そんな感じ。