アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦! -3ページ目

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

今回の記事は CSS メニューを作っちゃおう7 画像の置き換え これを使っている場合に限ります



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


たとえば・・・

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

http://ameblo.jp/plan-note/entry-10178214989.html

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

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

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


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

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

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


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


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

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


まずは CSS メニューを作っちゃおう7 画像の置き換え これを設置済みとして説明を進めます



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



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

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


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


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


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


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


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


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


知りたいのは#menu02 aです


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

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


今回の仕組みは・・・

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

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

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


で・・・


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

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



フリープラグインです



<script type="text/javascript">
$(function(){
if($("#mokuji").length){
$("#menu02 a").css("background-image","none");
}
});
</script>



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

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

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

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

<script type="text/javascript">
$(function(){
if($("#mokuji").length){
$("#menu02 a").css("background-image","none");
}

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

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



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


新デザイン「CSS編集用デザイン」カスタマイズブログ

新・アメブロ向上企画書  こちらとまったく同じ文章ですm(_ _)m

読者登録させていただきます!よろしくお願いいたします。

このところ・・・・


「読者登録させていただきます!よろしくお願いいたします。」


このメッセージで読者登録される方が目立っています?

最初は同一人物で複数のブログから登録っても思ったのですが・・・

読者登録の仕方までマニアルがあるのでしょうか?

9月の終わりからいきなり増えだしました?

ふ・し・ぎ・・・?



メッセージは不思議ですが・・

多くの方に読者登録していただきましてありがとうございます


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

※追記・・・

わかりました・・・

アメブロの余計なおせっかいでした

読者登録のときのメッセージに初期設定で表示されるようになったんですね・・・

まだ・・以前のように

.

↑たとえドット1文字だけの登録コメントでも相手がわかるだけよかったような気がします・・


また新しい広告が・・・

またまたアメブロで新しい広告が出現?

わたしが気がつかなかっただけ?

以前からそうだったの?




うっかり・・・?

サイドのPRにさわってしまうと・・・・

クリックではないですよ・・さわっただけで・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!

・・・・・・?

完全にブログを乗っ取られたって感じ・・・・

もう笑うしかありませんね・・・






って・・・笑ってばかりではいられません

早速・・アメブロに苦情!!!


今回は答えが要らないから久しぶりにご意見に・・・


アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦!
・・・・?

とっくになくなった「アメばた会議」

・・・・

・・・・・・


なんか

ご意見ご要望なんて・・・

最初から読む気がないってこと?



どうりでいつも問い合わせしても回答がないわけですね・・・