WordPressメニューのスタイルをカスタマイズする方法：簡単な3つの方法 

私は長年多くのWordPressメニューをカスタマイズしてきましたが、常に気づくのは、デフォルトのスタイルが背景に溶け込んでいるということです。機能はしますが、ブランドに合っていなかったり、サイトを目立たせたりするのに役立っていません。

メニューにいくつかの小さな変更を加えるだけで、サイト全体がより洗練され、ナビゲートしやすくなります。

このガイドでは、コーディング不要で、WordPressメニューをカスタマイズする4つの方法をステップバイステップでご紹介します。

WordPressメニューをカスタマイズする最も速い方法は、ダッシュボードの外観 → メニューから行うことです。項目を追加し、表示場所を設定して保存します。フォント、色、レイアウトを完全にデザイン制御するには、SeedProdのドラッグ＆ドロップビルダーを使用します。ブロックテーマの場合は、WordPressサイトエディターを使用します。

デフォルトのエディターを使用してWordPressメニューをカスタマイズするにはどうすればよいですか？

始めるのに最も簡単な方法は、外観 → メニューにある組み込みのメニューエディターです。これはクラシックテーマやほとんどの非ブロックテーマで機能し、追加のプラグインは必要ありません。

私は長年このエディターを使用してきましたが、基本的なナビゲーション構造を構築する最も速い方法であることに変わりはありません。

ステップ1. 新しいメニューを作成する

WordPressダッシュボードから外観 → メニューに移動します。上部にある「メインメニュー」のようなメニュー名を入力し、メニューを作成をクリックします。

ステップ2. ページ、投稿、またはカスタムリンクを追加する

左側で、追加したいページまたは投稿にチェックを入れ、メニューに追加をクリックします。カスタムリンクパネルを使用して、カスタムリンクテキストを持つ任意のURLを追加します。

ステップ3. 表示場所を割り当てる

メニュー設定までスクロールし、プライマリメニューのような表示場所をチェックします。利用可能な場所はテーマによって異なります。

アイテムをドラッグ＆ドロップして並べ替えたり、ネストしてドロップダウンサブメニューを作成したりすることもできます。

ステップ4. メニューを保存する

メニューを保存をクリックすると、選択した場所にメニューが表示されます。

この方法は基本的な構造と並べ替えを処理しますが、スタイリングの制御は限られています。フォント、色、レイアウトを完全にデザイン制御するには、以下のSeedProdの方法を試してください。

ページビルダーでWordPressメニューをカスタマイズするにはどうすればよいですか？

メニューの外観をより細かく制御するには、ページビルダープラグインを使用するのが良い方法です。この例ではSeedProdを使用しますが、他のページビルダーでも同様の原則が適用されます。

SeedProdは、WordPress用のドラッグ＆ドロップウェブサイトビルダーで、コードを書かずにカスタムページ、メニュー、テーマ全体を作成できます。機能は以下の通りです。

• ドラッグ＆ドロップページビルダー
• WordPressテーマビルダー
• 既製テンプレート
• カスタマイズ可能なメニュー
• ソーシャルメディア連携
• その他多数。

ウェブサイトのフッター、ヘッダー、サイドバー、ページコンテンツにカスタムメニューを追加するために使用することもできます。

この方法では、WordPressテーマに関係なくメニューをカスタマイズできます。開始するには、以下の簡単な手順に従ってください。

ステップ1：SeedProdのインストール

まず、SeedProdプラグインをダウンロードし、WordPressサイトにインストールして有効化します。

この手順のヘルプについては、SeedProdのインストール方法に関するガイドに従ってください。

ステップ2.ランディングページテンプレートの選択

プラグインが有効になったら、WordPressダッシュボードから「SeedProd » ランディングページ」に移動し、「新しいランディングページを追加」ボタンをクリックします。

これにより、カスタムページをすばやく作成するために使用できるランディングページテンプレートのライブラリが表示されます。

各テンプレートは、さまざまなウェブサイトのニッチに合わせて完全にカスタマイズ可能です。たとえば、「リードスクイーズ」タブをクリックすると、スクイーズページの作成に最適なテンプレートが表示されます。

