Webサイトにアクセスして、ナビゲーションメニューが常に上部に表示されていることに気付いたことがありますか？

ナビゲーションメニューは、原則としてページをスクロールすると消えるように表示されます。 常に表示されるナビゲーションメニューはフローティングであるため、ユーザーがどのように下にスクロールしてもかまいません。

このチュートリアルでは、WordPressブログでフローティングメニューを簡単に作成する方法を紹介します。

WordPressでウェブサイトやブログをまだ作成していない場合は、次の7つのステップでWordPressブログをインストールする方法を参照することをお勧めします。 あなたのブログにワードプレスのテーマを、見つけインストールしてアクティブにする方法

それが終わったら、今日私たちが懸念していることに取り掛かりましょう。

1メソッド：プラグインを使用してWordPressにフローティングメニューを追加する方法

この方法は簡単で高速です。 ナビゲーションメニューをまだ設定していない場合は、次のことができます。 方法を学ぶ.

最初に行う必要があるのは、プラグインをインストールしてアクティブ化することです。 スティッキーメニュー（または何か！）私たちは、スクロール 」。 プラグインのインストール方法がわからない場合は、 私たちのチュートリアルを読むことができます.

アクティベーション後、「 設定»スティッキーメニュー このプラグインの設定を構成します。

まず、フロートにするナビゲーションメニューのCSSIDを入力する必要があります。

使用されているCSSを見つけるには、ブラウザの「検査」ツールを使用する必要があります。

Webサイトに移動し、マウスをナビゲーションメニューに移動します。 その後、右クリックして「検査」を選択する必要があります。

発見してさらに進む イエロー・ペンシルでWordPressのテーマをカスタマイズする方法

これにより（デフォルトで）ブラウザ画面が分割され、ナビゲーションメニューのソースコードを表示できるようになります。 次のような行を見つける必要があります。

この例では、ナビゲーションメニューのCSS IDは「 サイトナビゲーション '。

「＃site-navigation」のように、プラグイン設定にメニューのCSSIDを入力します。

プラグイン設定の次のオプションは、画面の上部とフローティングナビゲーションメニューの間のスペースを設定することです。 メニューが非表示にしたくないアイテムと重なっている場合は、この設定を使用できます。 それ以外の場合は、この設定を無視してください。

その後、オプション「チェックバー管理者」のすぐ横にあるボックスをクリックする必要があります。 これにより、プラグインは、ログインしたユーザー用に追加されたWordPressツールバー用のスペースを追加できます。

設定ページの次のオプションを使用すると、ユーザーがモバイルデバイスなどの小さな画面を使用してWebサイトにアクセスしている場合に、ナビゲーションメニューを非表示にできます。

このメニューがモバイルデバイスとタブレットデバイスでどのように表示されるかをテストできます。 気に入らない場合は、このオプションに780pxを追加できます。

発見も モバイルWordPressの応答メニューを作成する方法

「」をクリックすることを忘れないでください 設定を保存する 変更を保存します。

Webサイトにアクセスして、フローティングナビゲーションメニューの動作を確認できます。

方法2：ナビゲーションメニューを手動で追加する方法

この方法では、カスタム CSS コードを ワードプレスのテーマ.

まず第一にあなたは訪問しなければなりません " 外観>カスタマイズ WordPressカスタマイザーを起動します。

」をクリックします 追加のCSS 左側のペインで、このCSSコードを追加します。

＃サイトのナビゲーション{背景：#FFF; 高さ：60px。 z屈折率：170。 マージン：0自動; border-bottom：1px固体#dadada。 幅：100％; 位置：固定; トップ：0。 左：0。 右：0。 テキスト整列：センター; }

置換」 ＃サイトナビゲーション ナビゲーションメニューの識別子に基づいて、«ボタンをクリックします Enregistrer '。

Webサイトにアクセスして、フローティングナビゲーションメニューの動作を確認できます。

ナビゲーションメニューが通常Webサイトのヘッダーの後に表示される場合、このCSSコードはWebサイトのタイトルとヘッダーと重複している可能性があります。

これは、次のコードを使用してヘッダー領域にマージンを追加することで簡単に調整できます。

.siteブランディング{マージントップ：60px。 }

これでチュートリアルは終了です。これで、Webサイトにフローティングメニューを作成または追加できるようになります。

あなたが他を探しているなら WordPressのプラグイン これにより、メニューを管理できます。ここにいくつかあります WordPressのプラグイン このタスク専用のプレミアム。 

1。 メニューヒーロー

このプラグインを使用すると、いくつかの非常に簡単な手順で独自のカスタム WordPress メニューを作成できます。 特に、エレガントでプロフェッショナルな WordPress メニューを簡単かつ直感的に作成できます。 最も複雑な機能豊富なメガ メニューから、最も単純なドロップダウン メニューまで、 WordPressのプラグイン HeroMenu あらゆるタイプのメニューを設定し、数分で起動して実行します。

PC、タブレット、スマートフォンで完全に機能する、使いやすい、カスタマイズ可能なコンテンツ、独自のメニュースタイルを追加するカスタムCSS、メガメニューデザイナー、サポートされているブラウザー：Chrome、Firefox、Safari： 、Opera、IE9など。

ダウンロード | デモ | ウェブホスティング

2。 スリックメニュー

スリックメニュー WordPressの単なるメニュープラグインではありません。 複数のメニューレベルを無制限に作成したり、豊富なコンテンツ、複数のスタイルオプション、アニメーション効果を備えたサイドバーを作成したりするために使用できます。

各メニューレベルは、背景色、画像、ビデオ、カスタムフォントなどでカスタマイズできます。 このプラグインは完全に応答性が高く、メニュー項目に45を超えるアニメーションがあります。

ダウンロード | デモ | ウェブホスティング

3。 8Degree Flyメニュー

8Degree Fly メニューは WordPressのプラグイン プレミアムを使用すると、ウェブサイトにキャンバス メニューを追加して、情報を簡単な方法で強調する外観にすることができます。 デフォルトの WordPress メニュー機能を使用してメニューを作成します。

アイコン、メニュースローガン、擬似グループヘッダー、長い説明など、追加の要素をデフォルトのメニュー項目に追加できます。 また、WYSIWYGエディターが付属しており、長い説明をユーザーフレンドリーな方法で把握するのに役立ちますこのエディターでは、ショートコードも使用できます。

ダウンロード | デモ | ウェブホスティング

その他の推奨リソース

ブログまたはウェブサイトのメニューの作成またはカスタマイズをさらに進めたい場合は、以下のリンクを参照することもお勧めします。

• あなたのナビゲーションメニューにスタイルを追加する方法
•  WordPressのメニューにtitle属性を追加する方法
• あなたのブログにメガメニューを作成するための8 WordPressプラグイン

まとめ

ここに ！ このチュートリアルは以上です。WordPressブログにフローティングメニューを追加できるようになることを願っています。 私たちはあなたを招待します この記事をソーシャルネットワークで友達と共有する.

提案や発言があれば歓迎します。 WordPressを初めて使用する場合は、 これを参照してください リソース.

...