WordPress 固定ナビゲーションの作成

固定ナビゲーション（Sticky navigation）は、ユーザーがページをスクロールしても常に画面の上部にナビゲーションバーが表示されるようにする機能です。これにより、サイトのユーザビリティが向上し、訪問者が別のページに移動する際にもナビゲーションバーにすぐにアクセスできるようになります。WordPressでこの機能を実装する方法について、以下で詳しく解説します。

固定ナビゲーションの実装方法

1. テーマのカスタマイズ

WordPressでは、テーマによっては既に「固定ナビゲーション」の機能が組み込まれている場合があります。まずは、使用しているテーマの設定画面を確認してみましょう。もし「Sticky navigation」オプションが存在する場合は、それを有効にすることで簡単に固定ナビゲーションが実現できます。

もしテーマにそのようなオプションがない場合、以下の手順で手動で実装する必要があります。

2. カスタムCSSを使用する方法

WordPressで固定ナビゲーションを実装するためには、CSSを使ってナビゲーションバーの「位置」を固定する方法が一般的です。具体的な手順は以下の通りです。

1. WordPress管理画面にログイン

2. **「外観」 > 「カスタマイズ」**を選択

3. **「追加CSS」**をクリック

4. 以下のCSSコードを入力：

css
CopyEdit
/* 固定ナビゲーションバー */
.sticky-nav {
    position: -webkit-sticky; /* Safari対応 */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff; /* ナビゲーションバーの背景色 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 影をつけて視認性を高める */
}

このCSSコードは、ナビゲーションバーに「.sticky-nav」というクラスを追加し、スクロールしても画面上部に固定されるように設定します。top: 0;は、スクロール時にナビゲーションバーが画面の上部にぴったりとくっつくようにするプロパティです。

次に、ナビゲーションバーのHTMLにこのクラスを適用します。

3. ナビゲーションバーのHTMLにクラスを追加

WordPressのテーマファイル（通常はheader.php）にアクセスし、ナビゲーションバーを探します。ナビゲーションメニューを表示している