ナビゲーションの背景画像をマウスオーバーで変更させることはできますか?
→サンプルページ
管理画面の以下のページを開きます。
「デザイン管理」>「スタイルシート編集」
(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 {
.navi A:visited {
.navi A:hover { |
■.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 {
.navi A:visited {
.navi A:hover { |
STEP2 現状のナビゲーション指定を無効にする
スタイルシート内の/* ショップ通信 */~/* ビッダーズオークション */部分のスタイルシート指定を無効にします。
/* ショップ通信 */ .shop { width: ****; height: ****; margin: ****; padding: ****; background-image: *****; } ↓変更後 /* ショップ通信 .shop { width: ****; height: ****; margin: ****; padding: ****; background-image: *****; 以下同様に*/を削除して下さい。
/* 店長日記
/* リンク集
/* 掲示板
/* フリー
/* yahooオークション
/* 楽天オークション
/* ビッダーズオークション |
(5)編集後、【登録処理を完了する】ボタンをクリックして下さい。
(6)管理画面の「デザイン管理」>「テンプレート選択」を開き、【カスタム】にある、先程のテンプレートを選択して【設定処理を完了する】ボタンをクリックします。