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



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

たとえば・・・

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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　の背景画像を消しちゃいます

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

フリープラグインです

<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>

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

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

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

このところ・・・・

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

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

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

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

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

ふ・し・ぎ・・・？

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

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

※追記・・・

わかりました・・・

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

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

まだ・・以前のように

.

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

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

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

以前からそうだったの？

うっかり・・・？

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

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

・・・・・・？

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

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

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

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

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

・・・・？

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

・・・・

・・・・・・

なんか

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

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

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

アメブロを複数運用されている方・・・

他のブログの最新の記事を記事下に標示して

他のブログへ読者さまを誘導・・　っていかがでしょう

わたしのお勧めは

お気に入りサイトの最新情報・投稿記事をあなたのブログやHPに掲載 フィードウィンド

こちらは横幅も記事にあわせるように変更できますし・・・

あまり余計なものも付いていないシンプルなのがいいと思います
それに余計な登録もなくていきなり使えちゃうし・・

とりあえずAとＢという2つのアメブロを運用している場合で説明します

アメブロＢの記事下にアメブロＡの最新の記事一覧を貼り付けてアメブロＢの読者様をアメブロＡに誘導しようと思います

で・・・・問題はアメブロのRSSには広告が付いてくることなんです

配信しているFringe81（旧社名：RSS広告社）はアメブロの業務提携している会社だから・・

ここもか～って感じです・・・・

で・・使わせていただくのが　RSS広告削除社

枠の中に・・・

http://rssblog.ameba.jp/ＡのアメブロＩＤ/rss20.xml

再びこのＵＲＬをフィードウィンド に入力・・・

今度はＰＲ：が入っていません・・・

フレーム設定で記事にあわせてサイズを入れて・・

タイトル設定や見出し設定・本文設定を好きなように設定してプレビューがＯＫなら

枠内のコードをコピーして表示するアメブロＢのフリープラグインに貼り付けます

が・・・そのときに一手間細工をします

<div id="feedwind">

ココにコードを入れます

</div>

FeedWindのコードを<div id="feedwind">と</div>で囲います

あとはフリープラグインのその下に・・

すべての記事下に表示されるのもウザイので・・・

1ページに最初の記事の記事下にだけ表示するようにしてみます・・

つまりは記事下広告の上って～こと・・・

ちなみにわたしの場合でしたら・・・

<div id="feedwind">
<script type="text/javascript">
<!--
rssmikle_url="http://pipes.yahoo.com/pipes/pipe.run?_id=3e1acf180　　f2b4733&_render=rss";
rssmikle_frame_width="450"; ←貼り付けてみて横幅をかえる場合はここをかえます
rssmikle_frame_height="280"; ←貼り付けてみて縦をかえる場合はここをかえます
rssmikle_target="_blank";
rssmikle_font_size="12";
rssmikle_border="on";
rssmikle_css_url="";
rssmikle_title="off";
rssmikle_title_bgcolor="#0066FF";
rssmikle_title_color="#FFFFFF";
rssmikle_title_bgimage="";
rssmikle_item_bgcolor="#FFFFFF";
rssmikle_item_bgimage="";
rssmikle_item_title_length="20";
rssmikle_item_title_color="#666666";
rssmikle_item_border_bottom="on";
rssmikle_item_description="on";
rssmikle_item_description_length="40";
rssmikle_item_description_color="#666666";
rssmikle_item_description_tag="off";
rssmikle_item_podcast="icon";
//-->
</script>
<script type="text/javascript" src="http://feed.mikle.com/js/rssmikle.js"></script>
<div style="font-size:10px; text-align:right;">
<a style="COLOR: #cccccc" href="http://feed.mikle.com/" target="_blank">RSS表示パーツ</a>
</div>

</div>
<script type="text/javascript">
$(function(){
$("#feedwind").insertBefore("#advertising2:first");
});
</script>

最後にＣＳＳです
アメブロＢのＣＳＳの最後に・・・

記事下との間にスキマをあけて中央に配置します

#feedwind{
width:450px;/*FeedWindの幅*/
margin:50px auto 0;/*記事とのスキマ*/
}

わたしは・・　実は　RSS広告削除社 は使っていません

Yahoo! Pipes をつかっています

つぎはそちらの説明・・・

その次が3つ以上ブログを運用しているって～場合のYahoo! Pipes でまとめて最新一覧の作り方を予定しています

Yahoo! Pipes って・・2日前に1回使っただけだから記事が書けるか・・・・ふ・あ・ん

livedoor BlogRoll

こちらは複数のRSSフィードが使えてしかも誘導したクリック数がわかるレポートが表示されるようなのでよさそうなんですが・・

最初の1行目に広告が表示されるのが嫌だ！（バナーの場合は大きいからもっと嫌！！）
ファビコン表示にしてもアメブロのファビコンを拾ってしまう・・
動作が快適って書いてある割には・・なんか反応が悪い・・・（設定も・・表示も・・）

これが思ったように使えれば Yahoo! Pipes なんて使わなくてもいいのに・・残念

できたよ～って方

見本ブログとしてコメントで宣伝してください（本日コメント開放しておきます）

