FC2ブログのテンプレート工房

カスタマイズが簡単な共有テンプレートを配布しています。テンプレートをカスタマイズして自分だけのオリジナルブログを作りませんか?

メニューバーの画像ロールオーバー

以前に横メニューバーをブログタイトル下に表示する方法を紹介しました。
今回はこのメニューの背景を画像にしてロールオーバーさせるカスタマイズを紹介します。ロールオーバーとはマウスを乗せたときに画像が変わることです。

通常画像とマウスオーバー画像の2つを切り替えて表示しようとすると、マウスオーバーしてから画像を読み込むために一瞬遅れて画像が表示されます。

このタイムラグを解消するために、1つの背景画像の「見える部分」を制御して、画像のロールオーバーを実現します。

まずメニューに表示したい画像を用意します。
メニューのサイズにあわせた画像を用意してください。
Sample A
sample0703_01.jpg

そしてマウスを乗せたときに表示したい画像を用意します。
Sample B
sample0703_02.jpg

これを画像編集ツール等を使って1つの画像にしてください。
Sample C
sample0703_03.jpg

画像を1つに編集できたらそのファイルをアップロードしてください。
そしてスタイルシートの末尾に以下を加えてください。

/* メニュー画像 */
#menu_bar li a {
background-image: url("Sample C に相当する画像のURL");
}

/* ロールオーバー(画像切り替え) */
#menu_bar li a:hover {
background-position:left bottom;
}


リンク部分ではないメニューバー全体の背景も画像にしたい場合は、更に以下も追加してください。
Sample Aに相当するような画像がいいかも知れません。

/* メニュー全体背景 */
#menu_bar {
background-image: url("メニュー全体背景に使う画像のURL");
}



メニュー画像を個別に設定したい場合


HTMLを編集します。
変更を加えたいメニューに適当なクラス名を設定してください。
ここでは例としてmenu01,menu02,menu03と設定します。

<!--▼ メニューバー ▼-->
<ul id="menu_bar">
<li class="menu01"><a href="#">メニュー1</a></li>
<li class="menu02"><a href="#">メニュー2</a></li>
<li class="menu03"><a href="#">メニュー3</a></li>
</ul>
<!--▲ メニューバー ▲-->


そしてスタイルシートの末尾に以下を加えてください。
各クラス名に画像を設定します。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
}


用意した画像自体に文字がある場合、画像の上に表示されるリンクテキストは不要になります。
そのようなときには「text-indent:-9999px;」を加えてください。

#menu_bar li.menu01 a {
background-image: url("menu01に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu02 a {
background-image: url("menu02に表示したい画像のURL");
text-indent:-9999px;
}

#menu_bar li.menu03 a {
background-image: url("menu03に表示したい画像のURL");
text-indent:-9999px;
}



これでメニューバーの画像ロールオーバーができます。

関連記事
[ 4830 ]
今まで、参考にさせてもらっていましたが、これはすごいです。
[ 2009/07/06 00:09 ] [ 編集 ]
[ 4832 ] > YASUDAみかんさん
たいしたものは書けませんが参考にしてくれて嬉しいです^^
[ 2009/07/06 00:36 ] [ 編集 ]
[ 4865 ]
えっと、コレを使えばトップ画像の下のメニューバーにマウスが乗ったときにトップ画像を変える、なんてことはできますか?
[ 2009/07/08 16:45 ] [ 編集 ]
[ 4873 ] > たくわんさん
この方法とは異なりますが、その機能を実現する方法はあります。後日記事にしますが少々時間がかかると思いますので気を長くしてお待ちください。
[ 2009/07/09 00:32 ] [ 編集 ]
[ 4876 ]
おぉ、ありがとうございます

