WordPressナビゲーションメニューのスタイルを設定する方法

WordPressのナビゲーションメニューをスタイル設定して、色や外観を変更しますか? WordPressテーマはナビゲーションメニューの外観を処理しますが、CSSを使用して要件に合わせて簡単にカスタマイズできます。この記事では、サイトのWordPressナビゲーションメニューのスタイルを設定する方法を説明します.


WordPressのナビゲーションメニューのスタイル

2つの異なる方法を示します。最初の方法は、プラグインを使用し、コードの知識を必要としないため、初心者向けです。 2番目の方法は、プラグインの代わりにCSSコードを使用することを好む中級DIYユーザー向けです。.

方法1:プラグインを使用してWordPressナビゲーションメニューにスタイルを設定する

WordPressテーマはCSSを使用してナビゲーションメニューのスタイルを設定します。多くの初心者は、自分でテーマファイルを編集したり、CSSコードを書いたりすることに慣れていない.

WordPressスタイリングプラグインが役に立ちます。テーマファイルを編集したり、コードを記述したりする必要がありません。.

まず、CSS Heroプラグインをインストールしてアクティブにする必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。.

CSS Heroは、コードを1行も記述せずに独自のWordPressテーマをデザインできるプレミアムWordPressプラグインです(HTMLまたはCSSは不要)。詳細については、CSSヒーローのレビューをご覧ください.

WPBeginnerユーザーは、このCSSヒーロークーポンを使用して、購入時に34%の割引を受けることができます.

アクティブ化すると、CSSヒーローライセンスキーを取得するようにリダイレクトされます。画面の指示に従うだけで、数回クリックするだけでサイトにリダイレクトされます.

次に、WordPress管理ツールバーのCSSヒーローボタンをクリックする必要があります。.

CSSヒーローを起動

CSSヒーローは、WYSIWYG(表示されるものが表示されるもの)エディターを提供します。ボタンをクリックすると、フローティングCSSヒーローツールバーが画面に表示されたWebサイトに移動します.

CSSヒーローツールバー

編集を開始するには、上部にある青いアイコンをクリックする必要があります.

青色のアイコンをクリックした後、マウスをナビゲーションメニューに移動すると、CSS Heroの周りに境界線が表示されて強調表示されます。ハイライトされたナビゲーションメニューをクリックすると、編集可能な項目が表示されます.

ポイントアンドクリックしてメニューをカスタマイズ

上のスクリーンショットでは、上部のナビゲーションメニューコンテナーが表示されています。ナビゲーションメニューの背景色を変更するとします。その場合、メニュー全体に影響する上部ナビゲーションを選択します.

CSSヒーローは、テキスト、背景、ボーダー、マージン、パディングなどの編集可能なさまざまなプロパティを表示します.

CSSプロパティ

変更するプロパティをクリックできます。 CSSヒーローはあなたがあなたの変更を行うことができる簡単なインターフェースを示します.

要素の外観を変更する

上のスクリーンショットでは、背景を選択しており、背景色、グラデーション、画像などを選択するための優れたインターフェースを示しています.

変更を加えると、テーマのプレビューでライブで確認できます.

CSSの変更のライブプレビュー

変更が完了したら、CSSヒーローツールバーの保存ボタンをクリックして変更を保存します。.

この方法を使用する最も良い点は、加えた変更を簡単に元に戻すことができることです。 CSSヒーローはすべての変更の完全な履歴を保持し、これらの変更間を行き来できます.

方法2:WordPressナビゲーションメニューのスタイルを手動で設定する

この方法では、手動でカスタムCSSを追加する必要があり、中間ユーザー向けです.

WordPressナビゲーションメニューが番号なしリスト(箇条書き)で表示される.

通常、デフォルトのWordPressメニュータグを使用すると、CSSクラスが関連付けられていないリストが表示されます。.

<?php wp_nav_menu(); ?>

順序付けられていないリストには、クラス名「メニュー」があり、各リスト項目には独自のCSSクラスがあります.

これは、メニューの場所が1つしかない場合に機能する可能性があります。ただし、ほとんどのテーマには、ナビゲーションメニューを表示できる複数の場所があります.

