SeedProd ドキュメント

SeedProd のドキュメント、リファレンスマテリアル、チュートリアル

スティッキーヘッダーを作成する方法

粘着ヘッダーは、訪問者がページをスクロールしても画面の上部に固定されたままになります。これにより、ナビゲーションメニューが常に表示され、ユーザーはトップに戻ってスクロールすることなくサイト内を移動しやすくなります。


ステップ1:ヘッダーセクションの追加

編集したいページまたはテンプレートをSeedProdビルダーで開きます。ヘッダー要素(ロゴ、ナビゲーションメニュー、その他のヘッダーコンテンツ)を含むセクションを追加します。


ステップ2:セクション設定を開く

セクションの紫色のツールバーにある歯車アイコンをクリックして、設定パネルを開きます。または、レイアウトナビゲーションパネルを開き、そこからヘッダーセクションをクリックします。

SeedProdの紫色のツールバーにあるセクション設定の歯車アイコン

ステップ3:位置パネルを開く

セクション設定で、高度な設定タブをクリックし、次に位置パネルを展開します。

SeedProdセクション設定で、位置パネルが開いた状態の高度な設定タブ

ステップ4:粘着位置の設定

位置ドロップダウンで粘着を選択します。次に、ヘッダーが他のすべてのページ要素の上に固定されるように、次の値を設定します。

  • トップオフセット:0に設定して、ヘッダーがビューポートの上部にぴったりと収まるようにします。
  • Zインデックス:9999のような高い値に設定して、ヘッダーがページ上の他のすべての要素の上に表示されるようにします。
位置、トップオフセット、Zインデックスフィールドが表示された粘着位置設定

ステップ5:保存とプレビュー

保存をクリックして変更を適用し、ページをプレビューします。上下にスクロールして、ヘッダーが画面の上部に固定されたままであることを確認します。


これで、粘着ヘッダーが有効になりました。訪問者は、コンテンツの長さに関係なく、サイトのどのページをスクロールしても、常にナビゲーションにアクセスできます。

関連記事