WordPressでフルスクリーンレスポンシブメニューを追加する方法

WordPressでフルスクリーンのレスポンシブメニューを追加する方法をお探しですか？

ユーザーがハンバーガーアイコンをクリックまたはタップすると、美しいアニメーションでサイトのメニューがフルスクリーンでオーバーレイ表示されます。

この投稿では、コードを書かずにWordPressにフルスクリーンのレスポンシブ・メニューを追加する方法を紹介する。

なぜWordPressにフルスクリーンレスポンシブメニューを追加するのか？

優れたデザインのメニューは、訪問者がWordPressサイトやWooCommerceストアの道順を見つけるのに役立ちます。しかし、スマートフォンの小さな画面でヘッダーの標準メニューをタップするのは難しいでしょう。

モバイルユーザーは、すでに多くのサイトでデスクトップユーザーを上回っています。そのため、WordPressサイトのモバイル版をプレビューして、モバイル端末でのサイトの見え方を確認することをお勧めします。

フルスクリーンレスポンシブモバイルメニューは、異なる画面サイズに自動的に調整されます。利用可能なスペースがすべてメニューに使用されるため、スマートフォンやタブレットでのナビゲーションがより簡単になります。

WordPressでフルスクリーンのレスポンシブメニューを追加する方法を見てみましょう。

WordPressでフルスクリーンレスポンシブメニューを追加する方法

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

有効化したら、WordPress管理メニューのFullscreen Menu Optionsページに移動し、プラグインの設定を行います。自動的に「設定」タブに移動します。

有効化したフルスクリーンメニュー(Activate Animated Fullscreen Menu)」チェックボックスをチェックし、メニューを有効化してください。

最初は’メニューを管理ユーザーのみに表示する’ボックスもチェックすることをお勧めします。こうすることで、メニューを設定する際に変更を確認することができますが、サイト訪問者は設定が完了するまでメニューを見ることができません。

終了したら、戻ってチェックを外すのをお忘れなく。

その他の設定では、モバイル端末でのみメニューを表示したり、クリックやスクロールでメニューを閉じたり、特定のページでメニューを非表示にすることができます。この例では、これらの設定はオフのままにしておきますが、ご自分のサイトに合わせて自由にカスタマイズしてください。

フルスクリーンメニューのデザインと外観

次に、メニューのデザインをカスタマイズします。幸いなことに、メニュープラグインを使えばカスタムCSSを使わなくてもこのようなことができる。

メニューをカスタマイズするには、ページ上部の’デザイン/外観’タブをクリックする必要があります。このページでは、メニューの色、フォント、アニメーションの設定を選択することができます。

ページ上部には、2つのカラー設定があります。最初の色は、ハンバーガーメニューのアイコンの色です。これはサイトの右上に表示されます。訪問者がこれをクリックまたはタップすると、フルスクリーンメニューが表示または非表示になります。

2つ目の色設定は、メニューの背景色です。

各ボックスをクリックすると、カラーパレットが外観表示されます。使いたい色をクリックするか、16進コードをタイプしてください。

メニューカラーを選択した後、ページをスクロールして「フォント/外観」セクションに進んでください。ここでは、メニューテキストに使用するフォントの色、ファミリー、サイズを選択することができます。

このチュートリアルでは、テーマのフォントを使用する初期設定のままにします。サイトのデザインと一致するため、この設定をお勧めします。また、追加のフォントを読み込むと、WordPressサイトのパフォーマンスや速度に影響する可能性があります。

また、特定のページにサイドメニューを表示したり、メインメニューの高さが足りない場合にスクロールさせる設定もあります。このチュートリアルでは、これらの設定はオフのままにしておきますが、ご自分のWordPressブログやサイトで自由に試してみてください。

その後、「アニメーション設定」セクションまでスクロールダウンする必要があります。調整できる主な設定は2つあります。

その最初のものが「アニメーション・タイプ」です。これは、メニューが有効化したときのアニメーションの方向を選択できます。上から下、左から右、右から左から選べます。

2つ目の設定は、メニュー項目にマウスオーバーしたときに得られる効果です。選択肢はパディング線、背景色、丸みを帯びた枠線の背景色です。

フルスクリーンメニューのコンテンツ

最後に、ページの一番上までスクロールして戻り、「メニューコンテンツ」タブをクリックする必要があります。ここで、フルスクリーンメニューに表示されるWordPressメニューを選択することができます。

上部の「メニューを選択」の隣にあるドロップダウンリストよりメニューを選択する必要があります。ナビゲーションメニューをまだ作成していない場合は、WordPressでナビゲーションメニューを追加する方法のガイドをご覧ください。

メニュー画面に表示されるコンテンツを追加したい場合は、次のセクションの「フリーHTML / ショートコード」に追加することができます。エディターボックスにコンテンツを入力し、メディアファイルを追加してください。このコンテンツはメニューの下に表示されます。

プライバシーポリシーページへのリンクを含めるチェックボックスもあります。多くのサイトオーナーは、これをメインメニューではなくフッターに追加することを好みますが。

次に、ソーシャルアイコンをメニュー項目として追加するとよいでしょう。これらのアイコンはフルスクリーンメニューの一番下に並んで表示されます。

アイコンを追加するには、「ソーシャル・アイコン」セクションまでスクロールダウンし、「Facebook」などアイコンのタイトルを入力するだけです。その後、適切なアイコンを選択し、ソーシャルページのURLを入力します。

Add Another Icon（別のアイコンを追加）」ボタンをクリックすると、さらにアイコンを追加できます。

最後に、WordPressネイティブの検索バーをレスポンシブメニューの上部に追加することができます。メニューコンテンツ」ページの一番下までスクロールし、「検索バーを追加しますか？お好みで、プレースホルダーテキストを入力することもできます。

最後に、「変更を保存」ボタンをクリックして、設定を保存します。

あなたのサイトにアクセスして、フルスクリーンレスポンシブメニューの動作を確認することができます。異なる画面サイズでのメニューの動作を確認するために、ブラウザーサイズを変更することをお勧めします。

デモサイトではこんな感じです。

フルスクリーンメニューに満足したら、フルスクリーンメニューオプションに戻り、’管理ユーザーのみにメニューを表示する’のチェックを外すのを忘れないでください。変更を保存’ボタンをクリックすると、サイト訪問者がメニューにアクセスできるようになります。

この投稿が、WordPress サイトにフルスクリーンレスポンシブメニューを追加する方法を学ぶのにお役に立てば幸いです。Facebook 動画を埋め込む方法や、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.