気長に待ちます^^
[ 2009/07/09 14:50 ] [ 編集 ]
[ 4906 ] 質問
はじめまして、メニューバー画像のロールオーバーが作りたくて検索したらここにたどり着きました。
1番上の記述のですが
htmlにはどう記述したらいいのですか?
[ 2009/07/13 01:01 ] [ 編集 ]
[ 4914 ] > 名無しさん
記事の中にHTMLの記述もありますが、挿入箇所が解らないということですか?
[ 2009/07/13 20:07 ] [ 編集 ]
[ 4981 ] ありがとうございます!
いたおさん、ありがとうございます!!
丁寧に解説してくださって何とか出来そうですが、一度目は上手くいかなくて、再度やり直してます(^^;
何とか自力でやってみようと思いますので、上手くいったら報告させていただきます。
本当にありがとうございました。
[ 2009/07/18 09:47 ] [ 編集 ]
[ 4993 ] > Konさん
カスタマイズはちょっとしたことでも上手く行かないことがあるので、テンプレートの「複製」をとって進めてくださいね。
[ 2009/07/18 20:17 ] [ 編集 ]
[ 5000 ]
いたおさん、ありがとうございました!
お手間をお掛けしてしまってすみませんでした。
無理言ってしまって。

これからも色んなカスタマイズ方法を利用させてください★
本当にありがとうございました!
[ 2009/07/19 01:44 ] [ 編集 ]
[ 5116 ] こんばんは
はじめまして!
lightframeを使わせていただいています。
説明がとてもわかりやすいので素人の私でも
簡単にカスタマイズができてとても助かっています。

そこで質問なのですが、
メニュー画像を個別に設定したい場合、
【メニュー画像を個別に設定したい】の記述の下の部分だけを
加えればいいのでしょうか?
それとも記述より上の部分も必要なのでしょうか?
[ 2009/07/27 20:53 ] [ 編集 ]
[ 5122 ] > RINさん
記述より上の部分も必要です。
[ 2009/07/27 21:59 ] [ 編集 ]
[ 7273 ]
はじめまして、阿憐といいます。
僕のブログで、standardを使わせていただいております。

大変恐縮なのですが、メニューバーのボタンに個別に画像を設定し、
それをロールオーバーさせることはできるんでしょうか。

ご都合の許す時で構いませんので、お教えいただけたら光栄です。

よろしくおねがいします。
[ 2009/12/04 18:51 ] [ 編集 ]
[ 7278 ] > 阿憐さん
記事のこの部分を参考にしてください。

メニュー画像を個別に設定したい場合
http://10plate.blog44.fc2.com/blog-entry-231.html#a1
[ 2009/12/04 23:37 ] [ 編集 ]
[ 7288 ]
とりあえず、ご記述どおりにやってみます。

ありがとうございました。
[ 2009/12/05 14:17 ] [ 編集 ]
[ 7291 ]
たびたび本当に申し訳ございません…

ご記述のとおり試したところ、無事画像にできたんですが、

今度は、ドロップダウンの部分がおかしくなってしまいました。

これを直すことはできるのでしょうか。



[ 2009/12/05 17:52 ] [ 編集 ]
[ 7292 ]
いつもお世話になってます。
メニューバーで左右に余白を空けたいのですがどうやって
空けれますか?
[ 2009/12/05 18:46 ] [ 編集 ]
[ 7302 ] > 阿憐さん、夜露死苦さん
> 阿憐さん
<li class="menu08" onmouseover="this.className='menu_on'" onmouseout="this.className='menu'">
これを
<li class="menu menu08" onmouseover="this.className='menu_on menu08'" onmouseout="this.className='menu menu08'">
としてください。

> 夜露死苦さん
スタイルシートの末尾にこれを加えてください。

ul#menu_bar {
margin-left:10px; /* 左余白 */
margin-right:10px; /* 右余白 */
}
[ 2009/12/05 23:09 ] [ 編集 ]
[ 7326 ]
http://blog.livedoor.jp/gamemasa/


こちらの画像とかは、自分で作るのですか??
それとも配布されてるサイトがあるんですか??

教えてください

[ 2009/12/08 17:42 ] [ 編集 ]
[ 7332 ] > Silverさん
自分で作っている方が多いと思いますが、中には特別リンク等を条件に画像を作ってくれるところもあるようですよ。

