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. tanotano より:

    入れてあるプラグインは
    Akismet/Edit Author Slug/Movable Type and TypePad Importer/My Category Order/PS Auto Sitemap/Search Meter/WP Multibyte Patch/WP Slimstat/WP Social Bookmarking Light
    でした。
    1つづつ停止して試してみましたが状況は変わりませんでした。
    現状は記事を書こうとしてもテーマ等の編集をしようとしても、とにかくエラーメッセージで開けない状態です…(TωT)

  2. tanotano より:

    ありがとうございます。確認してみます。

  3. しげぞう より:

    tanotano様

    コメントありがとうございます。原因はプラグインかもしれません。「Preview Theme Plugin」的なプラグイン入れていないでしょうか?もし入れているのであれば一度停止してから「Ctrl」と「F5」を押して確認してみてください。

    もし、それでだめなら他のプラグインも一度停止してから確認してみてください。解決しなくても余計な変更はしない方が良いと思います。まずは1つ1つ原因を探ってみると良いと思います。

  4. tanotano より:

    ご無沙汰しております。
    今回テーマの更新があって、うっかり何もしないまま更新ボタンを押してしまいました。
    その結果、ダッシュボードにもホームページにも上部に何やら英文が表示され、サイドバー等も消えてしまい『保護中』の文字も復活してしまいました(TωT)
    『保護中』の文字はお聞きしたサイトの記事で再度変更しましたが戻りません…
    サイドバー自体は何をどうカスタマイズしたのかは覚えてないのですが、戻すやり方としてはテーマの編集で子テーマのスタイルシート他を更新前の保存してあったものをコピペするやり方でいいのでしょうか…?
    ちなみに表示されてる英文は下記になります

    Warning: call_user_func_array() expects parameter 1 to be a valid callback, function ‘preview_theme’ not found or invalid function name in /home/users/私のURL/wp-includes/plugin.php on line 503

    いつもお聞きしてばかりで申し訳ありません。
    よろしくお願い致します。

  5. しげぞう より:

    >北様

    コメントありがとうございます。メニュー部分ですが、先に「サンプルページ」を削除してメニューを追加したら良いと思います。設定の仕方はこの記事です。
    WordPressのメニューナビの使い方と設定

    一度設定してみてできない場合には再度コメント下さい。よろしくお願い致します。

  6. より:

    失礼いたします。
    メニュー部分?のカスタマイズをあまりしていなく、項目が『ホーム』と『サンプルページ』だけです。変え方が分からないです。次はサイドバーや記事下のカスタマイズを勉強しようと思いまして。
    よろしくお願いいたします。

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