ナビゲーションの背景画像をマウスオーバーで変更させることはできますか?

2008-10-28 13:46
スタイルシートの編集が必要です。

→サンプルページ

管理画面の以下のページを開きます。

「デザイン管理」>「スタイルシート編集」

(1)スタイルシート編集画面が表示されますので、【ベーステンプレートを読み込む】でご利用のテンプレートを選択し【読み込む】ボタンをクリックして下さい。

(2)ご利用のテンプレートのスタイルシートが表示されます。【テンプレート名】を記入して【スタイルシート】を編集します。

STEP1 ナビゲーション部分のスタイルシートを編集する

スタイルシート内の/* ナビゲーション */以下を変更します。
お使いのスタイルシートに.navi A:link {~.navi A:hover { の指定がある場合は、該当部分のみ追加して下さい。指定がない場合は全てコピーし貼り付けて下さい。貼り付け位置は.navi { の終了タグ下にお願いします。

【この色の部分】のみを変更してください。その他の部分(****と記載している指定)は、各テンプレートのスタイルシートごとに指定に違いがあるか指定がない場合もあります。ここではサンプルとして記載しているだけですので、****のように編集しないで下さい。

■既に.navi A:link { ~ navi A:hover { の指定が既にある方
下記の追加する指定の太字部分を、追加して下さい。現状記載してあるcolor指定等は削除しないで下さい。

.navi A:link { ~ .navi A:visited { 内の
----------------------------------------------------------------------------------------
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);

----------------------------------------------------------------------------------------
部分は、.shop { や.diary { の内容をそのままコピーし貼り付けて下さい。
※****部分はコピーした値をそのままにしておいて下さい。

display: block;
のみ追加して下さい。

.navi A:hover { 指定のみ、background-imageにマウスオーバー用の画像を指定して下さい。

----------------------------------------------------------------------------------------
↓追加する指定↓
----------------------------------------------------------------------------------------

/* ナビゲーション */
.navi A:link {
color: ****;
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
display: block;

}

.navi A:active {
color: ****;
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
display: block;

}

.navi A:visited {
color: ****;
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
display: block;

}

.navi A:hover {
color: ****;
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(マウスオーバー用の画像URL);
display: block;

}


■.navi A:link { ~ navi A:hover { の指定がない方
下記の追加する指定を全て追加して下さい。

.navi A:link { ~ .navi A:visited { 内の
----------------------------------------------------------------------------------------
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);

----------------------------------------------------------------------------------------
部分は、.shop { や.diary { の内容をそのままコピーし貼り付けて下さい。
※****部分はコピーした値をそのままにしておいて下さい。

display: block;
は追加して下さい。

.navi A:hover { 指定のみ、background-imageにマウスオーバー用の画像を指定して下さい。

----------------------------------------------------------------------------------------
↓追加する指定↓
----------------------------------------------------------------------------------------

/* ナビゲーション */
.navi A:link {
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
display: block;

}

.navi A:active {
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
display: block;

}

.navi A:visited {
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
display: block;

}

.navi A:hover {
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(マウスオーバー用の画像URL);
display: block;

}


STEP2 現状のナビゲーション指定を無効にする

スタイルシート内の/* ショップ通信 *//* ビッダーズオークション */部分のスタイルシート指定を無効にします。

/* ショップ通信 */
.shop {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: *****;
}

↓変更後

/* ショップ通信
.shop {
width: ****;
height: ****;
margin: ****;
padding: ****;
background-image: *****;

以下同様に*/を削除して下さい。

/* 店長日記
.diary {
width: auto;
height: ****;
margin: ****;
padding: ****;
background-image: url(img/menu_bg02.gif);
}

/* リンク集
.link {
width: auto;
height: ****;
margin: ****;
padding: *****;
background-image: url(img/menu_bg02.gif);
}

/* 掲示板
.bbs {
width: auto;
height: ****;
margin: ****;
padding: *****;
background-image: url(img/menu_bg02.gif);
}

/* フリー
.free_menu {
width: auto;
height: ****;
margin: ****;
padding: *****;
background-image: url(img/menu_bg02.gif);
}

/* yahooオークション
.yahoo {
width: auto;
height: ****;
margin: ****;
padding: *****;
background-image: url(img/menu_bg02.gif);
}

/* 楽天オークション
.rakuten {
width: auto;
height: ****;
margin: ****;
padding: *****;
background-image: url(img/menu_bg02.gif);
}

/* ビッダーズオークション
.bidders {
width: auto;
height: ****;
margin: ****;
padding: *****;
background-image: url(img/menu_bg02.gif);
}



(5)編集後、【登録処理を完了する】ボタンをクリックして下さい。

(6)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。