isseiaone
フォーラムへの返信
-
フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2shokun0803さん
お忙しい中本当にありがとうございました。
いつも本当に助かります。ありがとうございました。
ツイッターも拝見してます。＾＾フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2kzさん
あああああああああああ、本当にありがとうございます。
嬉しすぎる。こちらも参考にさせていただきます。↓
■スタイルがどう適用されているかを何で調べるか
Firefox ならアドオンの Firebug
IE なら Firebug Lite（ブックマークして使うヤツ）お忙しい中本当にありがとうございました。
また何かありましたらお力添えのほどよろしくお願いします。フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2shokun0803さん
お世話になります。
同じ環境でテストサイトを一時的に立ち上げました。http://www.bigballoon.jp/wp-clients10120613/
このテストサイトでも同じ現象が出てしまいます。
FireFoxでは問題なく、IEでは7.8両方ともhover時に画像が飛んでしまいます。
何卒お力添えのほどよろしくお願いします。
フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2shokun0803さん
お世話になります。
テストサイト全然できます。
是非お願いします。今からテストサイト用フォルダに現状丸々コピーしてそれからお知らせします。
2時間ほどで。
4/14 8:40amフォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2shokun0803さん
アドバイスありがとうございます。
今、上記の記述をそのまま試してみたんですが、
やはりIE7,8で同じ現象が起きてしまう。。。。んです。hoverの記述があってもなくても、ポインターをボタンにのせると
画像が消えてなくなってしまいます。まったくわからない。。。。
他の方法も考えたいんですが、この現象が気になってほっておけない気分です。
なんでだ。。。。
■通常時は普通に画像が出る。
↓
■hover時は何故か画像が消えて何も出ない。
（hoverの記述があるなしに関わらず）
この現象はIEで起こり、FFだと指示通りになる。おおおおぉおおお。
お力添えをーーーー。フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2Kzさん
おはようございます。
因みに現在の私のグローバルメニュー部のソース表示はこんな感じです。
メニューは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; }フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2Kzさん
やはり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; } ?>もう一度だけくわしく上記の説明お願いできないでしょうか。
お力添えのほどよろしくお願いします。フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したいPart2フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したい。shokun0803さん、kzさん
すいません。解決したと思っていたんですが。。。
hover時に画像が切り替わるように追記してみました。
FireFoxでは通常時もhover時も画像の切り替えも問題なく見えるのですが、
IE(ver7）で見ると、hoverしていない通常時は画像がちゃんと見えていて、
hoverすると画像が見えなくなってしまいます。
なぜなんでしょうか。。。。是非御教授ください。下記が私の書いた記述です。
#menu-item-46 { background:url(../../images/global-menu01.jpg) no-repeat; display:block; float:left; height:50px; background-position:-600px 0px; text-indent:-9999px; } #menu-item-46 :hover{ background:url(../../images/global-menu01.jpg) no-repeat; display:block; float:left; height:50px; background-position:-600px -50px; text-indent:-9999px; }フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したい。フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したい。shokun0803さん、kzさん
できた。。。嬉しい。
こんなレベルでも僕には凄く嬉しい。また是非是非お力貸してください。
早急のご返答本当にありがとうございました。
このフォーラムは問題解決時に。。。「解決済み」どこかでチェックするんでしたっけ？
フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したい。kzさん
アドバイスどおり早速やってみます。
出来たらここでまたご報告しますね。shokun0803さん
画像置換CSSの方法でやってみます。
あそこのグローバルメニューは「外観」→「メニュー」で作っていて、
カテゴリも固定ページも表示は管理画面から表示設定できるようになっていました。
なので、アドバイスどおりやってみます。kzさん、shokun0803さんありがとうございます。
出来たらここでご報告いたします。フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したい。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; } ?>は、「imgタグの場合」は上記を追記とありますが、
imgタグの場合とは具体的にどのようなケースを指すのでしょうか。
本当に素人ですいません。とても大事なところだと思うので
是非教えてください。よろしくお願いいたします。
フォーラム: 使い方全般
返信が含まれるトピック: 固定ページのメニューを画像化したい。shokun0803さん
ご返信本当にありがとうございます。
まさに、デモページでいうところの、「home」「PC」「PS3」とかの部分です。
このデモの場合「home」「PC」「PS3」はカテゴリを置いてますが、
ここの部分に、よくあるパターンの「会社概要」「サービス」「お問合せ」などの固定ページ
をメニューとして並べたいんです。そして、それらの各メニューボタンを画像にしたいんです。shokun0803さんからいただいた、
<li id="menu-item-253" class="menu-item menu-item-type-taxonomy menu-item-253">ですが、
「idかclassのmenu-item-253などに対して画像置換のcssを利用すればいいような気がします。」
この部分をもう少しだけ具体的に教えていただけますでしょうか。例えば、menu-item-253用に「btn-corporate.jpg」という画像が用意されている場合、
どこにどんな記述を追記すればよいのでしょうか。素人過ぎてすいません。
「画像置換のcssを利用する」を教えてください。
よろしくお願いします。