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様

    わざわざ報告ありがとうございます。私も最初の頃は????の連続でしたので気持ちは分かります(笑)。バックアップに関してですが、先月くらいに私サーバーを変更したんです。その時の作業をしたらバックアップの流れがよく理解できました(個人的にですが)。その時はロリポップの「データベース」と「ファイル」をエクスポート(バックアップ)してエックスサーバーにインポート(再構築)という流れだったので、これはバックアップ復元も原理は同じかと思います。

    その時の記事も公開してますので、それを読んでみるとバックアップの方法がなんとなく分かるかも知れません(結構難しいです)。一応その時の記事も紹介しておきますね。
    ロリポップからエックスサーバーに移転する方法

  2. tanotano より:

    教えてくださり、ありがとうございます。

    ①「バックアップからの復元について」はたぶん自分の理解力を超えてるようですので(苦笑)
    また調べながら頑張ってみます。

    ②コメント欄のカスタマイズは、そちらの記事を読んでいたにもかかわらず、自信が無かった為簡単なスタイルシートの方で編集したせいでした(汗)
    慌ててcomments.phpの方から直しました。

    ③パスワード保護記事の表示文字については、だいぶ?????を頭の中にたくさんつけながらでしたが、何とか出来たように思います。
    ※表示は変わったので…たぶん大丈夫だと…(苦笑)

    まだまだ謎だらけな私ですので、このまま対策を探して頑張ってみます。
    本当にありがとうございました。

  3. しげぞう より:

    >tanotano様

    再度コメントありがとうございます。一応私の分かる範囲での回答になりますので、説明不足があればすみません。

    1.バックアップでテーマの復元について

    バックアップファイルから復元するのは非常に手間がかかりますし、ちょっと難しい部分もあるかと思います。個人的にはテーマの編集やカスタマイズする時にコメント(メモ)を書いておく事が良いかと思います。PHPファイルであればカスタマイズする直前の部分にこんな感じでコメントを入れておきます。

    <!--コメント-->

    CSSのコメントとPHPのコメントは書き方が違うので調べてみるとよいと思います。コメント(メモ)を入れておけばどこに何を追加したのか分かりやすくなるため、上手く出来なかった時に削除場所もすぐに探せると思います。

    2.コメント欄のカスタマイズについて

    コメント欄は私も名前とコメントだけにしております。カスタマイズは以下の記事で書いていますので確認してみて下さい。
    http://dokidome.com/wp-customize/564/

    これで上手くできない場合には再度コメント頂けると助かります。

    3.パスワードの保護の文字について

    これは私は利用したことがないので、詳しくは分かりませんが、一応調べてみるとやり方はあるようです。おそらく「ロリポップFTP」ではなくて、普通の「FTPソフト」が必要になると思われます。参考になりそうな記事がありましたので確認してみて下さい。
    ⇒http://burorai.com/kiji-password/

  4. tanotano より:

    出来ました!
    ホントにありがとうございました。

    こちらのページに書き込んで良いのかわからないので、もし失礼な事をお聞きしてるようでしたらスルーしてください。

    まだまだわからない事だらけなので、こちらのサイトで勉強させて頂きながら頑張っておりますが、対策を見つけられない事が3点あります…

    ①バックアップはこちらのサイトで記載されてる通りに出来たのですが、テーマ編集でミスった時に元に戻す(復活させる)にはどうすればいいのかわかりません。一応全部の記事は拝見させて頂いたつもりなのですが…見落としていたら申し訳ありません。

    ②コメント欄を名前とコメントだけにしたのですが「コメントを残す」の下に「メールアドレスが公開されることはありません。」との文言が出てしまいます。コレを消したいと思っているのですが…

    ③パスワード保護の記事のタイトルに出る「保護中」の文字を他の言葉に替える事は出来ないのでしょうか?ちょっと重いなぁと思うので「限定」とかに変更したかったのですが…

    もう1週間グルグルしてしまっていて煮詰まったのでこちらに書かせて頂きました。
    ルール違反でしたら本当に申し訳ございません。
    その際はスルーしてください。

  5. しげぞう より:

    >tanotano様

    コメントありがとうございます。私自身プルダウンメニュー(サブメニュー)は利用してないかったのですが、別のテストサイトで設置して色々変更してみました。下記のコードでサブメニューのカスタマイズができると思いますので、数値や色はお好みで変更し、CSSの一番下に追加して見て下さい。

    /* ナビゲーションサブメニュ- */
    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に */
    }

    もしこれで反映されないようであれば再度コメント頂けると嬉しいです。よろしくお願い致します。

  6. tanotano より:

    初めまして。
    wordpress全くの初心者です。
    全く知識がない私でもこちらの一連の記事で教えて頂いて、なんとか形になってきたところなのですが、どうしてもわからないところがありましたのでご質問させて頂きたくてコメント入れさせて頂きました。

    メニューのカスタマイズですが、プルダウンした時のサブメニュー?(と言う表記でいいのかすらわかってませんが)の背景が薄いグレーで文字がホワイトなため見えません…
    マウスオーバーすれば見えるのですが、そもそもが見えないと困るなと思うんですが、どこからどのように変更すればいいのか全く分からず途方に暮れています。

    お忙しい中申し訳ないのですが、設定の仕方を教えて頂けましたら助かります。

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

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