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

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

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

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

メニュー部分-1

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

メニュー部分-2

スポンサーリンク

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

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

/* ナビメニュー */
.main-navigation li a {
color: #fff; /* 文字色(白) */
font-weight:bold; /* 太字にして */
line-height: 25px; /* 高さ */
font-size: 15px;} /* 文字の大きさ */
.main-navigation ul {
margin: 0; /* 余白をなくす */
background: #1F5E73; /* 背景色 */
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}

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

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

.main-navigation li a:visited {color: #fff;}
.main-navigation li a:hover{color: #7a8285;}

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

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

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

均等-1

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

@media screen and (min-width: 960px) {
.main-navigation ul.nav-menu {
 display: table !important;
 table-layout: fixed;
 text-align: center;
 width: 100%;}

 .main-navigation li {
 display: table-cell;
 vertical-align: middle;}
}

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

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

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

サブメニュー-2

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

サブメニュー-1

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

/* ナビゲーションサブメニュ- */
ul.sub-menu li a{
color:#fff !important;  /* サブメニュー文字色 */
background-color:#1F5E73 !important;  /* サブメニューの背景色 */
font-size:12px !important;  /* 文字の大きさ */
font-weight:bold !important;  /* 文字を太字に */
}
 
ul.sub-menu li {
margin-right:0px !important; /* サブメニューの右の余白を0に */
}

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

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

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

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

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

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

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

  1. まさ

    しげぞう様

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

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

    まさ

  2. しげぞう 投稿作成者

    まさ様

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

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

    .main-navigation ul.nav-menu,
    .main-navigation div.nav-menu > ul {
    	display: none;
    }
    

    親テーマの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」無しで背景色は変更できました・・・

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

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

  8. しげぞう 投稿作成者

    Okinagatarashi様

    まだ返信できた(笑)「!important」を追加して以下でどうですか?こちらも試してみてください。

    header {
        border: 2px solid #c8d5bb !important;
    }
  9. Okinagatarashi

    しげぞう様
    ごめんなさい。お久しぶりです。ありがとうございます。
    今までのデータ削除で案外へこたれ見たいで全く進みません。
    どうにか好きなところから始めています!

    ダメでした・・・

    現在、頂いたコードを書いたままになっています。
    時にPCおとすと動く時あるから・・・

    毎度、ご迷惑をお掛けします・・・
    ごめんなさい。私も週末はあれこれで
    覗けない事も多いので来週で全く構いません。
    ご面倒をお掛けします。宜しくお願いします。

  10. しげぞう 投稿作成者

    Okinagatarashi様

    お久しぶりです!再チャレンジですね!以下のコードの追加試してみて下さい。スタイルシート(CSS)です。

    header {
        border: 2px solid #c8d5bb;
    }

    一応スマホなどでも確認する必要があると思います。スマホでデザインが崩れたりするなら条件分岐が必要になります。

    もし上手く行かない場合はまたコメント下さい。ただ返信は来週になるかもしれません。

  11. Okinagatarashi

    しげぞう様
    こんにちは!いつ見ても細やかなやりとりに脱帽します。
    ポンコツ也のチャレンジではどうしても上手くいかない事が
    出来たので出来ればご教授下さい。

    ナビゲーションメニューだけが上手く変更できないです。
    何度かチャレンジしてコードを書いてみると分割してしまいます。
    ボックスがあって入れ子になってるみたいな感じで
    サイトタイトル メニューの2つのボックスが大きいボックスの中にあるのか
    大きいボックスが分かりません・・・

    下の「Current Japan Time」や左側サイドバーの「Recent posts」等とデザインを揃えたいのですがどうしたらいいか分りません。
    ちっらと見て頂けますと幸せます。 

  12. しげぞう様

    返信ありがとうございます。早速試してみたところ、無事左詰めにすることができました!

    最初貼り付けたときは反応しなかったのですが、!importantをつけたら上手くいきました。以前しげぞう様に教えていただいた知識が役に立ってよかったです。

    最近やっと報酬も発生するようになってきたので、これからもっと頑張っていこうと思います。

    また何かあれば質問させていただきますね。お忙しい中本当にありがとうございましたm(__)m

  13. しげぞう 投稿作成者

    翔様

    コメントありがとうございます。スマホだけ余白を左に詰める対応させるという事なので条件分岐が必要です。元々PCで余白がないのであれば条件分岐しなくてもOKかもしれませんが、一応条件分岐入れときます。

    @media screen and (max-width: 500px) {
    .article ul {
      padding-left: 0px;
    }
    }

    ブラウザサイズ500px以下(スマホ)の場合に「article ul」の左余白を0pxにする感じです。条件分岐も閉じるので最後の閉じタグ「 } 」は2つです。上記で反映されるか確認をお願いします。

    CSSの知識が付いてきたらブラウザのデベロッパーツールを使うと自分であれこれチェックできます。

  14. しげぞう様

    ご無沙汰しております。CSSに関しての質問があるのですが、関連記事が見つからなかったので、コチラでさせていただきますね。

    先日リストタグに画像を挿入し、ブレットのような形に変更してみたのですが、スマホ表示だと左側に大きく余白ができてしまいます。

    色々と試してみたのですが、どうにも上手くいかず、モヤモヤした気分が続いています。PC表示では左詰めになっているようなので、スマホ用のコードが必要なのでしょうか?

    ちなみにコチラが当ブログのURLです。公開時には削除していただけると助かります。

    下が今回打ち込んだコードとなります。

    ul.sample1{
    list-style-type:none;
    padding-left:0px;
    padding-right:1em;
    }

    li.sample1{
    padding-left:24px;
    background-image:url(“http://○○/wp-content/uploads/2017/06/e_others_75-1-e1498385536296.png/img/pochi.png”);
    background-repeat:no-repeat;
    background-position:0px 2px;
    }

    ulのpadding-leftを0にすれば左詰めになると思うのですが、なぜか上手くいきません。。

    お忙しいところ申し訳ないのですが、何卒ご教授くださいませ。

  15. しげぞう 投稿作成者

    ジャギ様

    返信ありがとうございます。無事に羽根井されて良かったです。これ、Twenty Twelveでも同じ症状になるので、解決策を考えておきますね。上手くできるかわかりませんが、できた時にはまた記事に追記でもしておきますね!どうぞよろしくお願い致します。

  16. ジャギ様

    しげぞうさんへ

    お早い返信ありがとうございます。
    該当箇所を外してみますと縦ならびになりました!
    タグの知識が全くないのでとても助かります。
    TwellveThieteenだとまたちがったタグをいれないといけないんですかね。
    ありがとうございます。

  17. しげぞう 投稿作成者

    ジャギ様

    コメントありがとうございます。サブメニューが横に並んでしまうのはメニューを均等にするためのコードが原因かと思いますので、この均等にする部分のコードだけ外して試してみて下さい。ここで紹介している均等にするコードを入れるとサブメニューが縦にならないので、均等にするのであれば別の方法を考える必要があるかな?と思います。

    ちょっと考えてみるので、お手数ですが一度均等にするコードを外してサブメニューが縦に並ぶか確認して再度コメント下さい。どうぞよろしくお願い致します。