ライブドアブログでも私のテンプレートを使ってくれている方がいるなんて光栄です^^;
[ 2009/12/08 22:49 ] [ 編集 ]
[ 7418 ]
いつもお世話になっています
ここの記事を参考にさせて頂いたのですが、画像が一切反映されなかったので、ここの記事のHTML、スタイルシート共に全てコピペさせて頂いても反映されませんでした。

「text-indent:-9999px;」の部分は反映されたので、HTML、スタイルシート全てが反映しなくなったという訳では無さそうなのですが・・・

どうすればいいでしょうか?
[ 2009/12/14 20:41 ] [ 編集 ]
[ 7426 ] > 龍さん
申しわけありません記事に不備がありました。スタイルシートの設定を以下の様に変更してください。

.menu01 a { ~ }

#menu_bar li.menu01 a { ~ }
[ 2009/12/14 23:21 ] [ 編集 ]
[ 7428 ]
お対応ありがとうございます。
無事、反映されました
[ 2009/12/14 23:34 ] [ 編集 ]
[ 7432 ] すいません
メニューバーの文字を普通の字からかっこいい字に変えたいのですが、できますか?
[ 2009/12/15 20:16 ] [ 編集 ]
[ 7437 ] > 龍さん、ZEROさん
> 龍さん
解決して良かったです^^

> ZEROさん
「font-family」等でGoogle検索すると気に入るフォントが見つかると思います。
[ 2009/12/16 00:02 ] [ 編集 ]
[ 7440 ]
わかりました。

やってみます。
[ 2009/12/16 16:41 ] [ 編集 ]
[ 7444 ] > himikoさん
font-familyは色んな種類があるので好きなものを選んでください。ハンドルネームを変えたんですね^^;
[ 2009/12/16 22:44 ] [ 編集 ]
[ 7448 ]
いいえ。

もう一個のほうです。

ミスですから気にしないで下さい。
[ 2009/12/17 18:06 ] [ 編集 ]
[ 7450 ] > ZEROさん
了解です^^;
[ 2009/12/17 23:47 ] [ 編集 ]
[ 8237 ]
マウスがのっていないときは Sample A 

のっているときは Sample B

というようにしたいです

どうしたらいいですか?
[ 2010/02/05 20:53 ] [ 編集 ]
[ 8244 ] > ZEROさん
記事にあるように1つの画像にまとめた「Sample C」を作るのではなく、多少のタイムラグを気にしないから別々の画像を切り替えたという場合はこのようにしてください。

/* メニュー画像 */
#menu_bar li a {
background-image: url("Sample A に相当する画像のURL");
}

/* ロールオーバー(画像切り替え) */
#menu_bar li a:hover {
background-image: url("Sample B に相当する画像のURL");
}
[ 2010/02/06 01:57 ] [ 編集 ]
[ 8247 ]
いたお さん

できました!

ありがとうございます
[ 2010/02/06 08:53 ] [ 編集 ]
[ 8257 ] > ZEROさん
お役に立てて良かったです^^
[ 2010/02/07 02:14 ] [ 編集 ]
[ 8727 ] 承認待ちコメント
このコメントは管理者の承認待ちです
[ 2010/08/04 01:12 ] [ 編集 ]
コメントの投稿









管理者にだけ表示
※現在カスタマイズに関するサポートを休止中です。
表示が崩れる場合は表示が崩れる原因の調査手順をお試しください。
その他の問題はFC2ユーザーフォーラムにお問い合わせください。
トラックバック
この記事のトラックバックURL

ブログ内検索1
プロフィール

いたお

Author:いたお
更新は非常にマイペースです
現在休止中です

当サイトはリンクフリーです。

いたおの他の運営サイト
カレンダー
08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
なんでもスクロール
このように
縦に長く伸びた
プラグインを
スクロールバーによって
一定の長さに
抑えることが
出来ます。

※スクロールさせる文字やプラグインのHTMLをここに
今日の日付入りカレンダー

08 | 2023/09 | 10
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
ユーザータグ


△ ページトップへ戻る