現在のページ（位置）を表示するメニュー

今回の記事はヘッダー下に画像を使って横メニューこれを使っている場合に限ります

よくグローバルメニューで現在表示されているページがわかるようになっていますよね・・

たとえば・・・

アメブロ向上企画書ノート

よくある質問（ FQA ）のページですが・・・左のメニューが「よくある質問」になっています

他のページでもそのページのメニューが表示されています

このブログの仕組みはまったく別で面倒なので説明しませんが・・・

このようにメニューの[目次]をクリックして目次のページが表示されたら・・

メニューの[目次]がマウスを乗せた状態で表示されればいいと思いませんか？

一般的な[アメンバー][読者登録][ペタ][ルーム]などはアメブロのページに移動しますのでメニュー自体が表示されませんので関係がありませんが・・・

仕事とかで使われているブログの場合・・・

[はじめに]とか[料金]とか[アクセス]などといったメニュー項目をクリックしてそのページが表示されたら
そのメニュー項目もそのままマウスオーバー時のままだったらって思いませんか・・

まずはヘッダー下に画像を使って横メニューこれを設置済みとして説明を進めます

たとえばメニュー項目に[目次]がある場合・・・

目次の記事を書くとき・・・

あるいは目次の記事を編集で・・・

HTMLタグを表示にして記事の最初に

<div id="mokuji"></div>　を入れます　　mokujiの部分は他では使っていないID名にします

記事を保存したら[目次]部分のＣＳＳを確認します

2番目のこの部分が[目次]部分のＣＳＳだとします

#menu02 a{
background-image:url(はじめに表示する画像のURL);
}
#menu02{
background-image:url(マウスオーバー画像のURL);
}

知りたいのは#menu02 aです

このＣＳＳはマウスオーバー時用の画像を表示します
その上にはじめに表示する画像を重ねて表示しておいてマウスオーバー時用の画像を隠します・・

マウスが乗ったらbackground-image:none;ではじめに表示している画像を消して下の画像を見えるようにしています

今回の仕組みは・・・

jqueryで要素があるかをチェックします

目次の記事でしたら記事の最初に<div id="mokuji"></div>を入れましたから#mokujiがあれば目次のページということになります

※当然ですが・・1ページ1記事表示にしておいてください

で・・・

#mokujiがあれば・・・ＣＳＳで#menu02 a　の背景画像を消しちゃいます

つまりマウスが乗ったときと同じ状態のままになるわけです

フリープラグインです

他のページもある場合はドンドン増やしていきます

メニューの2番目が[目次]3番目が[実績]6番目が[ご注意]だとします
#mokujiや#jisekiや#tyuuiは絶対にアメブロでは使わないであろうID名をつけてください

考えるのが面倒でしたら#menu02eとか#menu03eとか#menu06eなんて・・・

該当の記事の最初に<div id="mokuji"></div>とか<div id="menu02e"></div>とか入れないとだめですよ

if($("#jiseki").length){
$("#menu03 a").css("background-image","none");
}

if($("#tyuui").length){
$("#menu06 a").css("background-image","none");
}
});
</script>

あ～・・また業者さんに使われそうですね・・・

新・アメブロ向上企画書　アメブロの「CSS編集用デザイン」のカスタマイズ