また・・フィードウィンド以外でやったって方・・大歓迎です

よろしくお願いします　m(_ _)m

※なのでこの記事に関係した質問以外はこの記事にはコメントしないでください
また・・こちらのブログは旧？ベーシック専用です

新しい「ＣＳＳ編集用デザイン」については　新・アメブロ向上企画書 　へ質問ください

（質問のある方がはたして興味のないこの記事の最後まで読んでいただけるものなのか・・・？）

コレはお勧めしません！

って記事にしておいてなんって～ことを・・・？チカチカしたりスムーズに表示できません

を表示しないようにするのでしたら・・・

画像の上にマウスがのると付いてくる

って表示される画像・・・

他の画像に変えちゃえ～












　　 　　




　　 　　

こんな画像を用意します・・・

画像を作るとこの注意

マウスポインターと画像の左上角の位置関係は固定されています

元の画像のサイズは　横58px 縦27px　です


ＣＳＳに・・

/*画像[拡大する]を変更*/
#naviLink{
width:58px;/*画像の横*/
height:27px;/*画像の縦*/
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;/*繰り返さない*/
display:block;
}
#naviLink img{
visibility:hidden!important;
}

ＲＳＳを使って最新の記事一覧・・・

複数のブログを運営されていて
その複数のブログをまとめて新しい順に記事一覧が表示されていたら便利じゃないですか？

が・・・できるかな～　

・・・のテストです

結果は　新・アメブロ向上企画書 　の記事の下に表示されるはずです・・
どうなることでしょう？

うまくいったようです・・・

問題は・・・　わかりやすく記事に書けそうもナイ・・・ってこと

【ブログ】画像を拡大するナビゲーションが設置されました 　スタッフブログ

別に新機能でもないし・・

クリックすれば今までと同じ画像表示画面にいくだけ

だだ・・マウスが乗ったらって表示されるだけ・・

それもオリジナルで表示している画像でもっておかしくない？

それなら本当に拡大して見せてよ！！！

こんな表示のために仰々しくスプリクトを作って・・・

おまけにそのために表示がおかしくなったって苦情の発生・・・

こんな画像はいらないって方・・・・
あくまで↑この画像を表示しないようにするだけです

CSSの最後に



/*画像[拡大する]を非表示*/
#naviLink{
display:none!important;
}

【ブログ】画像を拡大するナビゲーションが設置されました スタッフブログ

コメントを読むと苦情がいっぱいだしね・・

ねぇ～こんなの必要ですか？

みなさま・・・

これは新機能でも何でもありませんよ・・

いままではマウスを乗っけてもブログタイトルとかが表示されるだけでしたが・・

[拡大する]って表示されるようになっただけですからね・・

↑この画像の上にマウスを乗っけても表示が出ます・・

ただ・・拡大はされませんよ・・・

このサイズで作っていますから・・・

ねぇ～わざわざ作ってまでこんなの必要ですか？

こんなことするくらいなら画像一覧へのリンクボタンでもつけてくれたほうがいいと思いますが・・・

（わたしはいりませんが・・・）

新しい「CSS編集用デザイン」ならページングにブログ画像一覧へのリンクを追加

↑この画像のようにクリックできないようにするには・・

画像を貼り付けてからHTMLタグを表示にして・・

<a href="http://stat.ameba.jp/user_images/20110915/14/exlink/6c/cb/j/o0090007611484414402.jpg"><img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110915/14/exlink/6c/cb/j/o0090007611484414402.jpg" border="0" /></a>

赤字部分を削除して

<img alt="アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！" src="http://stat.ameba.jp/user_images/20110915/14/exlink/6c/cb/j/o0090007611484414402.jpg" border="0" />

だけにします

今回のメンテナンスでＣＳＳの編集にこんなメッセージが付くようになりました

それまではＣＳＳの中に

※CSS編集で広告を修正しないでください
（規約違反に該当する可能性があります）

こんな一文が入っていただけです・・・

これでより明確に指標を打ち出した格好になります

今回のコレを受けて今後このブログでは広告に関しては記事は書きません

コメントでの質問も受け付けません

ご了承下さい　m(_ _)m

（過去に書かれた記事は・・・いちいち探して削除するのも面倒なのでこのままにしておきます？）

って・・書いているうちに気が付きました・・

Amebaおすすめキーワード・・

さらに倍に増えて一挙に8個も！！！

サイバーエージェントって（こんな手法ばかりやって）本当にまともな広告代理事業やっているの？

最近・・アメブロのバグでコメントし終わってからおかしな画面が表示されるようになっています

ここのブログの場合は「この日に付いたコメントはありません」なんて画面になってしまいます？

アメブロには問い合わせしましたが・・・・（回答は期待していませんが・・？）どうなることでしょう

で・・・　（で・・じゃない！）

こんな時間ですがコメントを開放してみます

ただ・・回答には時間がかかるかもしれませんのでご了承下さい

広告関連、素材風ブログの場合は回答が広告に関係する場合には答えることが出来ません

こちらは旧？ベーシックスキンに関してのブログです

新・ＣＳＳ編集用デザインに関しての記事コメントは新・アメブロ向上企画書 　こちらにお願いします