デフォルトのCSSクラスのみを使用すると、他の場所のメニューと競合する可能性があります.

これが、CSSクラスとメニューの場所も定義する必要がある理由です。おそらく、WordPressテーマは、次のようなコードを使用してナビゲーションメニューを追加することですでにそれを行っています。

<?php
wp_nav_menu(array(
‘theme_location’ => 「プライマリ」,
‘menu_class’ => ‘メインメニュー’,
));
?>

このコードは、テーマがプライマリメニューを表示する場所であることをWordPressに伝えます。また、CSSクラスのプライマリメニューをナビゲーションメニューに追加します。.

これで、このCSS構造を使用してナビゲーションメニューのスタイルを設定できます.

//コンテナクラス
#header .primary-menu {}

//コンテナクラスの最初の順不同リスト
#header .primary-menu ul {}

//順不同リスト内の順不同リスト
#header .primary-menu ul ul {}

//各ナビゲーションアイテム
#header .primary-menu li {}

//各ナビゲーション項目アンカー
#header .primary-menu li a {}

//ドロップダウンアイテムがある場合は番号なしリスト
#header .primary-menu li ul {}

//各ドロップダウンナビゲーションアイテム
#header .primary-menu li li {}

//各ドレープダウンナビゲーションアイテムアンカー
#header .primary-menu li li a {}

#headerを、ナビゲーションメニューで使用されるコンテナーCSSクラスに置き換える必要があります。.

この構造は、ナビゲーションメニューの外観を完全に変更するのに役立ちます.

ただし、他のWordPressで生成されたCSSクラスが自動的に各メニューとメニュー項目に追加されます。これらのクラスを使用すると、ナビゲーションメニューをさらにカスタマイズできます.

//現在のページのクラス
.current_page_item {}

//現在のカテゴリのクラス
.現在の猫{}

//他の現在のメニュー項目のクラス
.現在のメニュー項目{}

//カテゴリのクラス
.menu-item-type-taxonomy {}

//投稿タイプのクラス
.menu-item-type-post_type {}

//カスタムリンクのクラス
.メニューアイテムタイプカスタム{}

//ホームリンクのクラス
.メニューアイテムホーム{}

WordPressでは、独自のカスタムCSSクラスを個々のメニュー項目に追加することもできます.

この機能を使用して、メニューに画像アイコンを追加したり、色を変更してメニュー項目を強調表示したりするなど、メニュー項目のスタイルを設定できます.

に向かう 外観»メニュー WordPress管理者のページに移動し、[画面オプション]ボタンをクリックします.

個々のメニュー項目のCSSクラスオプションを有効にする

そのボックスをチェックすると、個々のメニュー項目を編集するときに追加のフィールドが追加されることがわかります.

WordPressのメニュー項目にカスタムCSSクラスを追加する

これで、このCSSクラスをスタイルシートで使用して、カスタムCSSを追加できます。追加したCSSクラスのメニュー項目にのみ影響します.

WordPressのナビゲーションメニューのスタイルの例

異なるWordPressテーマは、異なるスタイルオプション、CSSクラス、さらにはJavaScriptを使用してナビゲーションメニューを作成する場合があります。これにより、これらのスタイルを変更し、独自の要件を満たすようにナビゲーションメニューをカスタマイズするための多くのオプションが提供されます.

どのCSSクラスを変更するべきかを理解するには、Webブラウザーの検査ツールが最適です。これまで使用したことがない場合は、検査ツールを使用してWordPressテーマをカスタマイズする方法に関するガイドをご覧ください。.

基本的に、変更する要素にカーソルを合わせ、右クリックして、ブラウザーのメニューから[検査]ツールを選択するだけです.

検査ツールを使用して変更するCSSクラスを検索する

そうは言っても、WordPressのナビゲーションメニューのスタイルを設定する実際の例をいくつか見てみましょう.

1. WordPressナビゲーションメニューでフォントの色を変更する方法

ナビゲーションメニューのフォントの色を変更するためにテーマに追加できるサンプルのカスタムCSSは次のとおりです.

#top-menu li.menu-item a {
色:#ff0000;
}

この例では、#top-menuは、ナビゲーションメニューを表示する番号なしリストに割り当てられたIDです。テーマで使用されているIDを調べるには、検査ツールを使用する必要があります.

