モバイル対応レスポンシブWordPressメニューの作り方

モバイル対応のレスポンシブWordPressメニューを作成したいですか？

すべてのサイトトラフィックの半分以上がモバイル端末からのものです。ナビゲーションメニューがスマートフォンやタブレット端末でうまく動作しない場合、閲覧者の大部分がサイト内の移動方法を見つけるのに苦労することになります。

このガイドでは、モバイル対応のレスポンシブWordPressメニューを簡単に作成する方法をご紹介します。

なぜモバイル対応のレスポンシブWordPressメニューを作るのか？

デザイン性の高いナビゲーションメニューは、訪問者がサイト内を移動する際の手助けとなります。しかし、デスクトップコンピューターで見栄えが良いからといって、自動的にモバイル画面やタブレットでも見栄えが良いとは限りません。

モバイルユーザーは、すべてのインターネットトラフィックの約58％を占めています。とはいえ、もしあなたのメニューがモバイル端末上で見栄えが悪かったり、正しく動作しなかったりすれば、ユーザーエクスペリエンスの低下により、オーディエンスの半分を失う危険性があります。

これでは、メールリストを増やし、売上を上げ、ビジネスを成長させるといった重要な目標を達成することが難しくなります。

それでは、スマートフォンやタブレットで見栄えのする、モバイル対応のレスポンシブ・メニューを作成する方法を見ていきましょう。以下のクイックリンクから、お好きな方法をお選びください。

方法1：モバイル対応のレスポンシブ・スライドパネルメニューを作成する

レスポンシブ・スライドパネルは、訪問者がトグルをタップまたはクリックすると画面上でスライドするナビゲーションメニューです。

こうすることで、メニューは常に手の届くところにありながら、初期設定では画面上のスペースを取らない。

スマートフォンやタブレットはデスクトップコンピューターに比べて画面が小さいため、これは特に重要である。

メニューが定数展開されていると、モバイルユーザーが端末のタッチスクリーンを使って誤ってリンクをクリックしてしまう可能性があります。そのため、スライドパネルはモバイル・レスポンシブ・メニューに適している。

モバイル対応のスライドパネルを追加する最も簡単な方法は、レスポンシブメニューを使用することです。

注： Responsive Menuには、追加テーマや条件ロジックなどの追加機能を備えたプレミアムバージョンがあります。しかし、このガイドでは、モバイル対応メニューを作成するために必要なものがすべて揃っている無料のプラグインを使用します。

まず、Responsive Menuプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法のチュートリアルを参照してください。

有効化した後、プラグインを使用して以前に作成したWordPressメニューをカスタマイズすることができます。新規メニューを作成する必要がある場合は、WordPressでナビゲーションメニューを追加する方法についての初心者向けガイドをご覧ください。

一方、WordPressテーマにすでにモバイルメニューがビルトインされている場合は、そのメニューを非表示にできるように、メニューのCSSクラスを知っておく必要がある。

このステップをスキップすると、モバイルユーザーにはサイト上に2つのメニューが重なって表示されます。ステップバイステップの手順については、WordPressでモバイルメニューを非表示にする方法をご覧ください。

これで、WordPress管理サイドバーのレスポンシブメニュー ” メニューページに移動し、「新規メニューを作成」ボタンをクリックします。

メニューに使用できるいくつかの異なるモバイル・レスポンシブ・テーマが表示されます。

画像では「デフォルトテーマ」を使用していますが、お好きなテーマを使用することができます。決めたら「次へ」をクリックします。

メニューの名前を入力します。これはあくまで参考ですので、お好きなものをお使いください。

WordPressメニューのリンク」をクリックし、使用するメニューを選択します。

すでに述べたように、あなたのテーマにすでにビルトインのモバイルメニューがある場合は、そのCSSクラスを「Hide Theme Menu」フィールドに追加する必要があります。

プレミアムプラグインにアップグレードすると、いくつかの追加設定ができます。例えば、プロユーザーは特定のページや端末でメニューを非表示にすることができます。

メニューの設定に満足したら、「メニューを作成」をクリックします。

画面の右側にWordPressサイトのプレビューが表示され、左側にいくつかの設定が表示されます。

モバイルでのサイト表示を確認するには、画面左下のモバイルまたはタブレットのアイコンをクリックしてください。

モバイル端末でのメニューの表示や動作をカスタマイズするには、「モバイルメニュー」を選択します。

そして、『コンテナ』をクリックする。

ここには、さまざまな設定がある。

