見栄えの良いメニューは大きな違いを生むことができます。サイト全体の見た目を改善し、訪問者が探しているものを見つけやすくし、特定のページをクリックするように促すことさえできます。
WPBeginnerでは、メニューをスタイリングするためのさまざまなクリエイティブな方法を見てきました。また、長年にわたってナビゲーションメニューのスタイリングを何度も試してきました。そのため、さまざまな状況に最適なものを共有したいと思います。
この記事では、WordPressのナビゲーションメニューを5つの異なる方法でスタイル設定する方法を紹介します。
WordPressナビゲーションメニューをスタイル設定する理由
WordPressのナビゲーションメニューは、ウェブサイトのロードマップであり、訪問者を最も重要なページに案内します。ほとんどのウェブサイトの上部に表示され、注目を集め、ユーザーがコンテンツをどのように探索するかを左右するのに最適な場所です。
ナビゲーションメニューのスタイリングは、見た目を良くするだけではありません。ウェブサイトのユーザーエクスペリエンスを大幅に向上させ、ひいては検索エンジン最適化（SEO）を促進することができます。
メニューのデザインが使いにくい場合、訪問者は探しているものを見つけるのに苦労し、不満を感じてサイトを離れる可能性があります。一方、明確で視覚的に魅力的なメニューは、さまざまなセクションへのクリックを促し、サイトでの滞在時間を長くすることができます。
その結果、サイトのページビューを増やし、直帰率を減らすことができます。
このガイドでは、WordPressテーマとあなたのスキルレベルに応じて、ナビゲーションメニューをスタイル設定するためのさまざまな方法を説明します。以下のクイックリンクを使用して、このチュートリアルをナビゲートし、あなたに最適な方法を見つけてください。
方法1：フルサイトエディター（ブロックテーマ）でナビゲーションメニューをカスタマイズする
ブロックテーマを使用しており、サイトナビゲーションメニューをフルサイトエディターを使用してスタイル設定したい場合は、この方法が適しています。
まず、WordPressダッシュボードにアクセスし、[外観] » [エディター]に移動します。
ここで、ブロックテーマのさまざまな部分をカスタマイズするオプションが表示されます。
「ナビゲーション」をクリックしてください。
次のページで、鉛筆の「編集」アイコンをクリックします。
これにより、ナビゲーションブロックを編集できるブロックエディターが開きます。
ブロックエディターに入ったら、「ページリスト」ブロックをクリックして、WordPressウェブサイトのページをナビゲーションメニュー項目として表示します。
次に、「編集」をクリックします。
ポップアップウィンドウが表示され、ページリストブロックを編集できるようになったことが通知されます。ブロックのメニュー項目を編集、削除、並べ替え、追加できます。
「編集」をクリックして続行します。
ナビゲーションメニューのブロックエディターは、ページや投稿を編集するときと同じように機能します。カスタムリンク、コールトゥアクションボタン、検索フォーム、サイトロゴなど、他のメニュー要素を自由に追加できます。
フルサイトエディターでのメニュー管理についてさらに詳しく知りたい場合は、フルサイト編集ガイドの「ナビゲーションメニューの編集方法」セクションをご覧ください。このセクションでは、サブメニューの作成についても説明しています。
さて、スタイリングに移りましょう。ブロックをクリックして開始してください。
ブロックによっては、ツールバーにカスタマイズオプションが用意されている場合があります。たとえば、ページリンクを選択した場合、必要に応じて太字、斜体、取り消し線、並べ替えを行うことができます。
これらのツールを使用して、他のメニュー項目から単一のメニュー項目を強調表示できます。
右側の設定パネルで、「ブロック」タブに切り替え、その下の「スタイル」タブに移動します。
ここで、ブロックの色、タイポグラフィ、寸法、境界線、影をカスタマイズできます。
ブロックにはデフォルトのスタイル設定がある傾向があります。たとえば、ページリンクを編集している場合、「フォントサイズ」や「幅」などのオプションしか表示されない場合があります。
しかし、心配しないでください。これらのオプションの隣にある3点メニューをクリックするだけで、フォントファミリーや文字間隔の変更など、より多くのカスタマイズが可能になります。
同様に、ナビゲーションメニューにボタンブロックがある場合、それをクリックすると、スタイル、テキスト、背景色、タイポグラフィ、寸法、境界線、さらには影をカスタマイズするオプションが表示されます。
詳細については、コールトゥアクションボタンの追加方法に関するガイドをご覧ください。
ナビゲーションメニューの背景色を変更したい場合は、テーマのヘッダーテンプレートを編集して行う必要があります。
開くには、上部にある「ナビゲーション」と表示されているコマンド検索フィールドをクリックします。次に、「ヘッダー」と入力してEnterキーを押します。
次に、リストビューを開き、「グループ」を選択します。
このグループは、ヘッダーのサイトタイトルとナビゲーションメニューで構成されます。
次に、ブロック設定サイドバーの「スタイル」タブを開き、カラーセクションの「背景」をクリックします。
その後、ヘッダーテンプレートの背景色を選択するだけです。
ナビゲーションメニューのスタイルに満足したら、「保存」ボタンをクリックするだけで、新しいメニューとヘッダーがWordPressブログまたはサイトで公開されます。
デモサイトでのナビゲーションメニューは次のようになります。
スタイルの選択肢は、特定のテーマ全体のスタイリングオプションによって異なることを覚えておいてください。
テーマのグローバルスタイルをカスタマイズしたい場合は、右上にある「スタイル」ボタンをクリックする必要があります。
ここから、ウェブサイト全体のタイポグラフィ、色、レイアウトを変更できます。
注意: ここで行った変更は、ナビゲーションメニューだけでなく、テーマの他の部分にも影響することに注意してください。
詳細については、フルサイト編集ガイドの「ウェブサイトのグローバルスタイルを変更する方法」セクションをご覧ください。
方法2：テーマカスタマイザーでナビゲーションメニューをカスタマイズする（クラシックテーマ）
この方法は、組み込みのテーマカスタマイザーを使用してナビゲーションメニューをスタイル設定したいクラシックWordPressテーマのユーザー向けです。
前の方法と同様に、メニュー項目自体を管理するのではなく、メニューの外観のスタイル設定に焦点を当てます。
クラシックテーマでメニューを作成および管理する方法を学習したい場合は、WordPressでのナビゲーションメニューの追加に関するガイドをご覧ください。カスタムザーでのメニュー作成、さまざまなメニューロケーションへの割り当て、ウィジェットとしてのメニューの追加について説明しています。
テーマカスタマイザーを使用するには、WordPressダッシュボードにアクセスし、[外観] » [カスタマイズ]に移動します。次に、アクティブなテーマの横にある「カスタマイズ」ボタンをクリックします。
ここでは、テーマのさまざまな側面をカスタマイズするためのオプションが表示されます。これは使用しているテーマによって異なります。ほとんどの場合、WordPressテーマには「メニュー」オプションがありますが、サードパーティの開発者が他の設定を追加することもあります。
例えば、Sydneyテーマには、メニューカスタマイズ用の専用ヘッダービルダーがあります。特別なメニュー設定が追加されているかどうかを確認するために、必ずテーマのドキュメントを参照してください。
テーマにそのようなカスタマイズオプションがない場合でも、心配しないでください。カスタムCSSを使用すれば、メニューを簡単にスタイル設定できます。
まず、「メニュー」セクションをクリックします。
次のページで、歯車アイコンの「設定」をクリックし、「CSSクラス」を選択します。
これにより、各メニュー項目に一意のCSSクラスを割り当てることができ、後で個別にスタイル設定できるようになります。
次に、パネルを下にスクロールします。
次に、プライマリメニューを開きます。
次に、変更したいメニュー項目を見つけてクリックして展開します。
カスタムCSSクラスを追加する新しいオプションが表示されます。以下の例では、お問い合わせページにCSSクラスcontact-usを追加しています。
メニュー項目にCSSクラスを割り当てたら、テーマカスタマイザーのメインメニューに戻ります。
次に、「追加CSS」をクリックします。
ここで、ナビゲーションメニューをスタイル設定するためのカスタムCSSコードを追加できます。
いくつかの例を見てみましょう。CSS クラスや 16 進数のカラーコードは自由に編集してください。
メニュー項目の背景色を変更する
以下のコードスニペットは、CSSクラスcontact-usを持つメニュー項目の背景色を緑色（#E3FFA8）に変更し、角丸（border-radius: 5px）を追加します。
.contact-us {
background-color: #E3FFA8;
border-radius: 5px;
}
デフォルトのメニューリンクの色を変更する
このコードスニペットは、プライマリメニューリスト（#primary-menu-li a）内のすべてのメニューリンクの色を赤（#ff0000）に変更します。
.primary-menu li a {
color: #ff0000;
}
テーマのプライマリメニューのCSSクラスは、私たちのものとは異なる場合があることに注意してください。
テーマのCSSクラスのプライマリメニューが何であるかを確認するには、ナビゲーションメニューエリアの周りでインスペクトツールを使用できます。
次に、「menu」または「navigation-menu」というHTMLコードを探します。その隣にそれを定義するCSSクラスがあるはずです。
メニュー項目にホバーエフェクトを追加する
このコードスニペットは、プライマリメニューリスト（#primary-menu li）内のすべてのメニュー項目を対象とし、ホバー効果を追加します。
.primary-menu li a:hover {
background-color: #a6e4a5;
color: #666;
border-radius: 5px;
}
メニュー項目にユーザーがカーソルを合わせると、背景色が薄い緑色 (#a6e4a5) に、テキストの色が濃い灰色 (#666) に変わり、角丸 (border-radius: 5px) が追加されます。
WordPressで透明なナビゲーションメニューを作成する
このCSSコードスニペットは、ナビゲーションメニューを透明にすることができます。
#site-navigation {
background-color:transparent;
}
このエフェクトを使用すると、背景画像とブレンドされ、ウェブサイトにクリーンでモダンな雰囲気を与えます。
さらなるインスピレーションを得るために、以下のガイドをご覧ください。
これらはあくまで開始のためのいくつかの例です。これらの同じ方法を使用したいが、「追加CSS」セクションが見つからない場合は、テーマカスタマイザーが見つからない問題の修正方法に関するガイドを参照してください。
方法3：ページビルダープラグインでナビゲーションメニューをカスタマイズする（推奨）
この方法は、ナビゲーションメニューの外観をより細かく制御したいが、初心者向けの使いやすいエクスペリエンスを好む人に最適です。ウェブサイトの構築の初期段階にあり、まだ公開していない場合にも最適なオプションです。
ページビルダープラグインを使用すると、コードを書かずにドラッグアンドドロップ機能を使用してウェブサイトのレイアウトを視覚的にデザインできます。これは、初心者にとって理想的です。
このセクションでは、ページビルダープラグインとしてSeedProdを使用します。SeedProdはユーザーフレンドリーなインターフェースを提供し、ナビゲーションメニューを目立たせるための追加ブロックと機能が含まれています。
注意：テーマビルダー機能はProバージョンでのみ利用可能なため、SeedProd Proを使用します。ただし、SeedProdがどのようなものかを探求するために、無料版を自由に試してください。
ステップ1：SeedProdのインストールと有効化
まず、WordPressウェブサイトにSeedProdプラグインをインストールして有効化します。詳細については、WordPressプラグインのインストール方法に関するガイドを参照してください。
有効化したら、WordPressダッシュボードからSeedProd »設定に移動します。次に、SeedProdライセンスキーを入力し、「キーを確認」ボタンをクリックします。
ステップ2：SeedProdテーマテンプレートキットを選択する
さて、SeedProd » Theme Builder に移動します。ここで、カスタムWordPressテーマをゼロから作成できます。
「テーマテンプレートキット」ボタンをクリックして、事前にデザインされたテンプレートのギャラリーを参照します。
このチュートリアルでは、Smile Craft Medical Website Theme を使用します。ただし、ビジネスに適したテンプレートを自由に選択してください。
これらのテーマテンプレートキットは、虫眼鏡アイコンをクリックしてプレビューすることで、ウェブサイトのスタイルに合うものを確認できます。
気に入ったテーマテンプレートを見つけたら、オレンジ色のチェックマークアイコンをクリックしてテンプレートパーツをインポートします。
SeedProdは、ヘッダー、フッター、ホームページなどの必須のウェブサイトセクションを作成します。これらはすべて、ドラッグアンドドロップビルダーを使用して視覚的に編集できます。
ステップ3：メニューデザインのカスタマイズ
テーマテンプレートがインストールされたら、テーマビルダーページに戻ります。
SeedProdテーマテンプレートでは、ナビゲーションメニューはヘッダーテンプレート部分にあります。
ヘッダーテンプレートを編集するには、マウスカーソルを合わせて「デザインを編集」リンクをクリックするだけです。これにより、テンプレートがドラッグアンドドロップエディターで開きます。
これで、テーマに応じて、ナビゲーションメニューブロック（ナビゲーションメニューです）とその他のブロックで構成されるヘッダーセクションが表示されます。
メニューを編集するには、ナビゲーションメニューブロックをクリックします。すると、左側のサイドバーにブロック設定のリストが表示されます。
デフォルトでは、SeedProdは「シンプル」メニューを使用して、使用するテーマテンプレートに基づいてメニューを作成します。ただし、「WordPressメニュー」オプションを選択して、標準のWordPressメニューエディター（外観 » メニュー）で既に作成した既存のメニューを使用することもできます。
両者の違いを詳しく見ていきましょう。シンプルな方法では、ページビルダーインターフェース内で直接リンクを追加、編集、削除できます。
新しいメニュー項目を作成するには、「+新しい項目を追加」ボタンをクリックします。
ここで、テキストラベルとリンクURLを入力できます。
次に、リンクを新しいウィンドウで開くを選択し、必要に応じてnofollow属性を追加します。このようになります：
メニュー項目は、項目横の3本線のボタンをクリックして上下にドラッグすることで並べ替えることもできます。
メニュー項目を削除するには、その項目にカーソルを合わせ、横にあるゴミ箱アイコンをクリックするだけです。
このオプションの欠点は、ドロップダウンメニューを作成できないことです。だからこそ「シンプル」と呼ばれているのです。
一方、「WordPressメニュー」オプションでは、SeedProdエディターから直接メニュー項目を管理することはできません。メニューエディターで行う必要があります。
幸いなことに、既存のメニューがドロップダウンメニューであれば、この方法で表示できます。
どちらの方法を選択しても、フォントサイズとメニュー項目の間の間隔をカスタマイズしたり、テキスト区切りを追加したり、配置を調整したりできます。
「詳細設定」タブには、さらに多くのカスタマイズオプションがあります。
リストのレイアウトを横から縦に変更したり、タイポグラフィを調整したり、テキストやホバーの色を変更したり、テキストシャドウを追加したりすることもできます。
![SeedProd の [高度] タブに切り替える](https://www.wpbeginner.com/wp-content/uploads/2017/11/nav-menu-advanced-min.png "SeedProd の [高度] タブに切り替える")
下にスクロールすると、デスクトップ、タブレット、モバイルデバイスのパディングとマージンを制御できます。
このように、メニューはどのような画面サイズでも簡単にナビゲートできます。
メニューを目立たせたいですか？
SeedProdを使用すると、アニメーションを追加して、より魅力的なユーザーエクスペリエンスを実現できます。詳細については、WordPressでCSSアニメーションを追加する方法に関するステップバイステップガイドを参照してください。
ナビゲーションバーに新しいコールトゥアクションボタンを追加したい場合は、SeedProdのボタンブロックを使用できます。
左側のサイドバーにあるブロックファインダーを開き、左側のサイドバーにあるボタンブロックを見つけます。
次に、ブロックをヘッダーのどこにでもドラッグします。
完了したら、ボタンのコールトゥアクション、リンク、スタイル、その他の設定をカスタマイズするだけです。
ユーザーが下にスクロールしてもページの上部に固定されるスティッキーメニューを作成することもできます。これにより、別のページに移動したいときに毎回上に移動する必要がなくなります。
これを行うには、セクションにカーソルを合わせると紫色の線が表示されるので、歯車の「設定」アイコンをクリックします。
次に、「詳細設定」タブに切り替えます。
次に、「位置」メニューまで下にスクロールします。
![SeedProd の詳細メニューで [Position] タブを選択](https://www.wpbeginner.com/wp-content/uploads/2017/11/seedprod-position-min.png "SeedProd の詳細メニューで [Position] タブを選択")
ここで、「固定」を選択します。
その後、上部オフセットにゼロを、z-index に高い数値（999 など）を追加します。これにより、ヘッダーが常にページの上に表示されるようになります。
カスタマイズしたナビゲーションメニューに満足したら、「保存」ボタンをクリックします。
ステップ4：カスタムWordPressテーマを公開する
この段階で、新しいカスタムWordPressテーマを使用する準備が整いました。有効化するには、「テーマビルダー」ページに戻り、「SeedProdテーマを有効化」ボタンをオンにします。
あとは、ウェブサイトを表示して、新しいカスタムナビゲーションメニューを確認するだけです。
デモサイトでのナビゲーションメニューは次のようになります。
方法4：ビジュアルCSSエディターでナビゲーションメニューをカスタマイズする（よりカスタマイズ可能）
この方法は、WordPressの組み込み機能よりも多くのカスタマイズオプションを提供しますが、ページビルダープラグインを使用するほど柔軟ではありません。とはいえ、テーマを完全に置き換えることなくナビゲーションメニューのデザインを少し変更したい場合には、優れたソリューションです。
この方法は、スタイリングオプションが不足しているクラシックテーマを使用しているが、方法2のCSS編集に慣れていない人にとっても良い代替手段です。
ここでは、CSS HeroというプレミアムWordPressビジュアルCSSエディタープラグインの使用方法を説明します。これにより、コードを書かずにウェブサイトを視覚的にデザインできます。HTMLやCSSの知識は必要ありません。
注意: CSS Heroのレビューをチェックして、その機能について詳しく知ってください。WPBeginnerユーザーは、CSS Heroを限定クーポンコードで最大34%割引で購入することもできます。
まず、CSS HeroプラグインをWordPressにインストールしてください。詳細については、WordPressプラグインのインストール方法に関するガイドをお読みください。
CSS Heroプラグインを有効にすると、WordPress管理バーに「CSS Hero」という新しいボタンが表示されます。このボタンをクリックしてビジュアルエディターを起動します。
CSS HeroはWYSIWYGインターフェースを使用しています。ボタンをクリックすると、画面の左側にCSS Heroペインとともにウェブサイトが開きます。
ナビゲーションメニューを編集するには、マウスをメニューの上に移動します。CSS Heroが境界線でメニューをハイライト表示します。ハイライトされた領域をクリックすると、メニューのカスタマイズを開始できます。
CSS Hero を使用すると、背景、タイポグラフィ、境界線、間隔、リスト、さらには追加効果など、ナビゲーションメニューコンテナのさまざまな側面を編集できます。
例えば、メニューの背景色を変更したいとします。「背景」をクリックすると、新しい色、グラデーション、または画像を選択できる使いやすいインターフェイスが開きます。
変更を加えると、右側のウェブサイトプレビューにリアルタイムで反映されます。
または、メニュー項目にボックスシャドウを追加して、より目を引くようにすることもできます。
これを行うには、「Extra」タブに移動します。
次に、「影を作成」をクリックします。
ここで、影の設定を編集できます。
これで、影の見た目を自由に調整できるようになりました。
シャドウの向き、ぼかしと広がり、位置を自由にドラッグできます。
CSS Heroのインターフェースを使えば、サイトに最適なものを見つけるために自由に実験しながら、好きなように変更できます。
プロのヒント：メソッド2の手順に従って個々のメニュー項目にCSSクラスを追加した場合、CSS Heroを使用してそれらの特定のメニュー項目をターゲットにしてカスタマイズし、ナビゲーションメニューの外観をさらに細かく制御することもできます。
カスタマイズしたメニューに満足したら、「保存」ボタンをクリックして変更を保存してください。
CSS Heroでできることについて詳しくは、これらのガイドをお読みください。
方法 5: コードでナビゲーションメニューをカスタマイズする (上級者向け)
この方法は、コードに慣れているユーザーにより適しています。また、テーマにデフォルトでメニューが含まれていない場合にカスタムメニューを作成することもできます。
カスタムコードスニペットの追加は、functions.phpやheader.phpのようなテーマファイルを編集するため、最初は daunting に思えるかもしれません。しかし、それを容易にする方法があります。
WPCodeというプラグインの使用をお勧めします。これは、コアファイルを変更せずにWordPressサイトにカスタムコードを追加するための、安全でユーザーフレンドリーな方法を提供します。
WordPressテーマにカスタムナビゲーションメニューを追加する方法に関するガイドでは、WPCodeを使用してメニューを作成する手順を説明します。
メニューを作成したら、これらのチュートリアルを探索できます。
- WordPressでナビゲーションメニューに画像アイコンを追加する方法
- WordPressヘッダーメニューにボタンを追加する方法
- WordPressでスティッキーなフローティングナビゲーションメニューを作成する方法
それぞれにWPCodeを使用してメニューをカスタマイズする方法が含まれています。
WordPress ナビゲーションメニューをカスタマイズするための究極ガイド
WordPressナビゲーションメニューの基本的なスタイリング方法を理解したところで、メニューをさらにレベルアップさせるためのガイドをいくつかご紹介します。
- WordPressサイトにメガメニューを追加する方法。 メガメニューは、サブカテゴリを含めることができ、広範なウェブサイトコンテンツを整理するためのユーザーフレンドリーな方法を提供します。
- モバイル対応のレスポンシブWordPressメニューを作成する方法。 このガイドでは、さまざまな画面サイズに適応するレスポンシブメニューを作成する方法を説明します。
- WordPressでフルスクリーンレスポンシブメニューを追加する方法。 このチュートリアルでは、アクティブ化されたときに画面全体に広がるフルスクリーンメニューを実装する方法を学び、大胆なナビゲーション体験を提供します。
- WordPressテーマにスライドパネルメニューを追加する方法。 スライドパネルメニューは、ユーザーがスワイプまたはボタンをクリックして表示するまでメインナビゲーションを非表示にする、省スペースなソリューションです。
- WordPressで垂直ナビゲーションメニューを作成する方法。垂直ナビゲーションメニューは、サイドバーやウェブサイトの他の垂直スペースに多数のメニュー項目を表示するための優れた方法です。
- WordPressメニューにソーシャルメディアアイコンを追加する方法。ナビゲーションメニューにソーシャルメディアアイコンを直接統合して、訪問者があなたとつながりやすくします。
- WordPressで折りたたみ可能なサイドバーメニューを作成する方法。ページが多いですか？折りたたみ可能なメニューをサイドバーに追加することで、ユーザーがウェブサイトをナビゲートしやすくします。
この記事がWordPressのナビゲーションメニューのスタイリング方法を学ぶのに役立ったことを願っています。また、WordPressデザイン要素に関する究極のガイドや、WordPressでカスタムページを作成するための初心者向けガイドもチェックしてみてください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
シドニー・ピアソン
「メニュー」オプションが「外観」メニューオプションの下から消えてしまいました。メニューとそのオプションのコンテナCSSを確認する別の方法はありますか？
ありがとうございます！
WPBeginnerサポート
ブロックテーマを使用しており、外観メニューがない場合は、要素を検証（Inspect element）を使用してCSSコンテナ情報を確認できます。要素を検証（Inspect Element）の使用方法については、以下のガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
クリスティナ
こんにちは、アドバイスをお願いします。
CSSを追加して、メニュー項目の1つを異なる色にすることに成功しました。しかし、下にスクロールすると、固定ナビゲーションのプライマリメニューも一緒にスクロールし、その項目の変更された色が元の色に戻ってしまいます。スクロールダウンしても、その項目の新しい色を維持するにはどうすればよいですか？
ありがとうございます！
WPBeginnerサポート
テーマによっては、下にスクロールするとメニューが変更される場合があります。インスペクト要素を使用すると、スクロールダウンした状態でメニュー項目を選択してCSSを追加できるはずです。以下にあるインスペクト要素の使用方法に関するガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
ベンカット・ヴァヴィララ
こんにちは、
メニューのフォントサイズを大きくしたいのですが、どうすればいいですか？
デフォルトの場合は、どのようにカスタマイズできますか？
メニューのフォントサイズを大きくする簡単な方法を教えてください
WPBeginnerサポート
この記事のどの方法を使用するかによって異なります。たとえば、CSSメソッドを使用する場合、メソッド2の例と同様に要素を検査し、フォントサイズを変更します。
管理者
ブディ・サントソ
管理者様、こんにちは。
このサイトのオレンジ色のリボンナビゲーションメニューはどのように作成されましたか？
ありがとうございます
WPBeginnerサポート
それを理解するには、こちらの要素を検証（inspect element）する方法に関するガイドをご覧ください：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
maria
このサイトのメニューはどうやって作ったのですか？
テーマファイルを編集する必要がありましたか？
ありがとうございます
WPBeginnerサポート
私たちのテーマはカスタム作成したものです
管理者
トリッシュ
WooCommerceサイトのショップページに、水平方向に、販売されているすべての製品カテゴリを持つメニューを作成したいのですが。どうすればできますか？事前にご協力いただきありがとうございます。
WPBeginnerサポート
テーマにその場所のメニューがある場合、次を使用して通常のメニューを設定できます。
https://www.wpbeginner.com/beginners-guide/how-to-add-navigation-menu-in-wordpress-beginners-guide/
次に、条件付きロジックを使用して、ここの記事でショップページにのみ表示させることができます。https://www.wpbeginner.com/plugins/how-to-add-conditional-logic-to-menus-in-wordpress/
管理者
クシャル・ソンワネ
大変な作業でしたが、この記事を読んだ後では、ナビゲーションメニューのカスタマイズはとても簡単になりました。
ありがとうございます。
WPBeginnerサポート
どういたしまして
管理者
リサ
私はこれをやるのが初めてで、WPでOceanwpというテーマを使ってサイトを作成しています。メニューからCCSをクリックして、あなたが提案した通りにしました。ドロップダウンメニューの矢印を削除しようとしていますが、何を試しても削除できません。
事前にご協力に感謝いたします。
WPBeginnerサポート
こんにちは、Lisaさん。
テーマ作成者に問い合わせてみてください。彼らが手助けしてくれるはずです。
管理者
アニルルーディヤ
どのようなテーマを使用していますか？WordPressブログを始めたばかりで、教育目的でシンプルなレイアウトのブログが欲しいのですが。
WPBeginnerサポート
アニルディヤさん、
WPBeginner専用に作成されたカスタムテーマを使用しています。
管理者
ボビー
こんにちは、HTMLコードではどうですか？
ネストされたメニューにヘッダーを追加したいのですが、どこにどのように配置すればよいかわかりません。
ダニエラ
こんにちは、
セールスページ用に作成したメニューの外観のみを変更したいです。高さを変更し、ロゴを追加したいです。
私はプロではないので、メニューに何か変更がないかいくつか試しましたが、何も変わりませんでした。試したことは以下の通りです。
#Salespage-menu { background:#2194af; height:40px; }
道順を教えていただけますか？
ご尽力いただき、誠にありがとうございます！
ユージーン
皆さん、こんにちは。
ナビゲーションメニューに問題があり、助けていただけると大変助かります。プライマリメニュー自体は見た目も完璧なのですが、問題はドロップダウンするサブメニューで、親メニューとの間に約100pxほどの大きな隙間があることです。
サブメニューにカーソルを合わせようとすると、表示から消えてしまいます。
親メニューのすぐ下に移動させて、開いたままクリック可能にしようと、考えられることはすべて試しましたが、今のところ失敗しています。
これは、Point Themeで使用されているカスタムCSSです：
#logo { margin: 0; } .site-branding { padding: 0; }
.post-info { display: none; }
#navigation ul li a { min-height: 22px; padding: 5px 10px 5px 10px; }
.post-date { display: none; }
感謝と敬具。
WPBeginnerサポート
ユージンさん、
この問題の原因は特定できていません。テーマのCSSとレイアウト、および使用されているクラスによって異なります。このカスタムCSSを試すことができます：
.primary-navigation li ul { margin:0px; padding:0px; }WordPressで1クリックで使用
管理者
ユージーン
残念ながら、それも効果がありませんでした…
試してくれてありがとう。新しいテーマが必要なようです。
よろしくお願いいたします。
アミルル・ファルハン
こんにちは。
テーマが独自のメニューデザインを持っている場合でも、プラグインは機能しますか？
ありがとうございます
リダ
ブートストラップを使用したい場合は、ヘッダー.phpに簡単な1行コードで独自のCSSクラスを追加するだけです。
‘primary’, ‘container’ => ‘div’, ‘container_class’ => ‘collapse navbar-collapse’, ‘menu_class’ => ‘nav navbar-nav pull-right’, ‘menu_id’ => ‘primary-menu’ ) ); ?>
ダニー
イェイ…またプラグインですね。プラグインの使い方をたくさん共有してくれますね。WordPress の使い方はあまり…素晴らしい仕事です。
WPBeginnerサポート
Dhanyさん、こんにちは。
フィードバックありがとうございます。WPBeginnerでは、ターゲットオーディエンスは主に初心者レベルのユーザーです。彼らのほとんどはCSS、HTML、PHPなどに慣れていません。プラグインを使用すると、ウェブサイトを壊すことなく、より簡単に作業を進めることができます。
管理者
アンドリュー
おい…URLに「beginner」って書いてあるぜ。
さらに…途中で手動オプションが配置されていました。
マリン
こんにちは！Baskervilleテーマを使用したサイトのメニューで、絶望的に助けが必要です。最新のアップデートでメニューが完全にめちゃくちゃになりました！助けてください！
マリン
レイモンド
これは、WordPressでブートストラップテーマのスタイルを機能させる方法を理解しようとしていたときに、非常に役立ちました。ありがとうございます
サムシーン
素晴らしい投稿ですね。
しかし、リスト内の特定の項目をどのようにターゲットにできますか？現在、回避策を実行しましたが、その特定のメニュー項目をターゲットにしたいと考えています。
例えば、特定のメニュー項目の背景色を別の色にしたいとします。これはどのように行えますか？
マルコ
Chrome、Firefox の要素検証ツール。
ベンジャミン
皆さん、こんにちは。コーディング初心者です。本当に助けが必要です。WordPressサイトがあり、サイトのテーマはBaskervilleです。このテーマはメニューを1つしかサポートしていません。好奇心旺盛なページにナビゲーションメニューを作成しようとしています。もしコードがあれば、どこに配置すればよいですか？返信いただけると大変助かります。ありがとうございます。
アルシュ・ドズナー
WordPressでCSSメニューを使用していますが、メニューのドロップダウンが表示されません。助けてください。
ありがとう
ウマンガ
function.php にスクリプトを正しく追加しましたか？
アンディカ・アムリ
こんにちは、wpbeginnerさん、素晴らしいチュートリアルです！
vantage テーマを使用しています。メニューの 1 つにカスタムクラス「.menu-about」を既に追加しましたが、stylesheet.css でスタイル設定しても全く適用されません。何か提案はありますか？
ありがとう！
シャオン
Twenty Twelve テーマを使用しています。メニューの色はすでに変更済みです。しかし、ヘッダーのナビゲーションメニューの位置を移動させることができません。ヘッダーのベースラインから下部にスペースが空きすぎています。ヘッダーの下部にぴったりつけたいです。
ニベディタ
こんにちは、
WordPressのCodexを使用してヘッダーにメインメニュー、フッターにフッターメニューを作成しました。現在、私の2つのメニューはページ上で縦に並んでいます。横並びのメニューにするにはどうコードすればよいですか？
至急、助けてください！
TIA
WPBeginnerサポート
そのためにはCSSを使用する必要があります。デフォルトのテーマのコードを調べてください。最も良い例は、twenty thirteenまたはtwenty twelveのテーマです。
管理者
ジュディ
これらのクラスが実際に何を修正しているのか、インフォグラフィックがあればどんなに良いか。例えば：
.current-page-ancestor
.current-menu-parent
.current_menu_parent
.current-page-parent
.current_page_parent
.current-menu-ancestor
そして、.current-menu-parentと.current_menu_parentのように、ダッシュとアンダースコアの違いは何ですか？
あなたに説明してくれたら、一つ作ってあげるよ！
ありがとう…
タルミジ・アフマド
情報ありがとうございます…
ヨゲシュ・クマール
非常に重要なことをお伺いしたいのですが。
あなたのウェブサイトのナビゲーションバーの上にある、リンク「Blog」の上にカーソルを移動すると8つのリンクが表示されるバーのようなものです。私のサイトも同じスタイルで表示されていますが、カーソルを合わせると8つのリンクが横並びで、つまり4つずつ表示されるようにしたいです……。どうか、これは非常に必要としています……できるだけ早く返信してください……
編集スタッフ
通常、メニューは順序なしリスト (ul) で構成されます。サブナビゲーションやドロップダウンがある場合、それらはリスト要素内に独自の順序なしリストとして配置されます。したがって、変更する可能性のある CSS クラスの例は次のようになります。
ul.menu li ul{width: 220px;}
ul.menu li li{float: left; width: 100px;}
これにより、各セカンドレベルのリストアイテムに正確な幅が設定され、左にフロートされます。
管理者
ジム
素晴らしい記事です、ありがとうございます。
そのCSSクラス機能については知りませんでした。少なくとも今は知っています。
本当に私の役に立ちます。
ありがとう。
ニラムクマル・パテル
これは非常に役立ちます。これ以前は、管理画面からカスタムクラスをWordPressに追加できないと思っており、常にfunctions.phpで作業していましたが、これは素晴らしいです。彼らはロッカーです。そして、この役立つ投稿をSayedに多くの感謝を
ウィズロナー
素晴らしいチュートリアルです!!でも、フォントサイズを変更するような簡単なことはどうすればいいですか？フォントサイズを変更するには何を入力すればいいですか？ありがとうございます！
wpbeginner
@wiseroner CSSファイル内のメインメニュークラスにfont-sizeを追加するだけではいけません。
wpbeginner
@mriulian 上記のチュートリアルをご覧ください…現在のページのクラスはすでに定義されています…
ヘッダーコードで、メニューコンテナIDとコンテナクラスを定義する必要があります…記事の指示に従えば、機能します。
ムリウリアン
より明確にするために、これが私のコードです。
// 関数ページ内
if (function_exists(‘register_nav_menus’)) { register_nav_menus( array( ‘mainNav’ ) ); }
// ヘッダーページにて
‘main_nav_menu’)); ?>
// cssファイル内
.current{ background-color: #0188AA; color: #fff; text-decoration: none; }
このクラスをナビゲーションに適用するにはどうすればよいですか？（静的なHTMLページでは非常に簡単ですが、WordPressではかなり複雑なようです）。
事前に感謝いたします
ムリウリアン
これを試しましたが、うまくいきませんでした。functionsページでメニューを登録し、それをヘッダーページからメインナビゲーションとして呼び出しました。現在、スタイルシートに現在のページに適用するための.currentクラスがありますが、その方法が明確ではありません。 何か提案をいただけますか？
wpbeginner
WordPressのナビゲーションメニューの仕組みにより、現在のページがどれであるかを自動的に認識します。
イリリミナ
スクリーンオプションパネルでのCSSクラスについて言及していただきありがとうございます。私のナビゲーションの問題は、特定のページにアクセスしたときに各メニュー項目に特定の背景色が付くようにナビゲーションメニューをスタイル設定する方法です。スタイルシートに.current_page_item{}のようなクラスを作成すると述べていますが、これをheader.phpに適用するにはどうすればよいですか？
リック
メニュー名にアイコンを追加する方法について、さらに詳しい情報をどこで入手できますか？ここで概説されている多くのことを行うための、本当に良い CSS ガイドは何ですか？
ありがとう
編集スタッフ
CSS-Tricksは良いフォーラムですが、CSSを学ぶにはCSS for Beginnerの本を見るのが良いでしょう。なぜなら、あなたがやっていることは背景画像を追加するだけだからです。
管理者
フランシスコ
こんにちは。この投稿は本当に気に入りましたし、特に個別のCSSクラスを設定するオプションは非常に役立ちました。この情報に大変感謝しています。
私が疑問に思っているのは、PHPのwp_nav_menu関数呼び出しから、特定の種類の要素、例えば親メニュー項目だけに、動的にCSSクラスを割り当てることが可能かどうかということです。そうすれば、新しいタイプの要素（例では新しい親項目）が作成されるたびに、メニュー画面で手動でそのクラスを追加する必要がなくなります。
何か考えがあれば、大いに感謝されます
編集スタッフ
はい、それにはMenu Classパラメータを使用します。
管理者
フランシスコ
私もそう思っていました。確認していただき、そして返信していただきありがとうございます。
では！
ジェイシュ
良い記事です。
wp_nav_menu()の出力方法を変更したいです。
wp_nav_menu()が生成するHTMLが好きではありません。
メニュー用の素敵なHTMLを持っています。
そのため、wp_nav_menu()が生成するHTML構造を変更したいと思いました。
これは可能ですか？
至急ご連絡ください。
編集スタッフ
独自のdivなどを追加することはできますが、常にリスト出力になります。どのようにでもスタイル設定できます。
管理者
チャンキー
ありがとうございます！これで髪の毛をむしるのをやめられます！ブックマークしましたし、他の人にも伝えます！
カリード
こんにちは、チュートリアルありがとうございます。あなたのテーマで使用されているナビゲーションメニューを持てるように、私をガイドしていただけると嬉しいです。あなたのもののようなドロップダウンメニューが欲しいです。よろしくお願いします！
編集スタッフ
WordPressのデフォルトのナビゲーションメニューでは、ドロップダウンメニューを作成できます。メイン項目から少し右にドラッグするだけで可能です。Genesisのようなフレームワークを使用している場合は、すでにFancy Drop downオプションが利用可能なので、それを選択するだけです。または、SuperFishのようなjQueryテクニックを使用して行うこともできます。将来的にはチュートリアルを追加するかもしれません。
管理者
チューバ
とても良い記事でした。WordPressプロジェクトの助けになりました。ありがとうございます！
グリムクリス
素晴らしい記事です。WordPressメニューのCSSクラスについては知りませんでした。本当にありがとうございます！
キース・デイビス
皆さん、WordPressのことをよく知っていますね。
これは簡単なチュートリアルではありませんが、よく説明されており、私の理解を深めるのに役立ちました。
他の皆さんに教育してくれてありがとう。
リック
おい！すごい！CSSオプションでメニューを操作できるなんて知らなかったよ！最高！
アダム・W・ワーナー
素晴らしい記事で、非常に有益でした！メニューの画面オプションについても知りませんでした。
イーライ
最初のphp wp_nav_menuコードをどこに配置すべきか分かりません。functionsファイルやheaderなどでしょうか？
トニー
CSSクラスメニュー項目については知りませんでした！教えてくれてありがとう。
編集スタッフ
どういたしまして
管理者
スティーブ・マイズナー
私もです！まさに必要としていたものでした。皆さん、そしてWordPress開発チームに神のご加護がありますように！
ピーテル
CSSスタイルを指摘してくれて敬意を表します！私は常にリストアイテムをスタイルするためにCSS属性を使用していましたが、これらのスタイルは間違いなくより便利です。あなたはもう一人フィード購読者を獲得しました！
ベルギーよりご挨拶申し上げます。
編集スタッフ
お役に立てて嬉しいです、Pieter。
管理者