今回はWordPressのナビゲーションのメニュー部分をカスタマイズとしていきます。具体的にはメニュー部分の色や高さ、文字の大きさと色、それから背景色などを変更していきます。
また、リクエストの多かった、「ナビゲーションメニューを均等に配置する方法」や「サブメニューのカスタマイズ」も紹介していきます。基本的なナビゲーションメニューの設定などは別記事です。
メニュー部分というのは最初このようになっていると思います。
私の場合はこのナビメニューの高さを低くして背景色と文字色を変更しています。
ナビゲーションメニューのカスタマイズ
私の利用している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」がカーソルを載せた時の色です。それぞれ設定しておきましょう。
ナビゲーションのメニューを均等に並べる方法
ナビゲーションのメニューは通常は「左揃え」のような状態になっているので、右側に余白ができてしまう場合があります。こんな感じです。
なので、メニューに設置した項目を均等に並べるようにしていきます。テーマ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の管理画面から「外観」⇒「メニュー」と進んでメニューを右にずらしてみるとサブメニューになります。
これで保存して確認するとサブメニューこんな感じに縦に開きます。
このサブメニューのカスタマイズも一緒にやってしまいましょう。スタイルシートに次のコードを追加するだけ。
/* ナビゲーションサブメニュ－ */
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に */
}後はカラーや文字の大きさを自分好みに変更して利用して下さい。
以上WordPressナビゲーションメニューのカスタマイズでした。
コメント
しげぞう樣、返信ありがとうございます。
サブメニューのプルダウンは、サイトを見る
分にはまったく問題なくなったので、非常に
助かりました。
他の方による役立つサイトが確かにどんどん
でてきていますが、ことわかりやすく読者に
届いているのは、しげぞう樣ではないかと思
います。
その証拠に物分かりが良くない私めがこうし
てWordPressの設定等ができていますので。
（笑）
書籍にすれば売れるのではないでしょうか？
本当に感謝ですね。
あとつまずきそうな所は高速化だと思います
が、またご享受お願い致します。
頑張ります！！
あき様
返信ありがとうございます。
反映しないコードには「!important」をつけると優先的に反映されます。
.main-navigation li ul li a { background: #efefef !important; color:#000 !important; }もしそれで反映さらない場合は何か別の部分で間違っているかもしれませんね。
サイトの記事ありがとうございます。たくさんの記事消しましたし、今後もさらに時間がある時に消していく記事がたくさん出ると思います。もう情報が全体的に古いので全部新しく作り直したいのですが、他にたくさん役立つサイトがどんどんでてきているのでちょっと考え中です。
今後もどうぞよろしくお願いします。
こちらこそ返信ありがとうございます。
先ほどのコードを挿入しましたところ、ホワイトアウト
はまぬがれたようです。（笑）
しかしバックグラウンドカラーの#1F5E73が適用され
ないのはどのようなことなんでしょうねー
@mediaの仕様なのか、サブメニューがプルダウンす
るときに#1F5E73は右側にチョロッとでてますが（笑）
visitedフォントカラーをpurpleにして見栄えを変えて
みました。
（訪問前のフォントカラーはblueにしてもなりませんでし
た。）
しげぞう樣はサイトで稼ぐことをされている中、時間を
割いていただき感謝します。
ところで、実はもうかれこれ１年前にこちらのページを
印刷していたのですが、
「ブログを書くネタがない！記事のネタはどこで探す？」
の記事はもう削除されましたか？
上記の記事は印刷していなくて、記事タイトルリンク文字
だけを印刷してましたので、本格的に学ぶときの楽しみ
にしていました。
「そうそう、ネタどうしようかな～」なんて具合でした。（笑）
「あまりアクセスのない記事は、サイトの足を引っ張るか
ら削除するようにしてます。」のようなのを見かけましたの
で、その関係かなと思いました。
検索すればあるにはあるのですが、そこはやっぱりしげ
ぞう樣の記事を優先して読みたいな～なんて思ってしま
ってます！（本当です）
よろしければ公開していただけますと助かります。
あき様
返信ありがとうございます。
訪問済の記述（a:visited）も追加したらいいかもです。
@media screen and (min-width: 600px){
.main-navigation li ul li a {
background: #efefef;
color:#000;
}
.main-navigation li ul li a:visited {
color:#000;
}
}
ナビゲーションの均等表示は消しても残しても良いと思いますので一度外してどうなるか見てみて下さい。
早速ありがとうございます！
一時はプルダウンサブメニューの文字が黒く表示されて喜んだ
ものの、サブメニューを次々とクリックして訪問済みにすると、や
はり文字が白くなってしまい、ホワイトアウトになってしまいまし
た（笑）。
教えていただいたコードを貼り付けるに当って、
WordPressナビゲーションメニューのカスタマイズ記事の、
ナビゲーションのメニューを均等に並べる方法という見出しに記述
してあったコードは削除しなくても大丈夫でしょうか？
（後から記述したコードが優先されるとのこなので大丈夫なような
気がしますが）
すみません・・・
※ブラウザはFirefox ESR 52.9です。
あき様
コメントありがとうございます。
以下コードを追加して背景色（background）と文字色（color）変更してみてもらえますか？
@media screen and (min-width: 600px){ .main-navigation li ul li a { background: #efefef; color:#000; } }しげぞう樣
どうもお世話になります。
おかげ様でこちらのページまでにたどり着きました。
じつは下のtanotano樣のコメントにもありますとおり
、私もメニューにマウスオーバーしたときにサブメニ
ューのプルダウンの背景が極薄い灰色、文字が白
になります。
文字にマウスオーバーすると文字が黒く浮かび上が
り、サブメニューの背景色（#1f5e73）が反映されてい
ない状況です。
下のしげぞう樣のコメントのコードも貼り付けましたが
だめでした。
URLはこちらになります。
サブメニューがあるのは「このサイトについて」と
「レベル１」です。
どうかよろしくお願いいたします。
しげぞう様
早速のお返事ありがとうございます。
やはりナビメニューは自作したほうが早そうですね。
教えていただいたサイトを参考に作ってみます！
お忙しいところありがとうございました。
まさ
まさ様
コメントありがとうございます。PCのナビメニューがスマホで表示されないのは条件分岐してあるからです。ブラウザサイズ600px以上にならないと表示されないようになってます。タブレットとかPCとかですね。
また親テーマでナビが非表示にされている部分があります。
[css]
.main-navigation ul.nav-menu,
.main-navigation div.nav-menu > ul {
display: none;
}
[/css]
親テーマのCSSからこの部分を削除もしくはコメントアウトすればスマホでもナビメニューは出てくると思います。後はCSSで調整していく感じかと思いますが、これ１つ１つCSSで調整していく必要があるかと思いますので、かなり面倒ですし、親テーマが更新されたら毎回親テーマの記述を変更する必要があります。
なので既にナビメニューを自作されている方のコードなどを参考にさせて頂くのが早いと思いますし、親テーマを触る必要がないと思います。
こちらの記事など参考になりそうです。
⇒http://webshufu.com/customize-navigation-menu-of-twenty-twelve-on-smart-phone/
しげぞう様
はじめまして。
いつもサイトを参考にしています。まさと申します。
しげぞう様に1点伺いたいのですが、WordPressのナビゲーションのメニュー部分をスマホの画面でもヘッダー画像の下に表示させるためにはどうしたらよろしいのでしょうか？
テーマはTwentyTwelveです。
大変恐縮ではありますが、ご回答頂ければ幸いです。
何卒、宜しくお願い致します。
しげぞうさま
ナビゲーションメニューも、続きを読むの色も変わりました！本当にありがとうございます。ここで皆さんが感謝されている気持ちが本当によくわかります。めげずに完成させていきたいと思います！！！
しげぞう様
ありがとうございました。
Elements で前後を見ればいいんだ！そうか！ありがとうございます。一つ「 ｛ 」を忘れてる事が分からずパニクり泣きつく頃から考えると・・・
そこが脱出出来たのもしげぞう様のお蔭です。本当にありがとうございます。困った時の神頼みみたいですね。失礼ぶっこいててごめんなさい。
Okinagatarashi様
反映されて良かったです。そうです、検証から調べる事ができます。ただ、Okinagatarashi様が前回言っていたようにボックスの中にボックス的な部分もあるので前後の部分もチェックする必要があります。今回１番外側のボックスが「header」という事でした。
しげぞう様
あっ！私も返信して確認できた(笑)
こんばんは！本当にありがとうございました。
すげぇーーー！！華麗に完了です。
「!important」
気付けたことだったのに・・・
自分にがっかりです・・・
「header」これ、どこで分かるんですか？
いつもは検証からパクるんですが、
(このパクリもここで習ったんですが・・・)
「header」分からなかったです。
どうも「!important」無しで背景色は変更できました・・・
ちょくちょくお世話になりに来ないといけなそう・・・です。
申し訳ないと思いますがどうぞよろしくお願いします。
おやすみなさい！