GeneratePressテーマでヘッダーを固定する簡単な方法

by

ウェブサイトを見るとき、ページをスクロールしてもヘッダーが画面上部に固定されていると便利ですよね。メニューにすぐアクセスできるからです。今回は、WordPressの人気テーマ「GeneratePress」でヘッダーを固定する方法をご紹介します。

有料版（GP Premium）を使った方法

GeneratePressの有料版には「Sticky Navigation（固定ナビゲーション）」という便利な機能が備わっています。設定はとても簡単です。

  1. WordPress管理画面にログインします
  2. 「外観」>「カスタマイズ」>「メニュー」>「Sticky Navigation」と進みます
  3. 「Sticky Navigation」のスイッチをオンにします
  4. 必要に応じて「Hide when scrolling down」（下にスクロールするときに非表示）オプションを選びます

これだけで完了です。ページをスクロールしても、ナビゲーションメニューが画面上部に固定されるようになります。

無料版でもできる！CSSコードを使った方法

GeneratePressの無料版を使っている方でも心配いりません。少しのCSSコードを追加するだけで、ヘッダーを固定できます。

まず、次のCSSコードを用意します：

.site-header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}
.site-content {
    padding-top: 160px; /* ヘッダーの高さに合わせて調整してください */
}
Code language: CSS (css)

このコードをサイトに追加する手順は次の通りです：

  1. WordPress管理画面で「外観」>「カスタマイズ」>「追加CSS」を開きます
  2. 上記のコードをテキストエリアに貼り付けます
  3. 「padding-top」の値はあなたのサイトのヘッダーの高さに合わせて調整します

この値が小さすぎると、コンテンツがヘッダーの下に隠れてしまうので注意してください。大きすぎると、ヘッダーとコンテンツの間に不自然な空白ができてしまいます。

プラグインを使った簡単な方法

CSSコードを書くのが苦手という方には、プラグインを使う方法もあります。「Sticky Menu & Sticky Header」というプラグインを使えば、難しいコードを書かなくても設定できます。

  1. WordPress管理画面で「プラグイン」>「新規追加」を開きます
  2. 検索ボックスに「Sticky Menu & Sticky Header」と入力します
  3. プラグインをインストールして有効化します
  4. プラグインの設定画面を開き、「Sticky Element」のところに.site-headerと入力します

これで完了です。プラグインが自動的にヘッダーを固定してくれます。

どの方法を選ぶべき？

それぞれの方法には長所と短所があります。

有料版の方法は最も簡単ですが、GP Premiumのライセンスが必要です。多くの便利な機能が含まれているので、サイトをさらに充実させたい方にはお勧めです。

CSSを使う方法はコストがかからず、サイトにプラグインを追加する必要もありません。ただし、CSSに慣れていない方には少し難しいかもしれません。

プラグインを使う方法は設定が簡単ですが、サイトの読み込み速度に影響する可能性があります。

サイトの目的や予算、技術的な知識に合わせて、最適な方法を選んでください。

まとめ

GeneratePressでヘッダーを固定するには、有料版の機能を使う方法、CSSコードを追加する方法、プラグインを使う方法の3つがあります。どの方法も数分で設定でき、ユーザー体験を向上させる効果があります。