ニーズに合ったデザインが見つかったら、その上にカーソルを合わせてオレンジ色のチェックマークアイコンをクリックします。

次に、ページ名とURLを入力できるウィンドウが表示されます。これらの詳細を入力したら、「保存してページの編集を開始」ボタンをクリックします。

ステップ3.ページコンテンツのカスタマイズ

次の画面には、SeedProdのビジュアルページビルダー内のランディングページが表示されます。左側にはブロック、セクション、設定があり、右側にはページのプレビューが表示されます。

ページに加えた変更はすべてリアルタイムで自動的に表示されます。これにより、変更を公開する前に見栄えを確認できます。

テンプレートコンテンツのカスタマイズは、ポイントしてクリックするのと同じくらい簡単です。たとえば、テキストコンテンツを変更するには、それをクリックし、既存のテキストを削除して、独自のテキストに置き換えます。

画像やコールトゥアクションボタンなどの新しい機能を追加するには、左側のパネルでブロックを見つけてページにドラッグします。

満足のいくデザインになるまで、テンプレートコンテンツを自分のコンテンツに置き換え続けます。さらにカスタマイズするには、WordPressでランディングページを作成する方法に関するガイドを参照してください。

ステップ4. WordPressメニューのカスタマイズ

ページをカスタマイズした後、メニューを作成して簡単にカスタマイズできます。私のテンプレートにはヘッダー領域が含まれていないため、最初に作成する必要があります。

これを行うには、「カラム」ブロックを見つけてページの上部にドラッグします。

次に、レイアウトを選択します。この場合、3カラムレイアウトを使用します。

次に、ウェブサイトのロゴを表示する画像ブロックでヘッダー領域を設定しましょう。

ロゴ画像をアップロードするには、ブロック設定パネルの「独自の画像を使用」ボタンをクリックします。これにより、WordPressメディアライブラリから画像を選択したり、コンピューターから画像をアップロードしたりできます。

次に、Nav Menuブロックを見つけて、ヘッダーの別の列にドラッグします。ここに、ユーザーがクリックしてサイトの他のページにアクセスするためのメニュー項目を追加できます。

ブロック設定には、メニューを表示する方法が2つあります。

Simpleメニュータイプでは、ページビルダーを離れることなく個々のメニューリンクを追加できます。メニュー名を追加してカスタムリンクを貼り付けるだけです。

リンクターゲットをノーフォローにし、新しいタブで開くこともできます。

WordPress Menuタイプでは、WordPressで既に作成したメニューを表示できます。ドロップダウンメニューをクリックすると、プライマリメニューやメインメニューなど、サイトで利用可能なすべてのメニューが表示されます。

ヘッダーにメニューを表示するには、メニューを選択するだけです。

SeedProdには、両方のメニュータイプに高度なカスタマイズオプションがあります。Advancedタブでは、メニューの色、フォント、テキストシャドウ、ホバーの色などを変更できます。

メニューを縦または横のレイアウトで表示することもできます。縦のデザインは、サイドバーウィジェットエリアやフッターメニューの場所に最適です。

メニューを管理するには、Menus Screenリンクをクリックするか、WordPress管理画面からAppearance » Menus に移動します。

ここでは、メニュー構造を編集したり、チェックボックスをクリックして新しいメニュー項目やサブメニューを追加したり、場所を管理したりできます。このページで新しいメニューを作成することもできます。

メニュー機能を保存するには、Save Menuボタンをクリックすることを忘れないでください。

多くのウェブサイトでは、特定の行動喚起を促進するためにサイトナビゲーションにボタンを使用しています。SeedProdのボタンブロックを使用すると、数回のクリックでメニューボタンを作成できます。

ボタンブロックを見つけて、ヘッダーエリアに追加するだけです。

次に、ブロック設定でメニューリンクを追加し、ボタンのスタイルをカスタマイズできます。

ステップ5.カスタムページを公開する

