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

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

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

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

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

最終更新日:2018/03/15

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

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

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

  1. まさ

    しげぞう様

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

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

    まさ