変更を加えると、ライブプレビューは自動的に更新されます。このことを念頭に置いて、モバイルメニューがどのように見えるかを監視できるようにメニューを展開することをお勧めします。これを行うには、単にメニューのトグルボタンをクリックします。

初期設定では、プラグインはタイトルと「さらにコンテンツを追加…」というテキストを追加します。

また、テキストを完全に削除することもできます。タイトルを編集するには、「タイトル」セクションをクリックして展開します。

タイトルテキスト」フィールドにメッセージを入力することができます。

タイトルにリンクを追加したり、アイコンフォントや画像を追加することもできます。

タイトルの見た目をカスタマイズするには、「スタイル」タブをクリックします。

ここでは、背景色、文字色、フォントサイズなどを 変更することができます。

タイトルテキストを表示したくない場合は、「タイトル」の横のトグルをクリックして無効化してください。

タイトルが必要不可欠でない場合、それを削除することで、モバイルナビゲーションメニューのリンクやその他のコンテンツのためのスペースを確保することができます。

ここにコンテンツを追加……」テキストを独自のメッセージに置き換えるには、クリックして「追加コンテンツ」エリアを展開します。

左側のメニューにある設定を使って、独自のテキストを入力したり、テキストの色を変更したり、テキストの配置を変更したりできるようになりました。

テキストを完全に削除するには、単にクリックしてトグルを無効化します。

この場合も、メニューの残りのコンテンツを表示するためのスペースを確保することができます。これは、一般的に画面が小さいスマートフォンやタブレットで特に有効です。

初期設定では、レスポンシブメニューはすべてのメニュー項目を個別リストとして表示します。しかし、これらのリンクを複数のカラムで表示したい場合もあります。

メニューのラベルが短い場合、メニューが乱雑に見えることなく、少ないスペースでより多くの項目を表示することができるので、これは効果的です。

さまざまなカラムレイアウトを試すには、「メニュー」セクションをクリックして展開する。

メニューコンテナのカラム」ドロップダウンを開き、使用するカラム数を選択できます。

この時点で、「更新必須」のテキストが表示されるかもしれません。このメッセージが表示されたら、クリックしてライブプレビューを新しいカラム設定で更新してください。

初期設定では、プラグインはWordPressメニューに検索バーを追加します。これは訪問者が興味深いコンテンツを見つけるのに役立ちますが、画面上の貴重なスペースを取ることにもなります。

もしご希望であれば、「検索」の隣にあるトグルを無効化することで、モバイルユーザー用の検索バーを削除することができます。

他にも設定できることがたくさんあるので、他のオプションに目を通すのに時間がかかるかもしれない。しかし、よくデザインされたモバイル対応メニューを作成するにはこれだけで十分です。

ナビゲーションメニューの設定に満足したら、「更新」をクリックします。

モバイル端末でWordPressブログにアクセスすると、新しいメニューが表示されます。また、デスクトップからWordPressサイトのモバイル版を表示することもできます。

方法2.モバイル対応のフルスクリーンレスポンシブメニューを作成する

もう一つのオプションは、フルスクリーンレスポンシブメニューを追加することです。これは、異なる画面サイズに自動的に調整されるメニューで、訪問者がどの端末を使用していても、ナビゲーションメニューは常に美しく表示されます。

空いているスペースをすべて使ってメニューが表示されるため、スマートフォンやタブレット端末では、どんなに小さな画面でもナビゲーションがしやすくなっている。

フルスクリーンメニューを作成する最も簡単な方法は、FullScreen Menuを使用することです。このプラグインを使用すると、モバイル端末専用のフルスクリーンメニューを作成することも、スマートフォン、タブレット、デスクトップコンピューターに同じメニューを表示することもできます。

まず最初にFullScreen Menuプラグインをインストールして有効化します。 詳しくはWordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、WordPressのメニューからフルスクリーンメニューオプションのページにアクセスし、以下のボックスにチェックを入れます：有効化したフルスクリーンメニュー」。

また、’管理ユーザーのみにメニューを表示する’ボックスをチェックすることをお勧めします。これにより、メニューの設定中に変更を確認することができますが、本番になるまで訪問者にはモバイルメニューが表示されません。

初期設定では、プラグインはすべての端末でフルスクリーンメニューを表示します。スマートフォンとタブレットのみにフルスクリーンメニューを表示したい場合は、「モバイルのみ」にチェックを入れてください。

これで、「デザイン／外観」タブをクリックして、メニューの外観を微調整する準備が整いました。

