サポート » 使い方全般 » 初心者です、カスタムメニューのデザインについて

  • 解決済 hirofumi ishihara

    (@hirofumi-ishihara)


    使い始めたばかりで壁に当たりました、よろしくお願いします。
    カスタムメニューを設置したのですが、メニューを選択したときにデザイン上 項目の左側に矢印のイメージを出したいのですが、一部の項目に反映されないで困っています。
    予測されろ原因ですが、該当の項目はメニュー編集の構造がカテゴリーを設定してる場合です。
    固定ページやカスタムでは問題ありませんがカテゴリーを設定したらうまくいきません。

    恐らくコードの書き方で設定できると思うのですが、調べてもなかなか答えが得られません。
    非常に初歩的な質問ですが、よろしくご回答の方お願いいたします。

    下記に現在のコードを書いておきます

    スタイルシート内

    ”#home #header #main-nav #home,#main-nav li.current_page_item {
    background: url(“images/gnaviIcon.png”) no-repeat left 10px;
    } ” 

    テーマをベースに編集してますので、その他の原因があるかもしれませんが該当するコードだと思われます。

    拙い内容ですが重ねてお願いいたします。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • モデレーター gatespace

    (@gatespace)

    .current_page_item は固定ページのみです。

    ブラウザのデバッグツールや「ソースを見る」で確認してみてください

    トピック投稿者 hirofumi ishihara

    (@hirofumi-ishihara)

    gatespace様

    早速のお返事ありがとうございます。

    >.current_page_item は固定ページのみです。

    そうなんですね。
    まだまだ素人なのでその辺のコードにも疎いもので失礼しました。

    失礼ついでで申し訳ないのですが、上記コードで固定ページ以外でも表示できる
    コードはあるのでしょうか?教えていただけるとありがたいです。

    よろしく願いします。

    モデレーター gatespace

    (@gatespace)

    ブラウザのデバッグツールや「ソースを見る」で確認してみてください

    トピック投稿者 hirofumi ishihara

    (@hirofumi-ishihara)

    gatespace様

    お返事ありがとうございます。

    >ブラウザのデバッグツールや「ソースを見る」で確認してみてください

    とのことですが、私の理解が足りてなければすいません。

    元になるページがあって、そのソースを見るようにご提案頂いているのでしたら、(違ったすいません)

    その元になるページがなく、参照できません。

    現在は、理想に近いテーマをベースにして、修正しております。

    今回の問題は、その元になるテーマにはカスタムメニューを使用しておらず、

    サイトで調べながらカスタムメニューを設定しているところ発生しました。

    その参照サイトも色々と探してみましたが、今回の様な問題に対してなかなか解決策がなく困ってしまいました。

    そこでお知恵を拝借できないかと投稿させていただきました。

    もうちょっと、その他のサイトを参考にしながら、ソースを探してみます。

    モデレーター gatespace

    (@gatespace)

    申し訳ないですが、cssのクラスを調べる方法はWordPressの話ではないです。

    今回はカテゴリーアーカイブなので、ブラウザでそのページを表示して、
    ブラウザの機能で「ソースを見る」またはブラウザの開発者ツールを使って調べてください

    トピック投稿者 hirofumi ishihara

    (@hirofumi-ishihara)

    gatespace様

    何度もありがとうございます。もしかして私の説明が不足しているようです。すいません。

    下記のサイトが現在構築中のサイトなんですが、

    ”http://cotacoha.com”

    メニューの”Collection”と”Blog”をクリックした場合(何もでない)と

    それ以外をクリックした場合(左側に→とフォントカラーが変化)とで、表示の出方が違います。

    ”Collection”と”Blog”にも→をフォントカラーを変えたいのですが、可能でしょうか?

    もし難しいようなら、なにもなしで行くしかないのですが、できれば統一したいです。

    長々とお付き合いいただきありがとうございます。

    いかがでしょうか?

    こんにちは、

    テストしていませんけど

    試してみてください

    #main-nav li.current_menu_item,
    #main-nav li.current_page_item {
    	background: url("images/gnaviIcon.png") no-repeat left 10px;
    }
    
    ul#main-nav li a:active {
    	text-decoration: none;
    	color: #419CC0;
    
    }

    トピック投稿者 hirofumi ishihara

    (@hirofumi-ishihara)

    nobita様

    お返事ありがとうございます。

    希望を持って色々試してみましたが、残念ながら上手くいきませんでした。

    難しいのでしょうか?ご協力誠にありがとうございました。

    お知恵がありましたら またよろしくお願いいたします。

    先にgatespaceさんが書いていらっしゃいますが
    .current_page_item
    というクラスが付与されるのは固定ページのみです。
    なので固定ページで作っている場合は→がついています。

    固定ページではない”Collection”と”Blog”では→がついていません。

    nobitaさんが書いていらっしゃる
    .current-menu-item
    クラスを使えば実装できると思います。

    #home #header #main-nav #home,#main-nav li.current_page_item{
    	background: url("images/gnaviIcon.png") no-repeat left 10px;
    }
    #home #header #main-nav #home a, #header #main-nav li.current_page_item a {
    	color: #419CC0;
    }

    部分に.current-menu-itemに関する記述も付け加えると良いのではないかと思います。

    先に書かれてることの繰り返しになりますが、.current-menu-itemというCSSクラスはブラウザの開発者ツール(FirebugやGooleChromeのデベロッパーツールなど)を使うとわかります。

    デベロッパーツールについてはこちらをご覧ください。

    デベロッパーツールについては WordPress とは直接関係がないものとなりますので、各デベロッパーツールのフォーラム等でご質問される事をオススメいたします。

    トピック投稿者 hirofumi ishihara

    (@hirofumi-ishihara)

    KUCKLU様

    お返事ありがとうございます。

    デベロッパーツール。これから勉強してみます。

    気づかせてくれてありがとうございます。

    なんとかやってみます!

    これにて一旦 解決済みとさせていただきます

    さらなる向上のため頑張ります。

    gatespace様

    nobita様

    Junko Nukaga様

    KUCKLU様

    皆様、貴重な時間を本当にありがとうございました。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「初心者です、カスタムメニューのデザインについて」には新たに返信することはできません。