kzさん
いつもサポートありがとうございます。
上記の修正試みましたがだめでした。。。
ああ。。。どうしよ。
Kzさん
やはりKzさんに教わった、これを行くしかないですかね。
<?php
add_filter( 'the_title', 'my_nav_title', 10, 2 );
// $title メニューのタイトル
// $id メニューの ID
// タイトルか id を元に img タグを生成しましょう。
function my_nav_title( $title, $id ) {
// the_title フィルタは他でも呼ばれまくるので
// メニューの場合だけ画像にするように取り計らいます。
switch ( $id ) { // ここでは id を元にメニューか否かを判断します。
case 12:
case 13:
case 14:
// 例）画像が「テーマフォルダ/images/nav-メニューID.jpg」な場合。
return '<img src="'
. get_bloginfo('stylesheet_directory')
. '/images/nav-'
. $id
. '.jpg" />';
}
// メニューじゃない場合はタイトルそのまま。
return $title;
}
?>
もう一度だけくわしく上記の説明お願いできないでしょうか。
お力添えのほどよろしくお願いします。
Kzさん
おはようございます。
因みに現在の私のグローバルメニュー部のソース表示はこんな感じです。
メニューは5つ。
<div id="nav">
<div id="nav-content" class="clearfix">
<div class="menu-global-menue-container">
<ul id="menu-global-menue" class="sf-menu menu clearfix">
<li id="menu-item-42" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-42"><a href="http://www.test.co.jp/?page_id=31">会社概要</a></li>
<li id="menu-item-189" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-189"><a href="http://www.test.co.jp/?page_id=178">サービス概要</a></li>
<li id="menu-item-175" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-175"><a href="http://www.test.co.jp/?page_id=165">これまでの実績</a></li>
<li id="menu-item-174" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-174"><a href="http://www.test.co.jp/?page_id=168">アクセス</a></li>
<li id="menu-item-173" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-173"><a href="http://www.test.co.jp/?page_id=171">お問合せ</a></li>
</ul></div>
それに対して画像置換の方法を利用してCSSに追記したのが下記です。
昨日調べたらこれだとIEは全滅でした。何故かhoverの指定もしていないのに
ポインターを画像にのせると画像が飛んでいってしまい、背景の白が出てきてしまうんです。
#menu-item-42 {
background-color: #ffffff;
background-image:url(../../images/global-menu01.jpg);
background-repeat:no-repeat;
background-position: 0 0 ;
display:block;
float:left;
height:50px;
text-indent:-9999px;
outline:none;
}
#menu-item-42:hover{
background-color: #ffffff;
background-image:url(../../images/global-menu01.jpg);
background-repeat:no-repeat;
background-position: 0 -50px ;
display:inline block;
float:left;
height:50px;
text-indent:-9999px;
outline:none;
}
上記のようにhoverをしても、下記のようにhover時を指定しなくても、
IEだとポインターを乗せると画像が飛んでいってしまうんです。
これはテーマの問題なのかな。。。
#menu-item-42 {
background-color: #ffffff;
background-image:url(../../images/global-menu01.jpg);
background-repeat:no-repeat;
background-position: 0 0 ;
display:block;
float:left;
height:50px;
text-indent:-9999px;
outline:none;
}
まず、#menu-item-42ではなく#menu-item-42 aにcssを指定したほうがよいと思いますよ。
cssをシンプルに書いてみましょう;)
#menu-global-menue li a {
background-color: #ffffff;
background-position: 0 0 ;
display:block;
float:left;
width:100px;
height:50px;
}
#menu-global-menue li a {
text-indent:-9999px;
outline:none;
background-repeat:no-repeat;
}
#menu-item-42 a {
background-image:url(../../images/global-menu01.jpg);
}
#menu-global-menue li a:hover {
background-position: 0 -50px ;
}
例えばこんな感じとか？（テキトーですよ）
shokun0803さん
アドバイスありがとうございます。
今、上記の記述をそのまま試してみたんですが、
やはりIE7,8で同じ現象が起きてしまう。。。。んです。
hoverの記述があってもなくても、ポインターをボタンにのせると
画像が消えてなくなってしまいます。
まったくわからない。。。。
他の方法も考えたいんですが、この現象が気になってほっておけない気分です。
なんでだ。。。。
■通常時は普通に画像が出る。
↓
■hover時は何故か画像が消えて何も出ない。
（hoverの記述があるなしに関わらず）
この現象はIEで起こり、FFだと指示通りになる。
おおおおぉおおお。
お力添えをーーーー。
う～ん、サイトを見せてもらうのが一番なのですが…テストサイトでも立ち上げて同じ環境で一時公開とかもできませんかね？
shokun0803さん
お世話になります。
テストサイト全然できます。
是非お願いします。
今からテストサイト用フォルダに現状丸々コピーしてそれからお知らせします。
2時間ほどで。
4/14 8:40am
shokun0803さん
お世話になります。
同じ環境でテストサイトを一時的に立ち上げました。
http://www.bigballoon.jp/wp-clients10120613/
このテストサイトでも同じ現象が出てしまいます。
FireFoxでは問題なく、IEでは7.8両方ともhover時に画像が飛んでしまいます。
何卒お力添えのほどよろしくお願いします。
legacy.css 130行目にある
#nav .sf-menu a:hover,
#nav .sf-menu li:hover,
#nav .sf-menu li.sfHover,
#nav .sf-menu ul li {
background: url(../../images/content-bg.jpg) repeat-x top none; /* 謎 */
color: #0052A3;
}
の #nav .sf-menu a:hover が
#menu-item-591 a:hover { background-position: 0 -50px; } より優先されてるためです。
で謎の background 指定が、まともなブラウザだと無視してくれるんですが
スカタンなブラウザだと中途半端にがんばるので当該の症状が出ます。
■結論
130行目のスタイル指定を削除で OK◎
全面的にスタイルの記述が謎めいてますので、今後も謎現象に遭遇したら
あ、また謎スタイルが適用されとるな、と落ち着いて調べると良いです。
■スタイルがどう適用されているかを何で調べるか
Firefox ならアドオンの Firebug
IE なら Firebug Lite（ブックマークして使うヤツ）
kzさん
あああああああああああ、本当にありがとうございます。
嬉しすぎる。
こちらも参考にさせていただきます。↓
■スタイルがどう適用されているかを何で調べるか
Firefox ならアドオンの Firebug
IE なら Firebug Lite（ブックマークして使うヤツ）
お忙しい中本当にありがとうございました。
また何かありましたらお力添えのほどよろしくお願いします。
kzさん、ありやとやんした;)
歓迎会に参加で検証する時間がなかったんです（汗
解決してよかったですね^^
shokun0803さん
お忙しい中本当にありがとうございました。
いつも本当に助かります。
ありがとうございました。
ツイッターも拝見してます。＾＾
