ウェブサイトのトップナビゲーションメニューには、通常、最も重要なすべてのページへのリンクが含まれています。このメニューをスティッキーにすると、ユーザーがページをスクロールダウンしても常に画面に表示させることができます。これにより、いつでも簡単にアクセスできるようになります。
これによりナビゲーションがよりアクセスしやすくなり、ユーザーはサイトのさまざまなセクションにスクロールしてトップに戻ることなく、すばやくジャンプできます。私たちの意見では、スティッキーメニューを使用すると、エンゲージメントを高め、ウェブサイト全体のユーザビリティを向上させることができます。
この記事では、WordPressウェブサイトにスティッキーなフローティングナビゲーションメニューを簡単に追加する方法をご紹介します。
固定フローティングナビゲーションメニューとは何ですか？
スクロールダウンしても画面上部に固定される「スティッキーナビゲーションメニュー」は、常に画面に表示されます。
通常、WordPress の最上部にあるナビゲーションメニューには、ウェブサイトの最も重要なコンテンツへのリンクが含まれています。このメニューを固定することで、訪問者はスクロールせずにいつでもこれらのリンクをクリックできるようになります。
オンラインストアを運営している場合、通常、トップナビゲーションメニューには、チェックアウトページや顧客カートなど、コンバージョンを目的としたページへのリンクが含まれています。トップメニューを固定表示にすることで、カート放棄率を減らし、より多くの売上を上げることができます。
それでは、WordPressテーマまたはWooCommerceストアで簡単に固定フローティングナビゲーションメニューを作成する方法を見てみましょう。使用したい方法にジャンプするには、以下のクイックリンクを使用してください。
- 方法1：テーマ設定を使用して固定メニューを追加する（簡単）
- 方法2：プラグインを使用してスティッキーナビゲーションメニューを追加する（推奨）
- 方法3：コードを使用して固定フローティングナビゲーションメニューを追加する
- ボーナス：WordPressの投稿をスティッキーにする
方法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 color codeのようなリソースを参照できます。
また、#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サポート
If your theme does not offer that option then we would recommend the plugin for a simple method to have that conditional display
管理者
Mrteesurez
よくできています。「スクロール時にメニュー（またはその他）を固定する」プラグインを共有していただき、嬉しいです。これは、メニュー以外のあらゆる要素を固定するために使用できることを意味します。
当初は生のコードを使用していましたが、この簡単な方法を共有していただきありがとうございます。
Dayo Olobayo
Mrteesurezさん、同意します。スティッキーメニューは価値のあるウェブサイト機能です。スティッキーメニューを作成することに加えて、ウェブページ内のセクション間を移動する際のユーザーエクスペリエンスをさらに向上させるために、「スムーズスクロール」効果を組み込むことも検討できます。
イジー・ヴァネック
チュートリアルありがとうございます。いつもこのようなことができるテンプレートを探していました。このガイドによると、もう探す必要はありません。
WPBeginnerサポート
Glad we could help open up your theme options
管理者
ポール
5つ星はどこに置けばいいですか…本当にありがとうございます!!
WPBeginnerサポート
Glad our guide was helpful
管理者
ジェス
この役立つ投稿に本当に感謝します!!! とても明確で分かりやすいです。
WPBeginnerサポート
Glad our guide was helpful
管理者
イヴァイロ
素晴らしい実践的なチュートリアルです。方法2を実行したところ、すぐに機能しましたが、ウェブサイトをモバイルで開くと、メニューのボタンが消えてしまいました。原因や解決策を知っている人はいますか？
Cheers!
WPBeginnerサポート
まだ確認していない場合は、お使いのテーマのサポートに問い合わせて、テーマのCSSとの競合がないか確認することをお勧めします。
管理者
セレナ・リチャードソン
こんにちは、
ページの上部ではなく、右側に固定されたフローティングメニューを作成するにはどうすればよいですか？スクロールダウンすると一緒に移動します。
ありがとうございます！
セリーナ
WPBeginnerサポート
これは、固定ウィジェットを追加することになります。それについては、以下の記事で推奨しています。
https://www.wpbeginner.com/plugins/how-to-create-a-sticky-floating-sidebar-widget-in-wordpress/
管理者
トム・ブラウン
すぐに効果がありました。ありがとうございます
WPBeginnerサポート
You’re welcome
管理者
simran
完成度と情報の提示方法…ありがとうございます。
WPBeginnerサポート
Glad our guide was helpful
管理者
Theo
ナビバーのIDはどこで確認できますか？見つかりません。
WPBeginnerサポート
そのためには、要素の検査を使用します。要素の検査を正しく使用する方法については、以下のガイドをご覧ください。
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site
管理者
Natasha T
命綱です、感謝してもしきれません。
WPBeginnerサポート
You’re welcome
管理者
タム
Hello!
Thanks for your help! It worked like magic :D.
I learn a little CSS and tried to make my nav sticky from a free theme (GeneratePress) but didn’t work. (I tried “position: sticky;” in CSS), but thank your code that helped me to fix it
WPBeginnerサポート
Glad our article was helpful
管理者
alexandre
まさに探していたものです！素晴らしいプラグインです。ありがとうございます
WPBeginnerサポート
You’re welcome, glad you found our recommendation helpful
管理者
Guy Bailey
ご協力いただき、誠にありがとうございます。小さな質問ですが、スクロールダウンするとメニューの背景が透明になります。固定色（この場合は白）を追加するための簡単な修正やトリックはありますか？
WPBeginnerサポート
メニューの設定方法によりますが、要素を検査して background-color プロパティを設定できるオブジェクトを見つけることができます：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
マニッシュ
ありがとうございます。Wpbeginnerがトピックに関するブログ記事を書くときは、必ず役立つものになります。
WPBeginnerサポート
Glad our content has been helpful
管理者
Everest
本当にありがとう。
あなたのおかげで、最高の一日になったよ。
WPBeginnerサポート
You’re welcome, glad we could help
管理者
トニー・チャン
CSSコードは機能し、ヘッダーにマージンを追加する必要がありました。これにより、タイトル全体が表示されるようになりました。私のメニューバーは上部に広がっていますが、メニューボタンは左から始まり、中央で停止します。ボタンをページの中央に配置するにはどうすればよいですか？
WPBeginnerサポート
テーマによって詳細は異なりますが、通常はCSSを変更する必要があります。要素の検査を使用して変更をテストできます：https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Chinedu
すごい、これは完璧に機能します。
ありがとうございます
WPBeginnerサポート
Glad our solution worked for you
管理者
ジリアン・デイビス
テーブルに本のリストがあります。表紙の画像をメディアにインポートしましたが、リストをスクロールすると画像が表示されるようにしたいです。行のホバーに似ていますが、テーブルメーカーで作成したテーブルでこれをどのように行いますか？
Raul
この固定ナビゲーションメニューをスクロール可能にするにはどうすればよいですか？
サイドバーとして使用しましたが、サイドバーが長すぎると画面に収まらず、下にスクロールできません。
Rushikesh Thawale
こんにちは、
この投稿でコードのようにコードを書くにはどうすればよいですか？つまり、投稿にこのようなHTMLコードを表示するにはどうすればよいですか？
ありがとうございます。
Tara
すでに気づいているかもしれませんが、検索している方のために、投稿にコードを表示するには、HTMLタグの開き括弧のHTML文字をスペースなしで `<` と入力してください。
WPBeginnerサポート
それは1つの方法ですが、ここではこの記事の2番目の方法を使用しています: https://www.wpbeginner.com/wp-tutorials/how-to-easily-display-code-on-your-wordpress-site/
管理者
Cesar
Great post! your CSS code works for me
dani
アラン
とても役に立ちます！
ありがとうございます。
amin
また、ロゴやナビバーに表示したい要素には、「z-index: 999xxxx」を設定することもできます。
Sujith Reghu
WordPressの投稿やページ内に固定メニューを追加する方法を知りたいです。例えば、長い投稿の場合、投稿自体の見出しや小見出しが固定メニューに表示され、読者が投稿内のセクション間を簡単に移動できるようにしたいのです。よろしくお願いします…
ザック
チュートリアルをありがとう！
私が必要としているのは少し異なり、メニューにマウスカーソルを合わせたときに表示される「ミニメニュー」が必要です。つまり、ホバーするまで表示されません。ドロップダウンのようなものです。
このチュートリアルを作成していただけると幸いです。
amin
メガメニュープラグインやUberメニュープラグインを使用することもできますが、CSSやjQueryを使用して、Bootstrap3メニューのようにプラグインなしで作成することもできます。