ここでは、フルスクリーンメニューの色、フォント、アニメーションの設定を選択できます。

これらの変更を行う場合、「初期背景メニュー」はメニューのトグルアイコンであることに注意してください。一方、「開いた背景メニュー」は、拡張されたフルスクリーンモバイルメニューの色です。

メニューの色を選んだら、「メニュー外観」セクションまでスクロールしてください。ここでは、メニューのフォントカラー、フォントファミリー、フォントサイズを変更することができます。

ただ、追加のフォントを読み込むと、WordPressサイトのパフォーマンスや速度に影響を与える可能性があることに注意してください。デスクトップコンピューターに比べて処理能力が低いモバイル端末では、必ずしも良い選択とは言えません。また、モバイル端末のインターネット接続環境が悪い場合、サイトの読み込みがさらに遅くなる可能性もあります。

アニメーションの設定」までスクロールする。

まず始めに、訪問者がトグルアイコンをクリックしたときにメニューがどのように展開するかを選択することができます。アニメーションタイプ “のドロップダウンメニューを開き、”上から下へ “や “左から右へ “などのオプションをリストから選択してください。

メニューの設定に満足したら、「メニュー・コンテンツ」タブをクリックしてコンテンツを追加しましょう。

ここで、’Select Menu’ドロップダウンを開き、フルスクリーンで表示したいメニューを選択する。

まだナビゲーションメニューを作成していない場合は、WordPressでナビゲーションメニューを追加する方法のガイドをご覧ください。

メニューに追加コンテンツを表示したい場合は、「フリーHTML / ショートコード」ボックスに追加することができます。これはミニページエディターとして機能するので、テキストを入力したり、書式を変更したり、箇条書きや番号付きリストを追加したりすることができます。

プライバシーポリシーページへのリンクを追加するチェックボックスもあります。

次に、WordPressのメニューにソーシャルメディアのアイコンを追加してみましょう。これらのアイコンは、フルスクリーンメニューの下部に一列に表示されます。

これらのアイコンを追加するには、単にクリックして「ソーシャルアイコン1」ボックスを展開します。

アイコンのタイトルを「Facebook」などと入力できるようになった。

その後、「ソーシャルアイコン」の隣にある矢印をクリックし、モバイル訪問者に表示したいアイコンを選択します。

最後に、「ソーシャルURL」フィールドに使用したいアドレスを入力する。

さらにアイコンを追加するには、「別のアイコンを追加」ボタンをクリックするだけです。

最後に、WordPressの検索バーを追加して、訪問者が探しているものを見つけやすくすることもできます。これを行うには、「検索バーを追加する」の隣にあるボックスをチェックするだけです。

初期設定では、プラグインは「Search something…」というメッセージを表示します。しかし、’検索入力プレースホルダー’フィールドに入力することで、カスタマイザーに置き換えることができます。

例えば、WooCommerceストアを運営しているのであれば、’Start shopping’や’Search for products’といったテキストを使用すると良いでしょう。

メニューの設定に満足したら、「変更を保存」ボタンをクリックします。

モバイル端末でサイトにアクセスすると、フルスクリーンメニューが表示されます。

WordPressのテーマカスタマイザーを使って、モバイル版のサイトをプレビューすることもできます。

ボーナス：ランディングページにモバイル対応メニューを追加する方法

ランディングページやセールスページを作成するのであれば、デスクトップと同様にモバイル端末でも見栄えのするデザインにしたいものです。

それを念頭に置いて、SeedProdを使用してページを作成することをお勧めします。これは最高のWordPressページビルダーで、300以上のプロがデザインしたテンプレートが付属しています。

SeedProdを使用してデザインを作成した後、SeedProdの既製のナブメニューブロックを使用してページにモバイルレスポンシブメニューを追加することができます。このブロックを使用すると、メニュー端末とデスクトップ用の区切りメニューを作成することができます。

このようにして、ユーザーの端末によって異なるレイアウトを使用したり、異なるリンクを表示したりすることもできる。

さらに詳しく知りたい方は、WordPressでカスタムナビゲーションメニューを追加する方法をご覧ください。

ナビブロックをデザインに追加したら、’Advanced’タブをクリックするだけです。

ここで、「端末の表示」セクションをクリックして展開します。

その後、「デスクトップで非表示」のトグルをクリックして有効化する。これで、このメニューはモバイル端末でのみ表示されるようになります。

左メニューの設定を使って、リンクを追加したり、メニューのレイアウトを変更したりできるようになりました。

この投稿が、モバイル対応のレスポンシブ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.