• 締切済み

wordpressのnavi表示の件で

wordpressでサイトを作成しており、グローバルナビ部分をphpで読み込んでおります。 該当ページになると、緑背景で該当ページと分かる様にしたいのですが、どの様にphpを設定すればいいのでしょうか? 参考ページは下記URLの該当ページの時に緑背景になってる「育児」部分の様にしたいです。 http://allabout.co.jp/children/ お手数ですが、どなたか教えてください。 ちなみに読み込んでるphp ------------------------- <ul> <li class="page_item"><a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('sort_column=menu_order & depth=1 & title_li='); ?> </ul> ------------------------- ちなみに読み込んでるスタイルシート ------------------------- #header ul { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; font-size:90% ; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #header li { text-align: center; float: left; line-height: 2em; } #header li a { display: block; width: 100px; text-decoration: none; color: #000000; } #header li a:hover { color: #FFFFFF; background-color: #00645C; } -------------------------

  • PHP
  • 回答数1
  • ありがとう数1

みんなの回答

noname#87667
noname#87667
回答No.1

WordPressは確かにphpで作られていますが、ご質問の内容はphpとは無関係と考えられます。スタイルシートやHTMLのところで質問した方がよいと思います。

etsuko33
質問者

補足

お返事ありがとうございます。htmlとcssだけであれば、該当ページだけのナビタグを変更すれば問題の件は解決出来るのですが、今回はwordprssで全ページheader.phpを読み込んでおりheader.phpからstyle.cssを読み込んでる為、ナビのstyleが必ず全ページ同じになってしまうのです。 そこでphpの構文でif?!やelese?!などを使って該当ページだけナビのstyleを変更出来ないかと思い、こちらのカテゴリーに質問させていただきました。 すみませんphpよく分からづ問題の件可能かどうか分かりませんが、できましたら教えて下さい!