ページの見た目に満足したら、画面の右上隅にあるSaveとPublishをクリックします。

そこから、ページにアクセスしてカスタムWordPressメニューが機能していることを確認できます。

WordPressサイトエディターを使用してメニューをカスタマイズするにはどうすればよいですか？

最初の方法は、どのテーマを使用しているかに関係なく、あらゆるウェブサイトに最適なソリューションです。ただし、Twenty Twenty ThreeのようなブロックベースのWordPressテーマを使用している場合は、WordPressサイトエディターを使用してメニューをカスタマイズすることをお勧めします。

注意：この方法は、すべてのテーマで機能するわけではなく、メニューのすべての部分をカスタマイズできるわけではありません。

サイトエディターを開くには、WordPressダッシュボードからAppearance » Editorに移動します。

次の画面で、Patternsタブをクリックします。WordPress 6.5以降では、ヘッダーオプションがすぐに見つからない場合は、Patterns → Template Partsの下を確認してください。

そこから、Headerオプションをクリックし、ヘッダーテンプレートを選択します。

ここでは、ドラッグアンドドロップでメニューの位置を並べ替えたり、メニューから項目を削除したりできます。

鉛筆アイコンをクリックして、メニューのスタイルを編集することもできます。

例えば、メニューの背景色、フォント、パディング、マージン、境界線などを調整できます。

下にスクロールして詳細タブに移動すると、カスタムCSSクラスを入力できます。

ヘッダーボタンのような別のメニューオプションを追加するには、ブロックを追加アイコンをクリックします。

これで、ブロックを検索し、クリックしてメニューに追加し、他のWordPressブロックと同様にカスタマイズできます。

メニューの設定とカスタマイズに満足したら、保存ボタンをクリックします。

これで、サイトにアクセスしてカスタムメニューを確認できます。

プラグインなしでWordPressにカスタムメニューを追加するにはどうすればよいですか？

ページビルダープラグインを設定したくない場合や、WordPressブロックテーマを持っていない場合は、コードを使用してカスタムナビゲーションメニューを追加できます。

これには、WPCodeのようなWordPressコードスニペットプラグインの使用をお勧めします。これは、functions.phpファイルのようなWordPressのコアファイルを編集せずに、カスタムコードをWordPressに追加する最も安全で簡単な方法です。

これを行うには、無料のWPCodeプラグインをインストールし、WordPressダッシュボードからコードスニペット » スニペットを追加に移動します。

このページには、数回クリックするだけでサイトに追加できる既製のスニペットが表示されます。

このチュートリアルでは、独自のスニペットを作成したいので、「カスタムコードを追加」にマウスを合わせ、スニペットを使用ボタンをクリックします。

次に、スニペットのタイトルを入力し、「コードタイプ」ドロップダウンを開き、PHPスニペットをクリックします。

次に、次のスニペットをコードエディターに貼り付けます。

function wpb_custom_new_menu() {
  register_nav_menu('my-custom-menu',__( 'My Custom Menu' ));
}
add_action( 'init', 'wpb_custom_new_menu' );

このスニペットは、テーマに新しいメニューロケーション「My Custom Menu」を追加します。

それが完了したら、挿入オプションまでスクロールし、「自動挿入」メソッドを選択して、サイト全体にスニペットを追加します。

そこから、「場所」ドロップダウンメニューを開き、すべて実行をクリックします。

次に、画面の上部までスクロールし、「非アクティブ」トグルをクリックして「アクティブ」に変更します。

最後に、保存をクリックしてスニペットをライブにします。

次に、外観 » メニューに移動し、「表示場所」エリアを確認します。

このエリアに、メニュー項目を追加できる新しい「My Custom Menu」オプションが表示されるはずです。

次のステップは、カスタムメニューをWordPressテーマに追加することです。

コードをテーマのテンプレートファイルに追加することで、サイトのどこにでもカスタムナビゲーションメニューを表示できます。

単純に外観 » テーマファイルエディターに移動します。

次に、右側のメニューで、メニューを追加したいテンプレートを見つけます。たとえば、ウェブサイトのヘッダーなどです。

