ベストセラー人気 WordPress テーマTop 30 詳細

WordPress メニューとヘッダを固定しよう

Last Updated:2015年4月20日| 7のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

前回の記事で メニューを上に固定する方法を見てみました。 続いてメニューとヘッダを上部に固定するプラグイン スティッキーメニュー(または何か!)私たちは、スクロールについて説明します。
Sticky Menu(or Anything)on Scroll

タイトルが示すように、このプラグインは、 メニューだけでなく、すべての要素を固定することができるプラグイン입니다。

Sticky Menu(or Anything!)on Scroll設定

このプラグインをインストールして有効にすると伝言板の 設定 メニューの下に "Sticky Menu(or Anything!)Settings」というメニューが追加されます。
Sticky menu settings

  • (1)には、固定する要素を入力する欄です。 アイディー(ID)またはクラス(class)の要素を追加することができます。
  • (2)固定する要素と上部との距離を設定します。
  • (3)小さな画面で固定していない場合は、ピクセルを設定すると、設定されたサイズ以下の画面では、固定されていません。
  • (4)大画面で固定していない場合は、ピクセルを設定すると、設定されたサイズ以上の画面では、固定されていません。
  • (5) Z-indexの値 設定します。

メニュー固定する

まず、固定メニューを一度作ってみましょう。 上の画面で(1)欄にメニューに対応する要素の名前を入力し、残りの設定(オプション)を指定すると、メニューが固定されます。 私は#site-navigationを入力して(テストテーマ:Accesspress Lite)、残りの設定はそのままおきます。 その後、実際の画面を見ると、次のようにメニューが固定されていることを知ることができます。
Sticky menu in action
myStickymenuプラグインとは異なり、色を指定するオプションはないですね。

ヘッダ固定する

次に、ヘッダを一度固定してみましょう。 要素を入力する欄に#mastheadを入力すると、(要素名は、テーマによって異なる場合があります)、次のようにヘッダ部分のロゴとその下にあるメニューが一緒に固定されました。
sticky header in wordpress

要素名に#top-headerを入力すると、以下のようにメニューを除いたヘッダ部分が固定されます。
Fix header without menu

他の要素の固定する

前述のように、このプラグインは、メニューとヘッダだけでなく、ほぼすべての要素を固定することができます。 (ヘッダやメニューのほか、固定要素があるかは分からないよ。)テストでヘッダーの下のスライドを一度固定試みますか?

Accesspress Liteテーマで(1)の欄に#slider-bannerを入力すると、メニューの下のスライドが固定されます。
Fix slide in wordpress
すっきりスライドが固定されて表示されてますね。

おわりに

Sticky Menu(or Anything!)on Scrollを使用すると、 WordPressで、メニューとヘッダだけでなく、ほぼすべての要素を上に固定することができます。 テストしてみた結果、テーマに沿ってmyStickymenuやSticky Menu(or Anything!)on Scroll中のより適切なものを使用すると、なりそうです。 myStickymenuは、いくつかのオプションが提供されますが、メニューだけ固定可能であるがSticky Menu(or Anything!)on Scrollは、すべての要素を固定することができるという点で、まともなプラグインです。



7のコメント

コメント

  1. 上記説明欄「STICKY MENU(OR ANYTHING!)ON SCROLL設定」
    で、次の「ID(ID)/クラス(Class)」に要素を追加するようにされてい
    IDとClassはどのように確認できますか? 入力しようとしてもIDとClassが何であるかをモルラソヨ。

    (1)には、固定する要素を入力する欄です。 「ユーザ名(ID)またはクラス(class)」の要素を追加することができます。

    応答
    • CSSで使用されるIDとクラスを指定します。 CSSのID /クラスについては、CSS関連の本を参照するか、グーグリングは、さまざまな文書を見つけることができます。 ID /クラスは、CSS関連の本で一番最初に説明している基本的な事項です。

      応答
  2. 固定はされますが、サイトが不安定なみたいよ。忘れてしまったのを忘れスラッシングイネヨㅠ

    応答
    • こんにちは、ハンソフイ様。 テーマでヘッダやメニューを固定する機能を提供していませんか?
      テーマで提供される場合、テーマ機能を使用することをお勧めします。

      このブログの場合、テーマ( GeneratePress)で提供されるSticky機能を使用してヘッダーを固定しました。

      応答
  3. #mastheadを利用して、やっと成功しました。 ところが、フッターも...つまりメニューとフッター、二つの同時適用することができませんか?

    応答
    • こんにちは、イオイル様。

      #mastheadはテーマによって異なり、Google Chromeの開発ツールを利用して、簡単に確認が可能です。

      この記事で紹介されたプラグインを使用してメニューを固定し、フッターは簡単なCSSで固定させることができるでしょう。 次の記事を参照してみてください:

      https://www.thewordcracker.com/miscellaneous/sticky-fixed-bottom-div-element/

      そしてフッターを固定することに関連して、以下の文も参照してみることができます。

      https://avada.tistory.com/1397

      応答