ウェブサイトのトップナビゲーションメニューには、通常、最も重要なすべてのページへのリンクが含まれています。このメニューをスティッキーにすると、ユーザーがページをスクロールダウンしても常に画面に表示させることができます。これにより、いつでも簡単にアクセスできるようになります。
これによりナビゲーションがよりアクセスしやすくなり、ユーザーはサイトのさまざまなセクションにスクロールしてトップに戻ることなく、すばやくジャンプできます。私たちの意見では、スティッキーメニューを使用すると、エンゲージメントを高め、ウェブサイト全体のユーザビリティを向上させることができます。
この記事では、WordPressウェブサイトにスティッキーなフローティングナビゲーションメニューを簡単に追加する方法をご紹介します。
固定フローティングナビゲーションメニューとは何ですか？
スクロールダウンしても画面上部に固定される「スティッキーナビゲーションメニュー」は、常に画面に表示されます。
通常、WordPress のトップ ナビゲーションメニュー には、ウェブサイトの最も重要なコンテンツへのリンクが含まれています。このメニューを目立たせることで、訪問者はスクロールせずにいつでもこれらのリンクをクリックできます。
オンラインストアを運営している場合、通常、トップナビゲーションメニューには、チェックアウトページや顧客カートなど、コンバージョンを目的としたページへのリンクが含まれています。トップメニューを固定表示にすることで、カート放棄率を減らし、より多くの売上を上げることができます。
とはいえ、WordPress テーマや WooCommerce ストアで、目立つフローティングナビゲーションメニューを簡単に作成する方法を見てみましょう。以下のクイックリンクを使用して、使用したい方法にジャンプしてください。
方法1：テーマ設定を使用して固定メニューを追加する（簡単）
最高の WordPress テーマ の中には、目立つナビゲーションメニューをネイティブでサポートしているものがあります。とはいえ、WordPress ダッシュボードで テーマ » カスタマイズ に移動し、「メニュー」というラベルの付いた設定を探して、テーマの設定を確認する価値はあります。
テーマが目立つメニューをサポートしているかどうかわからない場合は、テーマのドキュメントを確認するか、開発者に連絡してヘルプを求めることができます。詳細については、WordPress サポートを適切に依頼して取得する方法 に関するガイドを参照してください。
テーマにスティッキーメニューの組み込みサポートがない場合は、以下の他の方法のいずれかを使用する必要があります。
方法2：プラグインを使用してスティッキーナビゲーションメニューを追加する（推奨）
WordPress で目立つナビゲーションメニューを追加する最も簡単な方法は、Sticky Menu & Sticky Header プラグインを使用することです。これにより、メニューを含むあらゆるものを目立たせることができます。
まず、プラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPress プラグインのインストール方法 に関する初心者向けガイドを参照してください。
有効化したら、設定 » Sticky Menu (or Anything!) に移動します。
まず、ブラウザの インスペクトツール を使用して、目立たせたいナビゲーションメニューの CSS ID を取得する必要があります。
ウェブサイトにアクセスし、ナビゲーションメニューの上にマウスカーソルを重ねます。次に、右クリックしてブラウザのメニューから「検証」を選択します。
これにより、ブラウザ内に新しいパネルが開かれ、ナビゲーションメニューのソースコードを確認できます。
メニューまたはサイトヘッダーに関連するコード行を見つける必要があります。それは次のようなものになります。
<nav id="site-navigation" class="main-navigation" role="navigation">
コードを見つけるのに苦労している場合は、「インスペクト」パネルのさまざまなコード行にマウスカーソルを合わせます。正しいコードを見つけると、ブラウザがナビゲーションメニューをハイライト表示します。これは次の画像で確認できます。
この場合、ナビゲーションメニューのCSS IDはsite-navigationです。
この情報がわかりましたら、WordPressダッシュボードに戻り、「Sticky Element (Required)」フィールドに追加してください。
また、先頭にハッシュ記号（#）を追加する必要があります。そのため、site-navigation は #site-navigation になります。
その後、ページ下部にある「変更を保存」ボタンをクリックして、変更を保存します。
これで、WordPressウェブサイトにアクセスしてスクロールすると、メニューは一番上に固定されるはずです。
場合によっては、スティッキーメニューが非表示にしたくないコンテンツと重なることがあります。
これが発生した場合、画面の上部と固定ナビゲーションメニューの間にスペースを定義するには、「固定要素とページのトップとの間のスペース」フィールドに数値を入力する必要があります。
目立つメニューは、モバイルデバイスなどの画面の小さいデバイスで問題を引き起こす可能性があります。これを念頭に置いて、デスクトップから WordPress ウェブサイトのモバイルバージョンを確認する のが良いでしょう。
メニューの外観に満足できない場合は、次のフィールド「画面がこれより小さい場合は要素を固定しない」を見つけることで、モバイルユーザー向けにメニューを「固定解除」できます。
ここに「780px」と入力します。
さらに探求すべき設定がいくつかありますが、これで動作するスティッキーナビゲーションメニューを作成するために必要なすべてです。
ナビゲーションメニューの設定に満足したら、「変更を保存」をクリックして設定を保存してください。
方法3：コードを使用して固定フローティングナビゲーションメニューを追加する
CSS を使用して固定ナビゲーションメニューを作成することもできます。
WordPress にカスタムコードを追加する最良の方法は、WPCode を使用することです。カスタム CSS、PHP、HTML などを追加できる最高のコードスニペットプラグインです。
テーマファイルを 直接編集しないため、一般的な WordPress エラーの多くを回避できます。また、カスタムコードを失うことなく、テーマを更新したり、まったく異なるテーマに切り替えたりすることもできます。
ワンクリックで固定メニューのオン/オフを切り替えることもできます。
まず、無料の WPCode プラグイン をインストールして有効化する必要があります。詳細については、WordPress プラグインのインストール方法 に関するステップバイステップ ガイドを参照してください。
プラグインを有効化したら、Code Snippets » + Add Snippetページに移動します。そこには、サイトに追加できる既製のWPCodeスニペットがすべて表示されます。
これらには、コメントを完全に無効にする スニペット、通常は WordPress がサポートしていないファイルタイプのアップロード、添付ファイルページを無効にする など、多くの機能が含まれています。
ここで、「Add Your Custom Code (New Snippet)」にマウスカーソルを合わせ、「Use snippet」ボタンが表示されたらクリックします。
次の画面で、コードスニペットのタイトルを入力する必要があります。これは参照用なので、好きなものを何でも使用できます。
次に、「コードの種類」ドロップダウンを開き、「CSSスニペット」を選択します。
これが完了したら、次のスニペットをWPCodeコードエディターに追加します。
#site-navigation {
background:#00000;
height:60px;
z-index:170;
margin:0 auto;
border-bottom:1px solid #dadada;
width:100%;
position:fixed;
top:0;
left:0;
right:0;
text-align: center;
}
これにより、黒い背景のナビゲーションメニューが作成されます。backgroundの隣の16進コードを変更することで、好きな色を使用できます。
たとえば、background: #ffffff を使用すると、白いメニューの背景になります。使用する 16 進コードがわからない場合は、HTML カラーコード のようなリソースを参照できます。
また、#site-navigationをナビゲーションメニューのCSS IDに置き換える必要があります。このコードを見つけるには、上記と同じ手順に従ってください。
コードに満足したら、「非アクティブ」トグルをクリックして「アクティブ」に変更し、「スニペットを保存」ボタンをクリックしてください。
これで、WordPressのブログやウェブサイトにアクセスすると、固定されたフローティングナビゲーションメニューが機能しているのがわかります。
テーマによっては、ナビゲーションメニューがサイトヘッダーの上に表示されるのではなく、下に表示されることがあります。この場合、スティッキーナビゲーションメニューがサイトのタイトルやヘッダーに近すぎたり、重なったりすることがあります。
このような場合は、カスタムCSSスニペットに以下を追加できます：
.site-branding {
margin-top:60px !important;
}
`site-branding` をヘッダーエリアのCSSクラスに置き換えるだけです。この情報を取得するには、ブラウザの「インスペクト」ツールを使用し、方法2で説明したのと同じ手順に従ってください。
ボーナス：WordPressの投稿をスティッキーにする
WordPress ブログをお持ちの場合は、ブログ投稿の一部を目立たせるのが良いでしょう。これらは、サイトの最も重要なコンテンツを含むピラー記事や、ユーザーに操作してもらいたいお知らせや プレゼント企画投稿 にすることができます。
選択した投稿を「固定表示」にすると、新しいコンテンツを公開しても、ブログページの最上部に表示され続けます。新しいコンテンツは、固定表示された投稿の下に表示されます。
コンテンツエディターでブログ投稿を開くと、簡単に固定表示できます。エディターを開いたら、ブロックパネルの「概要」タブを展開し、「ブログの最上部に固定」オプションにチェックを入れるだけです。
その後、上部にある「更新」または「公開」ボタンをクリックして設定を保存します。これで、WordPressサイトにスティッキーなブログ投稿が正常に作成されました。
詳細については、WordPressで固定投稿を作成する方法に関するチュートリアルをご覧ください。
この記事が、WordPressサイトに固定フローティングナビゲーションメニューを追加するのに役立ったことを願っています。また、WordPressテーマにスライドパネルメニューを追加する方法に関する初心者向けガイドや、WordPressメニューにソーシャルメディアアイコンを追加する方法に関するチュートリアルも参照してください。
この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。
デニス・ムトミ
特定の投稿/ページにのみスティッキーメニューを適用する方法はありますか？例えば、ブログのホームページではスティッキーにせず、ウェブサイトの他のすべての場所でスティッキーにするようなことはできますか？
WPBeginnerサポート
テーマでそのオプションが提供されていない場合は、条件付き表示を行う簡単な方法としてプラグインをお勧めします
管理者
Mrteesurez
よくできています。「スクロール時にメニュー（またはその他）を固定する」プラグインを共有していただき、嬉しいです。これは、メニュー以外のあらゆる要素を固定するために使用できることを意味します。
当初は生のコードを使用していましたが、この簡単な方法を共有していただきありがとうございます。
デヨ・オロボヨ
Mrteesurezさん、同意します。スティッキーメニューは価値のあるウェブサイト機能です。スティッキーメニューを作成することに加えて、ウェブページ内のセクション間を移動する際のユーザーエクスペリエンスをさらに向上させるために、「スムーズスクロール」効果を組み込むことも検討できます。
イジー・ヴァネック
チュートリアルありがとうございます。いつもこのようなことができるテンプレートを探していました。このガイドによると、もう探す必要はありません。
WPBeginnerサポート
テーマのオプションを広げることができてよかったです
管理者
ポール
5つ星はどこに置けばいいですか…本当にありがとうございます!!
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
ジェス
この役立つ投稿に本当に感謝します!!! とても明確で分かりやすいです。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
イヴァイロ
素晴らしい実践的なチュートリアルです。方法2を実行したところ、すぐに機能しましたが、ウェブサイトをモバイルで開くと、メニューのボタンが消えてしまいました。原因や解決策を知っている人はいますか？
Cheers!
WPBeginnerサポート
まだ確認していない場合は、お使いのテーマのサポートに問い合わせて、テーマのCSSとの競合がないか確認することをお勧めします。
管理者
セレナ・リチャードソン
こんにちは、
ページの上部ではなく、右側に固定されたフローティングメニューを作成するにはどうすればよいですか？スクロールダウンすると一緒に移動します。
ありがとうございます！
セリーナ
WPBeginnerサポート
これは、固定ウィジェットを追加することになります。それについては、以下の記事で推奨しています。
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
管理者
トム・ブラウン
すぐに効果がありました。ありがとうございます
WPBeginnerサポート
どういたしまして
管理者
シムラン
完成度と情報の提示方法…ありがとうございます。
WPBeginnerサポート
当社のガイドがお役に立てて嬉しいです
管理者
テオ
ナビバーのIDはどこで確認できますか？見つかりません。
WPBeginnerサポート
そのためには、要素の検査を使用します。要素の検査を正しく使用する方法については、以下のガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
管理者
ナターシャ T
命綱です、感謝してもしきれません。
WPBeginnerサポート
どういたしまして
管理者
タム
こんにちは！
助けてくれてありがとう！魔法のようにうまくいきました :D。
少しCSSを学んで、無料テーマ（GeneratePress）からナビゲーションを固定しようとしましたが、うまくいきませんでした。（CSSで「position: sticky;」を試しましたが）、あなたのコードのおかげで修正できました
WPBeginnerサポート
当社の記事がお役に立てて嬉しいです
管理者
アレクサンドル
まさに探していたものです！素晴らしいプラグインです。ありがとうございます
WPBeginnerサポート
どういたしまして、私たちの推奨事項がお役に立ててよかったです
管理者
ガイ・ベイリー
ご協力いただき、誠にありがとうございます。小さな質問ですが、スクロールダウンするとメニューの背景が透明になります。固定色（この場合は白）を追加するための簡単な修正やトリックはありますか？
WPBeginnerサポート
メニューの設定方法によりますが、要素を検査して background-color プロパティを設定できるオブジェクトを見つけることができます：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
マニッシュ
ありがとうございます。Wpbeginnerがトピックに関するブログ記事を書くときは、必ず役立つものになります。
WPBeginnerサポート
私たちのコンテンツがお役に立てたことを嬉しく思います
管理者
エベレスト
本当にありがとう。
あなたのおかげで、最高の一日になったよ。
WPBeginnerサポート
どういたしまして、お役に立ててよかったです
管理者
トニー・チャン
CSSコードは機能し、ヘッダーにマージンを追加する必要がありました。これにより、タイトル全体が表示されるようになりました。私のメニューバーは上部に広がっていますが、メニューボタンは左から始まり、中央で停止します。ボタンをページの中央に配置するにはどうすればよいですか？
WPBeginnerサポート
テーマによって詳細は異なりますが、通常はCSSを変更する必要があります。要素を検査して変更をテストできます：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
チネドゥ
すごい、これは完璧に機能します。
ありがとうございます
WPBeginnerサポート
私たちのソリューションがあなたのために機能してよかったです
管理者
ジリアン・デイビス
テーブルに本のリストがあります。表紙の画像をメディアにインポートしましたが、リストをスクロールすると画像が表示されるようにしたいです。行のホバーに似ていますが、テーブルメーカーで作成したテーブルでこれをどのように行いますか？
ラウル
この固定ナビゲーションメニューをスクロール可能にするにはどうすればよいですか？
サイドバーとして使用しましたが、サイドバーが長すぎると画面に収まらず、下にスクロールできません。
Rushikesh Thawale
こんにちは、
この投稿でコードのようにコードを書くにはどうすればよいですか？つまり、投稿にこのようなHTMLコードを表示するにはどうすればよいですか？
ありがとうございます。
タラ
すでに気づいているかもしれませんが、検索している方のために、投稿にコードを表示するには、HTMLタグの開き括弧のHTML文字をスペースなしで `<` と入力してください。
WPBeginnerサポート
それは一つの方法ですが、この目的のためには、こちらの記事の2番目の方法を使用しています：https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
管理者
セザール
素晴らしい投稿です！あなたのCSSコードは私に役立ちました
ダニ
アラン
とても役に立ちます！
ありがとうございます。
amin
また、ロゴやナビバーに表示したい要素には、「z-index: 999xxxx」を設定することもできます。
スジト・レグ
WordPressの投稿やページ内に固定メニューを追加する方法を知りたいです。例えば、長い投稿の場合、投稿自体の見出しや小見出しが固定メニューに表示され、読者が投稿内のセクション間を簡単に移動できるようにしたいのです。よろしくお願いします…
ザック
チュートリアルをありがとう！
私が必要としているのは少し異なり、メニューにマウスカーソルを合わせたときに表示される「ミニメニュー」が必要です。つまり、ホバーするまで表示されません。ドロップダウンのようなものです。
このチュートリアルを作成していただけると幸いです。
amin
メガメニュープラグインやUberメニュープラグインを使用することもできますが、CSSやjQueryを使用して、Bootstrap3メニューのようにプラグインなしで作成することもできます。