関連するQ&A

  • 2階層目の現在ページをナビで表示させるには

    こんにちわ。 WORDPRESSでホームページを作成しております。 添付画像の様にグローバルナビで現在の位置を背景色緑で表示してるのですが、1階層目の時しか表示されません。 WORKSの2階層目である「コンサルティング」も同様にしたいのですが、2階層目も反映してくれるにはどの様なPHPを記述すればいいのでしょうか。 ---------PHP記述--------- <ul id="nav"> <li<?php if(is_home()){echo ' class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> --------------------------- ---------CSS(CSSは関係ないと思いますが、一応)------------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 110px; text-decoration: none; color: #333333; border-top: 1px solid #fff } #nav li a:hover { color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; border-top: 1px solid #00645C } --------------------------- また、ページ内リンクをしたいのですが、絶対パスで単純にサーバーにアップされてるURLを記述する方法しかないのでしょうか。

    • 締切済み
    • PHP
  • タブ式グローバルナビのブラウザ崩れの件で

    はじめまして、タブ形式のグローバルナビを作成しており、以下スタイルシートを適用しております。 IE7.6だとタブを触った時にcurrent_page_item aの該当ページが背景色緑なのですが、その下に1ピクセルの隙間が生じてしまいます。 添付ご参照ください。 FireFOXだと大丈夫なのです。 ブラウザの崩れなので、どの様に修正すればよいか不明です。 どなたか教えてください。 宜しくお願い致します。 ----html------- <ul id="nav"> <li><a href="#">TOP</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">WORKS</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">CONTACT</a></li> <li><a href="#">ACCESS</a></li> </ul> ----------- ---------css----------- #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #333333; } #nav li a:hover { display: block; width: 100px; color: #00645C; border-top-width: 1px; border-right-width: 1px; border-left-width: 1px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: #00645C; border-right-color: #00645C; border-left-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }

    • ベストアンサー
    • HTML
  • phpグローバルナビについて

    はじめまして、以下phpでグローバルナビを読み込んでますが、2行目のphp設定である、該当ページの時だけ.current_page_itemのスタイルシートを設定する宣言をしてるのですが、なぜかトップページ以外は正常に.current_page_itemの設定がされるのですが、トップページは.current_page_itemが反映されません。 <?php if(is_home()){echo 'class="current_page_item"';} ?>の 宣言がトップページにも反映させるにはどの様にすればいいのでしょうか? お手数ですが教えてください。 --------php設定---------------- <ul id="nav"> <li<?php if(is_home()){echo 'class="current_page_item"';} ?>> <a href="<?php bloginfo('url'); ?>" title="TOP">TOP</a></li> <?php wp_list_pages('title_li=&depth=1'); ?> </ul> </div> ------------------------ ------------グローバルナビのスタイルシート------------ #nav { background-color: #ffffff; margin: 0; padding: 0; list-style-type: none; height: 2em; width: 800px; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #00645C; } #nav li { text-align: center; float: left; line-height: 2em; } #nav li a { display: block; width: 100px; text-decoration: none; color: #000000; } #nav li a:hover { color: #FFFFFF; background-color: #00645C; } #nav .current_page_item a { color: #FFFFFF; background-color: #00645C; }

    • ベストアンサー
    • PHP
  • liタグのナビボタンがFirefoxで二重に表示。

    liタグでナビボタンを縦に3つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは2段めから2つずつ表示してしまい5つのナビボタンになってしまいます。どのように記述すれば良いのでしょう? <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }

    • ベストアンサー
    • CSS
  • Liで背景画像が表示されない (Safari、Operaにて)

    こんにちは。 同じような質問が続いていますが、違うものでございます。 以下のようなcssを組んだのですが、なぜかSafari、Operaでは文頭の画像が表示されません。 (ちなみに画像は幅4px、高さ5px) なぜかお分かりになる方がいらしたら、教えていただければと思います。 #box { width: 160px; color: #333333; background-color:#ffffff; border-right:1px solid #333333; border-top:2px solid #CC0033; } #box ul { list-style:none; margin:0 0 2px 0; padding:0 0 0 1.2em; line-height:1.7; } #box ul li { margin:0px; padding:0 0 0 0.8em; font-size:75%; color: #CC0033; background-color: #FFFFFF; background: 0 url(../images/pt-sub.gif) no-repeat 0.5em; border-bottom:1px dotted #aaaaaa; list-style:none; }

    • ベストアンサー
    • HTML
  • CSSで枠線の太さを変えるとき

    CSSでlistタグを使ってナビゲーションを作る練習をしています。 CSSで以下のように書いた場合、a:hover時の動作として、上の枠線のみが1pxから5pxに変わります。しかし、この方法だと、【上の枠線の下】が5pxとなり、その分、入力してある文字が下にずれます。 そこで、ずれないように、【上の枠線の上】に5px増やすにはどうすればいいでしょうか。 あるいは、そのように見せるための方法がありますか。画像は使用しないで作りたいです。 よろしくお願いします(CSSは初心者程度のレベルです)。 ================================================== ul{ list-style-type:none; } a{ text-decoration:none; } li a{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:1px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } li a:hover{ border-top-style:solid; border-right-style:solid; border-bottom-style:solid; border-left-style:solid; border-top-width:5px; border-right-width:1px; border-bottom-width:1px; border-left-width:1px; border-top-color:red; border-right-color:green; border-bottom-color:green; border-left-color:green; width:8em; } ==================================================

    • ベストアンサー
    • CSS
  • ホームページの質問。

    ホームページの質問。 (x)html+cssでぐろーばるなびを作りました。 ぐろーばるなびにはバグもあると聞いてますが、以下の書き方で大丈夫でしょうか? IE6等で起きるバグとかもあるらしいんですが、慣れてる方にみてほしいです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>時間割</title> <style type="text/css"> <!-- ul { display: inline; line-height: 2em; font-size: 1.5em; } ul li { background-color: #F00; float: left; width: 150px; height: 50px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-bottom-style: dotted; border-left-style: dotted; border-top-color: #990; border-right-color: #990; border-bottom-color: #990; border-left-color: #990; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "MS Pゴシック", "MS PGothic", sans-serif; font-size: 1em; list-style-type: none; text-align: center; margin: 0px; padding: 0px; } a { display: block; height: 50px; width: 150px; } --> </style> </head> <body> <ul> <li><a href="Untitled-1.html">国語</a></li> <li><a href="Untitled-1.html">図工</a></li> <li><a href="Untitled-1.html">算数</a></li> <li><a href="Untitled-1.html">社会</a></li> <li><a href="Untitled-1.html">理科</a></li> </ul> </body> </html> 問題があれば、追加・変更タグを添えて回答願います。

    • ベストアンサー
    • HTML
  • 画像を使ったドロップダウンメニュー

    ホームページのメニューボタンにドロップダウンを使おうと思っています。 色々ネットから調べて自分で試したのですが、 オンマウスで画像を変えたりと、少し複雑な為、うまく表示できません。 文字数の関係上スタイルシートのコードだけしか貼れませんが、 よろしくお願いいたします。 /* ナビゲーション */ #navi_continer { position: relative; z-index:100; width: 400px; height:110px; } #navi { position: absolute; width: 100px; background-image: url(./img/menu/03a.jpg); height: 110px; } #navi ul { margin: 0; padding: 0; list-style: none; } #navi li { color: #fffff; float: left; width: 100px; margin: 0; } #navi li a { font-size: 14px; color: #ffffff; display: block; width: 100%; padding: 3px 0; text-align: center; font-weight: bold; text-decoration: none; background-image: none; } #navi li a:hover { color: #ffffff; background-image: url(./img/menu/03b.jpg); height: 110px; width: 100px; } /* サブメニュー */ #navi ul.sub { background: #eeeeee; } #navi ul.sub li { float: none; } #navi ul.sub li a { color: #666666; background: none; font-size: 12px; font-weight: normal; padding: 3px 0; border-top:1px solid #000099; } #navi ul.sub li a:hover { color: #ffffff; background-color: #ff9900; } #navi ul li.navi_menu ul { display: none; } #navi ul li.navi_menu_on ul { display: block; } #navi li.navi_menu{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #navi li.navi_menu_on{ border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; }button { background-image: url(%E3%83%94%E3%82%AF%E3%83%81%E3%83%A3%201.jpg); }

  • 階層型ドロップダウンメニューのサブ項目CSSの背景色の指定について

    メニューバーにサブ項目を作り、hover,active,時のbackground-colorを指定したいのですが、うまくいきません。 ◆http://haradesignroom.jp/0909menu_bar/0909renewal/kaisoumenu/index.html Web制作関連の雑誌に出ていたフォーマットを元に上記のメニューバーを作りました。 第一階層には背景画像を配し、hover,activeのときに別画像を設定しました。 6項目のうち、サブメニューがある(商品情報など)にマウスをおくと、グレーの背景色のサブメニューが表示されるまでは良いのですが、サブメニュー各項目にマウスを置くと、第一階層のhoverの画像が表示されてしまいます。またサブメニューの下欄の項目が表示されません。 サブメニューがhover、active状態のときに、さらに別色(#FFCCCC)で指定したいのですが、CSSの書き方がわかりません。 どなたかご教示お願いいたします。 【CSS】 * { margin: 0; padding: 0; } body { font-family: Helvetica, Sans-Serif; font-size: 12px; padding-bottom: 15px; } #page-wrap { width: 800px; margin-top: 25px; margin-right: auto; margin-bottom: 25px; margin-left: auto; } a { text-decoration: none; } ul { list-style: none; background-repeat: repeat-x; } p { margin: 15px 0; } /* LEVEL ONE*/ ul.dropdown { position: relative; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-style: none; border-right-style: none; border-left-style: none; } ul.dropdown li { font-weight: bold; float: left; background-image: url(../images/menu_bk.jpg); height: 40px; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCC99; border-left-width: 1px; border-left-style: solid; border-left-color: #FFFFFF; } ul.dropdown a:hover { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown a:active { color: #993333; background-image: url(../images/menu_on_bk.jpg); } ul.dropdown li a { display: block; color: #666666; border-right-style: none; border-left-style: none; padding-top: 20px; padding-right: 30px; padding-bottom: 4px; padding-left: 30px; border-top-style: none; border-bottom-style: none; } ul.dropdown li:last-child a { border-right: none; } /* Doesn't work in IE */ ul.dropdown li:first-child a { border-left: none; } /* Doesn't work in IE */ ul.dropdown li.hover, ul.dropdown li:hover { color: #666666; position: relative; background-color: #D2D2D2; } ul.dropdown li.hover a { color: #993333; } /* LEVEL TWO */ ul.dropdown ul { width: 220px; visibility: hidden; position: absolute; top: 100%; left: 0; } ul.dropdown ul li { font-weight: normal; color: #FFFFFF; border-bottom: 1px solid #ccc; float: none; background-repeat: repeat-x; background-image: url(../images/transparent02.jpg); float:none; } /* IE 6 & 7 Needs Inline Block */ ul.dropdown ul li a { border-right: none; width: 100%; display: inline-block; color: #FFFFFF; } /* LEVEL THREE*/ ul.dropdown ul ul { left: 100%; top: 0; } ul.dropdown li:hover > ul { visibility: visible; color: #FFFFFF; } ◆ 長々申し訳ありませんが、どなたかよろしく お願いいたします。◆

  • [CSS3] last-childについて

    html5とcss3にてスマートフォンサイト制作をしております。 リスト要素を使いメニューを作っていますが、一番下の要素だけボーダーを削除したいと 思っていますが、うまくいきません。 詳しい方、ご教授いただけませんでしょうか。 よろしくお願い致します。 ---------------------------------------------------------- [HTML] <nav> <ul id="navi"> <a href="#"><li>メニュー1</li></a> <a href="#"><li>メニュー2</li></a> <a href="#"><li>メニュー3</li></a> <a href="#"><li>メニュー4</li></a> <a href="#"><li>メニュー5</li></a> </ul> </nav> [CSS] nav { display: block; width: 300px; margin-right: auto; margin-left: auto; margin-bottom: 18px; } #navi { border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #CCCCCC; background: -webkit-gradient(linear, left top,left bottom, from(#FFFFFF), to(#E7E7E7)); background-color: #FFFFFF; } #navi a { text-decoration: none; color: #646464; font-size: 1.31em; text-indent: 16px; height: 33px; line-height: 33px; } #navi li { border-bottom: 1px solid #CCCCCC; } #navi li:last-child { border-bottom-style: none; }

    • ベストアンサー
    • CSS

専門家に質問してみよう