WordPressナビゲーションメニューのフォント色の変更

2.ナビゲーションメニューバーの背景色を変更する方法

まず、ナビゲーションメニューを囲むコンテナのテーマで使用されるCSS IDまたはクラスを見つける必要があります.

ナビゲーションメニューコンテナーのCSSクラスを見つける

その後、次のカスタムCSSを使用して、ナビゲーションメニューバーの背景色を変更できます。.

.ナビゲーショントップ{
background-color:#000;
}

デモウェブサイトでの表示は次のとおりです.

ナビゲーションメニューバーの背景色の変更

3.単一のメニュー項目の背景色を変更する方法

多くのWebサイトは、ナビゲーションメニューの最も重要なリンクに異なる背景色を使用していることに気づいたかもしれません。このリンクは、ログイン、サインアップ、連絡、または購入ボタンです。別の色を付けることで、リンクが目立つようになります.

これを実現するために、異なる背景色で強調表示したいメニュー項目にカスタムCSSクラスを追加します.

に向かう 外観»メニュー 画面の右上隅にある[画面オプション]ボタンをクリックします。これにより、「CSSクラス」オプションの横にあるチェックボックスをオンにする必要があるフライダウンメニューが表示されます。.

個々のメニュー項目のCSSクラスオプションを有効にする

その後、変更するメニュー項目までスクロールし、クリックして展開します。カスタムCSSクラスを追加する新しいオプションが表示されます.

メニュー項目にカスタムCSSクラスを追加する

これで、このCSSクラスを使用して、特定のメニュー項目のスタイルを変えることができます.

.お問い合わせ {
背景色:#ff0099;
border-radius:5px;
}

これがテストサイトでの様子です.

WordPressナビゲーションメニューの1つのメニュー項目の背景色を変更する

4.ホバー効果をWordPressナビゲーションメニューに追加する

マウスオーバーでメニュー項目の色を変更しますか?この特定のCSSトリックにより、ナビゲーションメニューがよりインタラクティブに見えます.

次のカスタムCSSをテーマに追加するだけです.

#top-menu li.menu-item a:hover {
background-color:#fff;
色:#666;
border-radius:5px;
}

この例では、#top-menuは、テーマが順序なしナビゲーションメニューリストに使用するCSS IDです。.

これは私たちのテストサイトでこれがどのように見えたかです.

WordPressナビゲーションメニューのマウスオーバー効果

5. WordPressでスティッキフローティングナビゲーションメニューを作成する

通常、ナビゲーションメニューは上部に表示され、ユーザーが下にスクロールすると消えます。ユーザーが下にスクロールしても、固定のフローティングナビゲーションメニューが上に表示される.

次のCSSコードをテーマに追加して、ナビゲーションメニューを固定することができます.

#トップメニュー {
背景:#2194af;
高さ:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
幅:100%;
位置:固定;
top:0;
左:0;
右:0;
text-align:右;
padding-right:30px
}

#top-menuをナビゲーションメニューのCSS IDに置き換えるだけです.

これが私たちのデモでどのように見えたかです:

スティッキーナビゲーションメニュー

詳細な手順と代替方法については、WordPressでスティッキフローティングナビゲーションメニューを作成する方法に関するガイドをご覧ください。.

6. WordPressで透明なナビゲーションメニューを作成する

多くのウェブサイトでは、アクションボタンの呼び出しに大きなまたはフルスクリーンの背景画像を使用しています。透明なメニューを使用すると、ナビゲーションが画像と調和します。これにより、ユーザーは行動を促すフレーズに集中する可能性が高くなります.

次のサンプルCSSをテーマに追加するだけで、ナビゲーションメニューが透明になります.

#site-navigation {
背景色:透明;
}

これは私たちのデモサイトでの見た目です.

WordPressの透明なナビゲーションメニュー

テーマによっては、透明なメニューの背後の領域を覆うようにヘッダー画像の位置を調整する必要がある場合があります.

この記事が、WordPressナビゲーションメニューのスタイルを設定する方法の学習に役立ったことを願っています。また、モバイル対応のWordPressメニューを追加する方法に関するガイドもご覧ください。.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me