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

WordPressナビゲーションメニューのカスタマイズ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に */
}

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

以上WordPressナビゲーションメニューのカスタマイズでした。

コメント

  1. あき より:

    こちらこそ返信ありがとうございます。
    先ほどのコードを挿入しましたところ、ホワイトアウト
    はまぬがれたようです。(笑)
    しかしバックグラウンドカラーの#1F5E73が適用され
    ないのはどのようなことなんでしょうねー
    @mediaの仕様なのか、サブメニューがプルダウンす
    るときに#1F5E73は右側にチョロッとでてますが(笑)
    visitedフォントカラーをpurpleにして見栄えを変えて
    みました。
    (訪問前のフォントカラーはblueにしてもなりませんでし
    た。)
    しげぞう樣はサイトで稼ぐことをされている中、時間を
    割いていただき感謝します。

    ところで、実はもうかれこれ1年前にこちらのページを
    印刷していたのですが、
    「ブログを書くネタがない!記事のネタはどこで探す?」
    の記事はもう削除されましたか?
    上記の記事は印刷していなくて、記事タイトルリンク文字
    だけを印刷してましたので、本格的に学ぶときの楽しみ
    にしていました。
    「そうそう、ネタどうしようかな~」なんて具合でした。(笑)
    「あまりアクセスのない記事は、サイトの足を引っ張るか
    ら削除するようにしてます。」のようなのを見かけましたの
    で、その関係かなと思いました。
    検索すればあるにはあるのですが、そこはやっぱりしげ
    ぞう樣の記事を優先して読みたいな~なんて思ってしま
    ってます!(本当です)
    よろしければ公開していただけますと助かります。

  2. しげぞう より:

    あき様

    返信ありがとうございます。

    訪問済の記述(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;
    }
    }

    ナビゲーションの均等表示は消しても残しても良いと思いますので一度外してどうなるか見てみて下さい。

  3. あき より:

    早速ありがとうございます!
    一時はプルダウンサブメニューの文字が黒く表示されて喜んだ
    ものの、サブメニューを次々とクリックして訪問済みにすると、や
    はり文字が白くなってしまい、ホワイトアウトになってしまいまし
    た(笑)。
    教えていただいたコードを貼り付けるに当って、
    WordPressナビゲーションメニューのカスタマイズ記事の、
    ナビゲーションのメニューを均等に並べる方法という見出しに記述
    してあったコードは削除しなくても大丈夫でしょうか?
    (後から記述したコードが優先されるとのこなので大丈夫なような
    気がしますが)
    すみません・・・
    ※ブラウザはFirefox ESR 52.9です。

  4. しげぞう より:

    あき様

    コメントありがとうございます。

    以下コードを追加して背景色(background)と文字色(color)変更してみてもらえますか?

    @media screen and (min-width: 600px){
    .main-navigation li ul li a {
        background: #efefef;
        color:#000;
    }
    }
  5. あき より:

    しげぞう樣

     どうもお世話になります。
    おかげ様でこちらのページまでにたどり着きました。
    じつは下のtanotano樣のコメントにもありますとおり
    、私もメニューにマウスオーバーしたときにサブメニ
    ューのプルダウンの背景が極薄い灰色、文字が白
    になります。
    文字にマウスオーバーすると文字が黒く浮かび上が
    り、サブメニューの背景色(#1f5e73)が反映されてい
    ない状況です。

    下のしげぞう樣のコメントのコードも貼り付けましたが
    だめでした。
    URLはこちらになります。

    サブメニューがあるのは「このサイトについて」と
    「レベル1」です。

    どうかよろしくお願いいたします。

  6. まさ より:

    しげぞう様

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

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

    まさ

タイトルとURLをコピーしました