Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでモバイルメニューを非表示にする方法(初心者ガイド)

WordPressでモバイルメニューを非表示にしたいですか?

ほとんどのWordPressテーマは、初期設定のナビゲーションメニューを自動的にモバイルフレンドリーなメニューに変えてくれます。しかし、スマートフォンやタブレットを使ってサイトを訪れた人には、別のメニューを表示したい場合もあるでしょう。

この投稿では、WordPressの初期設定のモバイルメニューを非表示にして、代わりにカスタムメニューを表示できるようにする方法を紹介する。

Hiding a WordPress menu on mobile

このチュートリアルでは2つの異なる方法を取り上げますので、以下のクイックリンクから使いたい方法にジャンプしてください:

方法1:プラグインを使ってWordPressのモバイルメニューを非表示にする

WordPressテーマが提供するモバイルメニューを非表示にする最も簡単な方法は、WP Mobile Menuプラグインを使用することです。

このプラグインを使用すると、独自のメニューを作成し、モバイルユーザーに表示することができます。多くのテーマが初期設定で提供しているモバイルメニューを非表示にすることもできます。

モバイルメニューの作成

まず、モバイル端末に表示するナビゲーション・メニューを作成する必要があります。まずは、WordPressダッシュボードの外観 ” メニューページにアクセスしてください。

Create a new menu to be used on mobile devices

次の画面では、メニューの名前を入力する必要があります。Mobile Menu “のように、後でメニューを識別するのに役立つものを使用するのが良いでしょう。

その後、モバイルメニューに追加したい投稿やページをすべて選択することができます。

Adding menu items

より詳しい説明は、WordPressでナビゲーションメニューを作成する方法をご覧ください。

メニューのレイアウトに満足したら、忘れずに「メニューを保存」ボタンをクリックして変更を保存してください。

プラグインの設定

これで、WP Mobile Menuプラグインのインストールと有効化が完了です。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、モバイルメニューオプションでプラグイン設定を行います。

Creating a mobile friendly navigation menu

ここで、ページを一番下までスクロールし、「Enable Left/Right Menu」トグルを使って、モバイルメニューを画面の左側に表示するか、右側に表示するかを選択する必要がある。

次に、「メニューを1つ選択」ドロップダウンメニューを開き、先ほど作成したモバイルメニューを選択します。

Hiding the mobile menu in WordPress

その後、『変更を保存』をクリックするだけです。

WordPressのナビゲーション・メニューをスタイルする方法はたくさんあります。例えば、「フォントオプション」を選択し、フォントのサイズ、太さ、間隔などを変更することができます。

Customizing the fonts in a mobile menu

また、「ヘッダースタイル」を選択し、モバイルヘッダーの見た目や動作を変更することもできます。

例えば、影の追加、ヘッダーの高さの変更、先頭固定表示ナビゲーションメニューの作成などが可能です。

Changing the header in a WordPress mobile menu

これらの設定のほとんどはわかりやすいので、目を通して、どのような種類のエフェクトを作成できるかを確認することができます。例えば、画像アイコンを追加したり、WordPressのメニューにCSSを追加したりすることができます。

モバイルメニューの設定に満足したら、「変更を保存」をクリックするだけです。

WordPressにモバイルメニューを追加する

プラグインをセットアップしたら、次はWordPressの「外観 ” メニュー」でモバイルメニューを表示する場所を指定します。

すでに選択されていない場合は、「編集するメニューを選択」ドロップダウンを開き、先ほど作成したモバイルメニューを選択します。

Setting a mobile menu in WordPress

次に、「メニュー設定」で、メニューを表示させたい場所に応じて、「左モバイルメニュー」または「右モバイルメニュー」のいずれかを選択する必要があります。

その後、「メニューを保存」をクリックするだけです。

モバイル端末でサイトにアクセスするか、デスクトップからWordPressサイトのモバイル版を表示してください。カスタムモバイルメニューが表示されるはずです。

Mobile menu replaced

トラブルシューティング初期設定のモバイルメニューを非表示にする方法

初期設定では、プラグインは自動的にほとんどの一般的なWordPressテーマで使用されているメニュー要素を非表示にします。つまり、あなたが何もしなくても、あなたのテーマの初期設定のモバイルメニューは非表示になるはずです。

しかし、初期設定のモバイルメニューがまだ外観に残っている場合は、WordPressダッシュボードのモバイルメニューオプション ” 一般オプション ” 表示オプションに移動する必要があります。

Changing the mobile menu visibility settings

ここで「要素を検索」ボタンをクリックする。

あなたのサイトのモバイル版が開きます。

Finding an element on mobile devices

このポップアップで、WordPressテーマが提供するメニューなど、モバイル端末で非表示にしたいコンテンツをクリックして選択します。

これにより、コンテンツのCSSクラスが「要素を非表示」フィールドに追加されます。

Hiding elements on a mobile device

完了したら、「変更を保存」をクリックします。これで、テーマのメニューがモバイル端末で表示されなくなるはずです。

方法2:CSSコードを使用してモバイルメニューを非表示にする

この方法は少し高度で、サイトにカスタムコードを追加する必要があります。

この方法では、2つの異なるアプローチを選択できます。CSSを使って初期設定のモバイルメニュー全体を非表示にするか、モバイル端末で個々のメニュー項目を非表示にするかです。

1.モバイル端末でCSSを使ってメニューを非表示にする

一つのオプションは、WordPressテーマからデフォルトのモバイルメニューを完全に削除することです。これは、パンくずリストナビゲーションリンクや インタラクティブ画像など、モバイルで別のナビゲーション方法を使いたい場合に良い選択です。

