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に */
}

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

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

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

おすすめの無料セミナー

これまでお金に関する勉強をした事がない方は稼ぐサイト作りの前にお金に関する無料セミナーに参加してみて下さい。お金をためたり増やしたりするためにお金の知識があるとかなり有利。考え方の土台になる部分ですからね。

「1万円から始められる節約の方法」「お金に働いてもらう方法」「収入の2割を自動的に貯める方法」など、お金に関する基本的な知識が学べる2時間の無料のセミナーが毎日のように行われてますので、一度参加してみる事をおすすめします。

これまで全くお金の勉強していない方であればお金の知識を身につける事で考え方が大きく変化するはずです。無料の2時間程度のセミナーですが、内容は濃いのでおすすめです。
お金に関する教養無料セミナー

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

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

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

  1. しげぞう 投稿作成者

    ジャギ様

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

  2. ジャギ様

    しげぞうさんへ

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

  3. しげぞう 投稿作成者

    ジャギ様

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

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

  4. ジャギ様

    いつも参考にさせていただいています。
    TwelveThirteenをつかってワードプレスでサイト作ってるんですけれども、
    サブページとかのカスタマイズはうまく行けました。
    サブメニューのカスタマイズをするとサブメニューが横並びになってしまいます。
    縦ならびにする方法を教えていただけませんか?
    よろしくお願いいたします。

  5. MAT

    すいません、検索窓の上のウィジェットタイトル出ました。。。

    検索窓だけウィジェットタイトルに文字を入れないとウィジェットタイトルが出ない仕様だったんですね。。。

    もうちょっと早く気づけば、よかったのですが・・。
    。・゚・(ノД`)・゚・。

  6. MAT

    すいません、先ほどナビゲーションメニューの背景色が変わらない、と書きましたが、style.cssの記述誤りのためでした。

    お騒がせいたしました。。。

    ただ、右サイドバーの検索窓の上にウィジェットタイトルが表示されないのですが、これは何か問題があるのでしょうか?

    先ほどのドメインの最初の記事に(子テーマの)style.cssをのせておきますので、もしよろしければ改善策を教えていただけないでしょうか?

    よろしくお願いいたします。

    自分は、もう一度、style.cssの記述チェックを行います。

  7. Chisapon

    しげぞう様

    アフィリエイトを始めたことがきっかけでお声がけいただいた仕事なので、本当に楽しく働けています。
    カラコンについての記事は、去年の夏頃ご相談させて頂いていた1作目の美容ブログの記事の一部で書いたことはありますが仕事のライティングでは扱ったことがないので…おそらく別の方の記事かな?と思います。
    今作っているサイトを公開したら、一度美容から離れてガラッと異なる分野に挑戦しようかとも思っています。

    お役にたてるようでしたら、ぜひお声がけいただけますと嬉しいです。
    今後ともどうぞよろしくお願い致します!

  8. しげぞう 投稿作成者

    Chisapon様

    返信ありがとうございます。反映されたようで良かったです!今は美容関連メディアのライティングしているんですね。凄い!!私自身美容系のブログは苦手なんですが結構色々な記事を見るのは好きです。Chisaponさんの記事っぽいかも?と思った記事を読んだ事もあるので、もしかするとChisaponさんのブログ以外で見た事があるかもしれません。あれはカラコンか何かの記事だったかな?違ったらすみません(笑)。

    今は女性向けの美容関連サイトは全く作成していませんが、ちょっとネタを探してChisaponさんにお願いできる物があれば是非お願いしたいと思います。もちろん仕事として。また近い内に連絡させて頂くかと思いますので、その時はどうぞよろしくお願い致します。

  9. Chisapon

    しげぞう様

    ご返信ありがとうございます!
    ご教示いただいた通り「}」が抜けていたようで、追記したら無事反映されました!ついでに質問したかったブログタイトルの色も直ってしまいました!
    ありがとうございます!

    また、しげぞうさんのおっしゃっる通りこちらのブログは今ノンインデックスの設定にしています。冬に立ち上げ、亀の歩みで少しずつ記事を書いたりカスタマイズをしているもので、ある程度完成してからインデックスさせようかと思いすでに3カ月経ってしまいました(笑)
    とはいえ、順位が上がらないうちにそんなことを気にしているのもお恥ずかしい話なのですが…。

    美容ブログも覚えてくださっていて非常に嬉しいです!
    しげぞうさんのサイトを参考にアフィリを始めてから、今仕事では美容や女性向けメディアの記事ライティングをしております!仕事でもWordPressで記事を書くことが多いので、今そのような仕事ができているのはしげぞうさんのおかげです。
    サイトごとに文体や色を変えてはいますが、少しずつライティングも上達できればと奮闘しております。今後ともどうぞよろしくお願い致します。

  10. しげぞう 投稿作成者

    Chisapon様

    コメントありがとうございます。えっと、CSSが反映されないという事ですが、ChisaponさんのCSSを見ると途中で記述ミスがあるので、それが原因かと思います。具体的には「 } 」が1つ抜けています。これが抜けているので、それ以降のコードが反映されていないかと思います。

    スタイルシート(CSS)のこの部分です。抜粋してみました。

    /* ナビメニュー */
    .main-navigation li a {
    color: #fff; /* 文字色(白) */
    font-weight:bold; /* 太字にして */
    line-height: 25px; /* 高さ */
    font-size: 13px;} /* 文字の大きさ */
    .main-navigation ul {
    margin: 0; /* 余白をなくす */
    background: #f08080; /* 背景色 */
    .main-navigation li a:visited {color: #dcdcdc;}
    .main-navigation li a:hover{color: #ffe4e1;}

    「背景色」の部分の後に「 } 」が無いので、それ以降の記述が反映されていません(パンくずの位置調整とかも)。なので、背景色のコードの後に「 } 」を入れてみて下さい。これで上手く反映されるとは思いますが、もし反映されない場合には別の原因があるかもしれません。なので上記の修正でも反映されない場合には再度コメント頂けると助かります。

    それとChisaponさんのこのブログは「noindex」になってますね。インデックスされないように設定されているのでしょうか?完成するまで「noindex」の設定にしているとかですかね?ちょっと気になりました。

    追記:美容ブログのChisaponさんですよね!覚えてますよ!Chisaponさんの記事は個人的に結構好きで記事の依頼をしたいくらいです(笑)また何か分からない部分やできない部分があればいつでもコメント下さい。応援してます!

  11. Chisapon

    しげぞう様

    度々すみません…。Chisaponです。

    先ほど質問させて頂いたナビメニューカスタマイズの件ですが、対象のサイトは下記です。念のため…。

    何度もすみません。もし、明らかにわかるような原因があればで構いませんので、お返事いただけますと幸いです。

  12. Chisapon

    しげぞう様

    ご無沙汰しております。
    昨年の夏~秋にかけていろいろと質問させて頂いておりましたChisaponです。
    仕事を始めたためなかなかPCと向き合う時間が以前のように取れなくなりましたが、ブログは今でも続けており、こちらのサイトもずっと拝見させて頂いております!

    少し前に新しいサイトを立ち上げ、またしげぞうさんの記事を参考にWPのカスタマイズに励んでいるのですが、こちらのナビゲーションメニューのカスタマイズで躓いてしまいました。

    上手くいかない点が2つあります。

    ・ご教示いただいたコードをソックリ子テーマのCSSにはっつけたのですが、ナビメニューの文字が均等にならず右の余白が空いたままです…。(試しにPaddingで左に余白を付けたら幅が足りず2段になってしまいました。)

    ・HoverとVisitedもともに指定のカラーにしたのですが反映されません。

    ナビメニューの背景色や文字の大きさなどは反映されているのですが…
    考えられる原因などありますでしょうか?

    お忙しい中恐縮ですが、ご教示いただけますと幸いです。

  13. okinagatarashi

    しげぞう様
    おはようございます。
    お世話になっています。ごめんなさい…面倒を言いました…
    しげぞう様、謝らないで下さい!しげぞう様が居るから…ポンコツも何とかやってます。
    本当にいつもありがとうございます。