★ 横メニューにカーソルを乗せた場合にヘッダー画像を変化させる
以下はすべて、.skinHeaderArea にヘッダー画像を設置したケースです。
.skinBlogHeadingGroupArea にヘッダー画像を設置している場合は、
全部、.skinHeaderArea → .skinBlogHeadingGroupArea置き換えてください。
● 個別で横メニューを設置するケース。
◆ 当ケースの横メニューの設置は、下記を参照してください。
http://ameblo.jp/new-bulue9/entry-10727818816.html
注意 メニューの項目を横にカーソルを移動していくと、ヘッダーの変化の
反応が悪いので注意してください。
① CSSへ追記 各pxは調整してください。
/* ------------------------------------------------------- */
/* 横ナビゲーション(個別) */
/* ------------------------------------------------------- */
.skinFrame2{/* ウインドウの大きさを変えても位置を変化させない */
width:980px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
.skinHeaderArea{
background-image:url(画像のURL①);
background-repeat:no-repeat;
height:600px;
}
skinHeaderArea{
margin-bottom:30px;
}
#navi01,#navi02,#navi03,#navi04,#navi05{
position:absolute;
top:634px;
width:190px;
background-color:#444444;
font-size:18px;/* 文字の大きさ */
text-align:center;
border:1px solid #FF0000;/* 枠 */
display:block;
z-index: 100;
}
#navi01 a:hover,#navi02 a:hover,#navi03 a:hover,#navi04 a:hover,#navi05 a:hover{
background-color:#0000ff;
}
#navi01{left:0px;}
#navi02{left:200px;}
#navi03{left:400px;}
#navi04{left:600px;}
#navi05{left:800px;}
/* 横ナビゲーション(個別) */
/* ------------------------------------------------------- */
.skinFrame2{/* ウインドウの大きさを変えても位置を変化させない */
width:980px;/* コンテンツ幅を設定 */
margin:auto;/* 自動中央寄せ */
position:relative;/* 起点指定 */
}
.skinHeaderArea{
background-image:url(画像のURL①);
background-repeat:no-repeat;
height:600px;
}
skinHeaderArea{
margin-bottom:30px;
}
#navi01,#navi02,#navi03,#navi04,#navi05{
position:absolute;
top:634px;
width:190px;
background-color:#444444;
font-size:18px;/* 文字の大きさ */
text-align:center;
border:1px solid #FF0000;/* 枠 */
display:block;
z-index: 100;
}
#navi01 a:hover,#navi02 a:hover,#navi03 a:hover,#navi04 a:hover,#navi05 a:hover{
background-color:#0000ff;
}
#navi01{left:0px;}
#navi02{left:200px;}
#navi03{left:400px;}
#navi04{left:600px;}
#navi05{left:800px;}
② フリープラグインへ追記
画像のURL①~⑤ は、それぞれカーソルを乗せたときの画像
画像のURL①は、上記①のCSSの画像のと同じにする
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$("#navi01").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL①)");
});
$("#navi02").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL②)");
});
$("#navi03").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL③)");
});
$("#navi04").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL④)");
});
$("#navi05").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL⑤)");
});
});
</script>
<script type="text/javascript">
$(function(){
$("#navi01").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL①)");
});
$("#navi02").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL②)");
});
$("#navi03").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL③)");
});
$("#navi04").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL④)");
});
$("#navi05").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL⑤)");
});
});
</script>
下記は、フリープラグインの最初に1つあればOKです。(以下、同じ)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
③ フリースペース又はフリープラグインへ入れる
アメーバIDは自分のIDに変えて下さい。
下記は、あくまで例です。
<div id="navi01"><a href="http://profile.ameba.jp/アメーバID">部屋</a></div>
<div id="navi02"><a href="http://ameblo.jp/アメーバID/entry-xxxxxxxx.html">飛行</a></div>
<div id="navi03"><a href="http://ameblo.jp/アメーバID/entry-xxxxxxxx.html">規約</a></div>
<div id="navi04"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=アメーバID">手紙</a></div>
<div id="navi05"><a href="http://present-shop.ameba.jp/shop/top?toAmebaId=アメーバID">贈物</a></div>
<div id="navi02"><a href="http://ameblo.jp/アメーバID/entry-xxxxxxxx.html">飛行</a></div>
<div id="navi03"><a href="http://ameblo.jp/アメーバID/entry-xxxxxxxx.html">規約</a></div>
<div id="navi04"><a href="http://msg.ameba.jp/pub/send/index?toAmebaId=アメーバID">手紙</a></div>
<div id="navi05"><a href="http://present-shop.ameba.jp/shop/top?toAmebaId=アメーバID">贈物</a></div>
● 横メニューナビの自動作成を利用したケース
◆ 私のブログの横メニュー(CSS自動作成)を使用した場合。
http://ameblo.jp/new-blue-777/entry-11150022888.html
① CSSは変える必要はありません。
② フリープラグインへ下記を追記(画像のURLは変更して下さい)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$("#Topnavi li a:eq(0)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL①)");
});
$("#Topnavi li a:eq(1)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL②)");
});
$("#Topnavi li a:eq(2)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL③)");
});
$("#Topnavi li a:eq(3)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL④)");
});
$("#Topnavi li a:eq(4)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL⑤)");
});
});
</script>
<script type="text/javascript">
$(function(){
$("#Topnavi li a:eq(0)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL①)");
});
$("#Topnavi li a:eq(1)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL②)");
});
$("#Topnavi li a:eq(2)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL③)");
});
$("#Topnavi li a:eq(3)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL④)");
});
$("#Topnavi li a:eq(4)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL⑤)");
});
});
</script>
③ フリースペースは変える必要はありません。
● topmenu のケース
◆ アメブロで良く使われている topmenu の横メニューナビの場合
① CSSは変える必要はありません。
② フリープラグインへ下記を追記(画像のURLは変更して下さい)
<script type='text/javascript' src='http://stat100.ameba.jp/blog/js/apm001.js'></script>
<script type="text/javascript">
$(function(){
$("#topmenu li a:eq(0)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL①)");
});
$("#topmenu li a:eq(1)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL②)");
});
$("#topmenu li a:eq(2)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL③)");
});
$("#topmenu li a:eq(3)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL④)");
});
$("#topmenu li a:eq(4)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL⑤)");
});
});
</script>
<script type="text/javascript">
$(function(){
$("#topmenu li a:eq(0)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL①)");
});
$("#topmenu li a:eq(1)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL②)");
});
$("#topmenu li a:eq(2)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL③)");
});
$("#topmenu li a:eq(3)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL④)");
});
$("#topmenu li a:eq(4)").hover(
function () {
$(".skinHeaderArea").css("background-image","url(画像のURL⑤)");
});
});
</script>
③ フリースペースは変える必要はありません。