Wix ヘルプ

Wix Studio Two エディタ:ヘッダーにスクロールエフェクトを追加する

10分

この記事では、2026年11月にリリースされた新しい Wix Studio Two エディタについて説明します。Wix Studio エディタまたは Wix Studio Two エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。

サイト訪問者がページを下へ移動する際の動作を設定しましょう。ナビゲーションが手の届く範囲に留まるようヘッダーをフリーズ(固定)したり、コンテンツを全画面表示にするためにヘッダーを消したりフェードアウトさせたりし、方向、距離、タイミングを微調整します。


ヘッダースクロールエフェクトを追加・設定する

ヘッダーの動作をページに合わせて調整します。サイト訪問者が常にメニューを必要とする場合はヘッダーを表示させ、コンテンツだけでページを構成すべき場合は、画面から非表示にします。

ヒント:

スクロールエフェクトは、このヘッダーが表示されるすべてのページに適用されます。別のヘッダーを使用するページでは、独自のスクロールエフェクトが適用されます。

ヘッダーにスクロールエフェクトを追加する方法:

  1. エディタに移動します。

  2. ヘッダーをクリックします。

  3. アクションバーで「動作を変更」をクリックします。

  4. 「スクロールエフェクト」を選択します。

  5. 「すべてのデザインオプション」をクリックし、要素設定パネルでエフェクトを設定します。

  6. (要素設定パネルで)「ヘッダー設定」をクリックしてセクションを展開します。

  7. 選択したスクロールエフェクトを設定します:

ヘッダーのアクションバーで「動作を変更」をクリックし、スクロールエフェクトを選択する様子を示したスクリーンショット。

スクロールエフェクトを削除する

ヘッダーをページとともに移動させたい場合は、エフェクトを無効にします。ヘッダーのデザインは維持されたまま、スクロール動作のみが変更されます。

スクロールエフェクトを削除する方法:

  1. エディタに移動します。
  2. ヘッダーをクリックします。
  3. アクションバーで「動作を変更」をクリックします。
  4. 「スクロールエフェクト」ドロップダウンから「サイトと共にスクロール」を選択します。
ヘッダーの「動作を変更」パネルで「サイトと共にスクロール」を選択して、スクロールエフェクトを削除しています。

ヘッダーの詳細設定を操作する

ヘッダーの動作を自由に設定できます。詳細設定を有効にすると、ヘッダーの位置と動きを個別に制御できるようになります。たとえば、ヘッダーを画面の下部に固定したり、独自のタイミングやイージングを設定したりすることができます。

ヒント:

「Option + I」または「Alt + I」を押して、詳細設定を有効または無効にできます。

ヘッダーの詳細設定を操作する方法:

  1. エディタに移動します。

  2. ヘッダーをクリックします。

  3. アクションバーで「動作を変更」をクリックします。

  4. 「すべてのデザインオプション」をクリックします。

  5. 要素設定パネルの上部にある「その他のアクション」アイコン  をクリックし、「詳細設定」トグルを有効または無効にします。

ヘッダーの要素設定パネルにある「その他のアクション」メニューから「詳細設定」トグルを有効にしているスクリーンショット。
  1. 「ヘッダー設定」をクリックしてセクションを展開します。

  2. 「配置タイプ」を選択します:

    • 既定:ヘッダーの位置は固定されておらず、ページの残りの部分とともにスクロールします。

    • スティッキー:サイト訪問者がスクロールするとヘッダーが画面の端に固定されます。

    • ピン留め:ヘッダーが画面に固定さレ、ページコンテンツの上に表示されます。

  3. 選択した配置タイプを設定します:

注意:

詳細設定では、「サイズ」の項目も変更され、% や vh などの高度な測定単位に切り替わります。


よくある質問

ヘッダーのスクロールエフェクトに関する詳細については、以下の質問をクリックしてください。