グローバルメニューのカスタマイズ

[maki]

過去ログが大過ぎて、うまく探せず質問します。

グローバルメニューをカスタマイズしたいと思っています。
こちらで紹介のあったサイトをたどって、このメニューがとても気に入ったので使いたいのですが
http://www.dynamicdrive.com/style/csslibrary/item/css3_sonar_menu/

子テーマのstyle.cssにthe cssの方は記入したのですが、

<ul class="sonarmenu">
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
<li><a href="http://www.cssdrive.com">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript</a></li>
</ul>

こちらの方のソースをどこに書いたらいいのかわかりません。
heder-insert.phpかなと思い、記入してみると、サイトの一番上に表示されてしまい、グローバルメニューの位置に表示ができません。

どこで替えたらいいんだろうなと検索していますが、なかなか出てこず困って質問しました。

初心者の質問で大変申し訳ありませんが、どうぞよろしくお願いいたします。

• このトピックは8年、 10ヶ月前にわいひらが編集しました。理由: タグの崩れを修正

[hidekichi]

これで表示が直るか・・・

[hidekichi]

‘‘

これではどうだ

[わいひら]

グローバルナビのタグは既に挿入されているのでHTMLを新たに記入する必要はありません。
ただ、グローバルナビのCSSカスタマイズは、テーマのカスタマイズでも最もややこしいところの一つなので、CSSに慣れていない場合は、あまりお勧めではありません。

HTMLクイックリファレンスなどを読んで、CSSをある程度理解していないと厳しいかもしれません。
結構複雑なので、フォーラムではちょっとアドバイスは難しいです。

[hidekichi]

うーむ、直らないんですけれども、ここら表示部分はわいひらさんに任せて、質問に答えると

おそらくまんまcssを入れたのであれば、グローバルメニューのclassに.sonarmenuが無いからではないかと思うので、

(function($){
  $(function(){
    $("#main-menu li").addClass("sonarmenu");
  });
})(jQuery);

と、子テーマのjavascript.jsにでも入れてみて、必要のないメニュー部分のclassのプロパティをコメントアウトすればよいのではないかと思います。
ただし、注意しないといけないのは、PCならそれでよかってもモバイルだとそれではダメな場合もあるので(モバイル部分のcss等)、色々試す必要があることから元のcssを削除してしまわないようにコメントアウトして一時的に適用しないようにするのが重要です。

上記がややこしい場合は手間ですけど、css部分のul.sonarmenuを#main-menuに書き変えて、従来のメニュー部分に適用されているcss部分を変更するなど(主にコメントアウト)の手法が必要です。cssだけで作られているメニューですから、cssだけで解決できるんですが、cssだけってのが案外難しいところなんですよね、Simplicityの場合。

大まかなcssの設定を紙に書き出してどこを変更すれば良いかを把握するのが必要かも知れません。やってる事は別に大したことではないのですぐにできてしまうと思うんですが、どこで何をしているのかを理解していないと思ったように動かないとなったりすると思います。

[maki]

丁寧にご回答いただきありがとうございます。
わからない部分が多いので、いただいたコメントを頼りにいろいろ見てみます。
ありがとうございました。

[投稿者]

投稿