まず、修正したい要素を見つけます。そのためには、WordPressサイトにアクセスし、ナビゲーションメニューにマウスオーバーするだけです。

その後、右クリックしてブラウザーのインスペクトツールを選択します。

Inspect tool

ブラウザー画面が2分割され、ナビゲーション・メニューのコードを含むページのコードが表示されます。

しかし、このナビゲーション・メニューはデスクトップ画面で見ることができるので、変更したくない。

Source code while viewing your desktop menu

ありがたいことに、代わりにモバイルメニューにアクセスする簡単な方法がある。

WordPressがデスクトップナビゲーションメニューをモバイルメニューに置き換えるまで、ブラウザーの角をドラッグして小さくするだけです。

Mobile menu identifier

次に、モバイル・ナビゲーション・メニューで使用されている識別子とCSSクラスを把握する必要があります。ブラウザーがメニュー・エリアをハイライトするまで、マウスをソース・コードの上に移動させてください。このセクションには、使用する必要があるクラスと識別子がコンテナされています。

この情報を手に入れたら、コードを使ってモバイル端末のメニューを非表示にすることができる。

WordPressのガイドでは、しばしばfunctions.phpファイルにカスタムコードを追加するように指示されます。しかし、これはあまりユーザーフレンドリーではなく、コードの小さなエラーでさえ、WordPressの一般的なエラーをすべて引き起こす可能性があります。カスタムコードは、サイトを完全に壊してしまうことさえあります。

その代わり、WPCodeを使ってカスタムコードを追加する方が安全だ。

この無料プラグインを使えば、サイトを危険にさらすことなく、WordPressにカスタムCSS、PHP、HTMLなどを簡単に追加することができます。プラグインのコードをWPCodeのエディターに貼り付けるだけで、ボタンをクリックするだけで有効化・無効化することができます。

はじめに、WPCodeをインストールし、有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

その後、WordPressダッシュボードのCode Snippets ” Add Snippetに アクセスしてください。

Adding custom code to your WordPress website

ここでは、サイトに追加できるすべての既成スニペットを見ることができます。これには、コメントを完全に無効化したり、WordPressが通常サポートしていないファイルタイプをアップロードしたり、添付ファイルページを無効化したりするスニペットなどが含まれます。

サイトにCSSを追加するには、「カスタムコードを追加」にマウスオーバーし、「スニペットを使用」を選択するだけです。

Adding custom CSS to WordPress using WPCode

はじめに、コードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

そうしたら、「コードタイプ」のドロップダウンメニューを開き、「CSS」を選択する。

Hiding the mobile menu using WPCode

その後、以下のコードをコードエディターに貼り付けるかタイプする:

.navbar-toggle-wrapper {
display:none;
}

.navbar-toggle-wrapperを、ブラウザーのInspectツールを使って見つけた識別子で置き換えることを忘れないでください。

コード・スニペットを公開する準備ができたら、画面を一番上までスクロールし、’Inactive’トグルをクリックして’Active’に変更します。

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

How to hide the menu on smartphones and tablets using WPCode

これで、あなたのテーマのモバイルメニューはスマートフォンやタブレットでは非表示になります。

2.CSSを使用してモバイルメニューの特定のメニュー項目を非表示にする

この方法では、ナビゲーションメニューを作成し、モバイル端末やデスクトップ端末で表示させたくない項目を選択的に表示または非表示にすることができます。

こうすることで、モバイルとデスクトップで同じナビゲーションメニューを使うことができます。まず、外観 ” メニューを開きます。

How to hide a mobile menu in WordPress

それが終わったら、画面右上の「表示オプション」ボタンをクリックする。

ここから、’CSS Classes’オプションの隣にあるボックスをチェックする必要があります。

How to enable CSS classes for your WordPress navigation menus

その後、モバイルで非表示にしたいメニュー項目までスクロールし、クリックして展開する。

メニュー項目の設定で、CSSクラスを追加するオプションが表示されます。ここでは、単に先に進み、.hide-mobileCSSクラスを追加します。

Adding a CSS class to your WordPress menus

モバイルで非表示にしたいメニュー項目すべてについて、この作業を繰り返す。

同様に、デスクトップ・コンピューターで非表示にしたいメニュー項目をクリックすることができます。ただし、今回は代わりに.hide-desktopCSSクラスを追加してください。

終了したら、忘れずに「メニューを保存」ボタンをクリックして変更を保存してください。

これで、カスタムCSSを使ってメニュー項目を非表示にする準備ができました。上記と同じ手順で新しいカスタム・コード・スニペットを作成してください。

ここで、WPCodeコードエディターに以下のCSSを追加します:

@media (min-width: 980px){

    .hide-desktop{
    display: none !important;
    }

}

    @media (max-width: 980px){
    .hide-mobile{
    display: none !important;
    }

}

その後、コード・スニペットを公開するだけだ。

これで、WordPressブログにアクセスすると、デスクトップで非表示にしたかったメニュー項目が表示されなくなっているのがわかるだろう。モバイルでメニューがどのように見えるかをテストするには、WordPressがモバイルメニューに切り替わるまでブラウザー画面を縮小してください。

WordPressでモバイルメニューを簡単に非表示にする方法について、この投稿がお役に立てば幸いです。また、ドラッグ&ドロップで使えるWordPressページビルダーやメニューに条件ロジックを追加する方法についてもご紹介しています。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

1件のコメント返信を残す

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。