WordPressナビゲーションメニューのカスタマイズ

今回はWordPressのナビゲーションのメニュー部分をカスタマイズとしていきます。具体的にはメニュー部分の色や高さ、文字の大きさと色、それから背景色などを変更していきます。

また、リクエストの多かった、「ナビゲーションメニューを均等に配置する方法」や「サブメニューのカスタマイズ」も紹介していきます。基本的なナビゲーションメニューの設定などは別記事です。
WordPressのナビゲーションメニューの使い方と設定

メニュー部分というのは最初このようになっていると思います。

メニュー部分-1

私の場合はこのナビメニューの高さを低くして背景色と文字色を変更しています。

メニュー部分-2

スポンサーリンク

ナビゲーションメニューのカスタマイズ

私の利用しているTwentyTwelveで説明していきます。子テーマで作成したスタイルシート (style.css)を使います。私の変更箇所のコードはこのようになっています。

この各項目の好きな部分を変更して使ってみて下さい。文字の左に余白が欲しい場合(右にずらしたい場合)には「padding-left: ●●px;を追加して下さい。

それからリンクのカスタマイズでも解説しましたが、カーソルが乗った時の色と訪問済みの色を指定する事ができますので、これも設定しておくといいでしょう。

「a:visited」が訪問済みの色で「a:hover」がカーソルを載せた時の色です。それぞれ設定しておきましょう。

ナビゲーションのメニューを均等に並べる方法

ナビゲーションのメニューは通常は「左揃え」のような状態になっているので、右側に余白ができてしまう場合があります。こんな感じです。

均等-1

なので、メニューに設置した項目を均等に並べるようにしていきます。テーマTwenty Twelveでのサンプルですが子テーマのスタイルシートに次のコードを追加して下さい。

ulには「display:table」、liには「display:table-cell」を指定する事で均等にする事ができますので試して見て下さい。

サブメニューをカスタマイズする場合

このWordPressのメニューナビにサブアイテム(サブメニュー)を設置している方もいるかと思います。WordPressの管理画面から「外観」⇒「メニュー」と進んでメニューを右にずらしてみるとサブメニューになります。

サブメニュー-2

これで保存して確認するとサブメニューこんな感じに縦に開きます。

サブメニュー-1

このサブメニューのカスタマイズも一緒にやってしまいましょう。スタイルシートに次のコードを追加するだけ。

後はカラーや文字の大きさを自分好みに変更して利用して下さい。

サイトのアクセスアップや稼ぐためにおすすめの無料レポート

個人的にアクセスアップや検索上位表示に役立った無料レポートです。登録にメールアドレスが必要ですが、フリーメールでもOKです。

ブログの更新はこちらから

WordPressナビゲーションメニューのカスタマイズ”に67件のコメントがあります。

コメントの反映には時間がかかる場合があります。

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA


  1. まさ

    しげぞう様

    早速のお返事ありがとうございます。
    やはりナビメニューは自作したほうが早そうですね。

    教えていただいたサイトを参考に作ってみます!
    お忙しいところありがとうございました。

    まさ

  2. しげぞう 投稿作成者

    まさ様

    コメントありがとうございます。PCのナビメニューがスマホで表示されないのは条件分岐してあるからです。ブラウザサイズ600px以上にならないと表示されないようになってます。タブレットとかPCとかですね。

    また親テーマでナビが非表示にされている部分があります。

    親テーマのCSSからこの部分を削除もしくはコメントアウトすればスマホでもナビメニューは出てくると思います。後はCSSで調整していく感じかと思いますが、これ1つ1つCSSで調整していく必要があるかと思いますので、かなり面倒ですし、親テーマが更新されたら毎回親テーマの記述を変更する必要があります。

    なので既にナビメニューを自作されている方のコードなどを参考にさせて頂くのが早いと思いますし、親テーマを触る必要がないと思います。

    こちらの記事など参考になりそうです。

    ⇒http://webshufu.com/customize-navigation-menu-of-twenty-twelve-on-smart-phone/

  3. まさ

    しげぞう様

    はじめまして。
    いつもサイトを参考にしています。まさと申します。

    しげぞう様に1点伺いたいのですが、WordPressのナビゲーションのメニュー部分をスマホの画面でもヘッダー画像の下に表示させるためにはどうしたらよろしいのでしょうか?
    テーマはTwentyTwelveです。

    大変恐縮ではありますが、ご回答頂ければ幸いです。

    何卒、宜しくお願い致します。

  4. サマー

    しげぞうさま

    ナビゲーションメニューも、続きを読むの色も変わりました!本当にありがとうございます。ここで皆さんが感謝されている気持ちが本当によくわかります。めげずに完成させていきたいと思います!!!

  5. Okinagatarashi

    しげぞう様
    ありがとうございました。

    Elements で前後を見ればいいんだ!そうか!ありがとうございます。一つ「 { 」を忘れてる事が分からずパニクり泣きつく頃から考えると・・・

    そこが脱出出来たのもしげぞう様のお蔭です。本当にありがとうございます。困った時の神頼みみたいですね。失礼ぶっこいててごめんなさい。

  6. しげぞう 投稿作成者

    Okinagatarashi様

    反映されて良かったです。そうです、検証から調べる事ができます。ただ、Okinagatarashi様が前回言っていたようにボックスの中にボックス的な部分もあるので前後の部分もチェックする必要があります。今回1番外側のボックスが「header」という事でした。

  7. Okinagatarashi

    しげぞう様
    あっ!私も返信して確認できた(笑)
    こんばんは!本当にありがとうございました。
    すげぇーーー!!華麗に完了です。

    「!important」
    気付けたことだったのに・・・
    自分にがっかりです・・・

    「header」これ、どこで分かるんですか?
    いつもは検証からパクるんですが、
    (このパクリもここで習ったんですが・・・)
    「header」分からなかったです。
    どうも「!important」無しで背景色は変更できました・・・

    ちょくちょくお世話になりに来ないといけなそう・・・です。

    申し訳ないと思いますがどうぞよろしくお願いします。
    おやすみなさい!