次に、wp_nav_menu関数を追加し、カスタムメニューの名前を指定する必要があります。たとえば、次のコードスニペットでは、テーマのヘッダーにMy Custom Menuを追加しています。

wp_nav_menu( array( 'theme_location'=>'my-custom-menu', 'container_class'=>'custom-menu-class' ) );

コードを追加したら、ファイルを更新ボタンをクリックして変更を保存します。

これでサイトにアクセスすると、カスタムメニューが機能しているのがわかります。ただし、単純な箇条書きリストとして表示されることに注意してください。

メニューをWordPressテーマやブランディングによく一致するようにスタイル設定するには、カスタムCSSコードをサイトに追加できます。

これを行うには、外観 » カスタマイズに移動し、WordPressカスタム機能で追加CSSをクリックします。

これにより、カスタムCSSを入力できるエディターが開きます。

これで、テーマテンプレートに追加したCSSクラスを使用してメニューをスタイル設定できます。この例では、.custom_menu_classです。

次のコードでは、マージンとパディングを追加し、テキストの色を黒に設定し、メニューを水平レイアウトで配置しています。

div.custom-menu-class ul {
    margin:20px 0px 20px 0px;
    list-style-type: none;
    list-style: none;
    list-style-image: none;
    text-align:right;
    display:inline-block;
}
div.custom-menu-class li {
    padding: 0px 20px 0px 0px;
    display: inline-block;
} 
 
div.custom-menu-class a {
    color:#000;
}

WordPressカスタム機能は自動的に更新されるため、メニューが新しいスタイルでどのように見えるかを確認できます。変更に満足したら、公開してライブにします。

よくある質問

WordPressのナビゲーションメニューをカスタマイズするにはどうすればよいですか？

最も簡単な方法は、WordPressダッシュボードで外観 → メニューに移動することです。追加したいページまたは投稿を追加し、メニューをプライマリメニューなどの表示場所に割り当て、メニューを保存をクリックします。フォント、色、レイアウトのデザインをより細かく制御するには、SeedProdのドラッグアンドドロップビルダーまたはブロックテーマ用のWordPressサイトエディターを使用してください。

WordPressウェブサイトのナビゲーションメニューを編集するにはどうすればよいですか？

WordPressダッシュボードで外観 → メニューに移動し、編集したいメニューを選択します。項目を追加または削除し、ドラッグして並べ替え、メニューを保存をクリックします。ブロックテーマを使用している場合は、外観 → エディターのWordPressサイトエディターを使用して、ナビゲーションブロックを直接編集します。

プラグインなしでWordPressメニューをカスタマイズできますか？

はい。WordPressには、プラグインなしで動作する組み込みメニューエディターが外観 → メニューにあります。ブロックテーマの場合は、WordPressサイトエディターを使用します。カスタムメニューの場所を追加するには、WPCodeのようなコードプラグインでPHPスニペットを使用します。手動でのファイル編集は不要です。

WordPressでドロップダウンメニューを追加するにはどうすればよいですか？

外観 → メニューで、メニュー項目を親項目の下に少し右にドラッグします。WordPressはそれをインデントし、ドロップダウンとして扱います。最大3レベルまでネストできます。ドロップダウンの視覚的なスタイルを制御するには、SeedProdのナビゲーションメニューブロックに組み込みのホバー効果、色、レイアウトオプションが含まれています。

WordPressナビゲーションのヒントをもっと見る

WordPressナビゲーションのデザインを完全に制御したい場合は、SeedProdを使用すると、コードに触れることなくカスタムメニュー、ヘッダー、レイアウトを簡単に作成できます。今すぐSeedProdを入手

• WordPressでモバイルメニューを編集する方法（初心者ガイド）
• メニューにWooCommerceショッピングカートアイコンを追加する方法
• ランディングページのナビゲーションは終わった：その理由は次のとおりです
• WordPressのナビゲーションバーを編集する方法 ステップバイステップ
• ナビゲーションなしのランディングページを作成する方法a（簡単な方法）

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。