header-logo
Wix の使用方法を学び、サイトとビジネスを構築する。
直感的な Wix 機能でサイトをデザインして管理する。
定期購入、プラン、請求を管理する。
ビジネスを運営し、サイト会員とつながる。
ドメインの購入、サイトへの接続と移管方法を学ぶ。
ビジネスとウェブプレゼンスを成長させるツールを入手する。
SEO とマーケティングツールで知名度を上げる。
より効率的な作業を支援する高度な機能を利用する。
解決策や既知の問題について確認し、問い合わせる。
placeholder-preview-image
コースとチュートリアルでスキルを習得する。
ウェブデザインやマーケティングなどのヒントを得る。
検索エンジンからのトラフィックを増やす方法について学ぶ。
フルスタックプラットフォームでカスタムサイトを構築する。
あなたの目標達成をサポートするエキスパートを見つけましょう。
placeholder-preview-image

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

6分

スムーズなトランジションエフェクトを追加して、スクロール中のヘッダーの動作を向上させます。訪問者がページを下に移動する際に、ヘッダーがフェードアウトしたり、スライドして非表示になったりするように調整できます。また、塗りつぶし色と不透明度を調整して、目障りにならずに可視性を維持することもできます。

このアプローチにより、クライアントのサイトを洗練されたプロフェッショナルな外観に仕上げ、サイト訪問者のエクスペリエンスを向上させるだけでなく、コンテンツに集中しやすくなります。
Wix Studio エディタで構築されたサイトの例で、訪問者が下方にスクロールするとヘッダーが固定され、緑色に変わる様子が表示されています。

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

ヘッダーをどの程度目立たせるかに応じて、ヘッダーの動作を選択します。たとえば、フリーズして常に表示されるようにしたり、訪問者がページのコンテンツに集中できるように目障りにならないように消滅させたりできます。
ヒント:
スクロールエフェクトは、現在作業中のページにのみ適用されます。

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

  1. ヘッダーを選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
  1. ヘッダー設定」下で、「スクロールエフェクト」を選択して設定します:
Wix Studio エディタのヘッダーと要素設定パネルで、「消滅」スクロールエフェクトを追加している様子を示したスクリーンショット。

スクロール時にヘッダーの背景色を変更する

ヘッダーに選択したスクロールエフェクト以外に、訪問者が下にスクロールしたときに色が変わるようにすることができます。こうすることで、ヘッダーにさらに注目を集め、訪問者が見逃さないようにできます。
ヒント:
この設定は、ヘッダーが表示されるすべてのページに適用されます。

スクロール時にヘッダーの背景色を変更する方法:

  1. ヘッダーを選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
  1. デザイン」下で「スクロール中の色」トグルを有効にします。
  2. カラーピッカーをクリックして、別の色を選択します。
  3. (オプション)スライダーをドラッグして不透明度を変更します。
Wix Studio エディタのヘッダーと要素設定パネルで、「スクロール中の色」トグルを有効にし、ヘッダーが緑色に変わる様子を示したスクリーンショット。

スクロール効果を削除する

ヘッダーに追加したスクロール効果はいつでも削除できます。

スクロール効果を削除する方法:

  1. ヘッダーを選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
  1. 無効にする機能を選択します:
    • スクロールエフェクト:ドロップダウンから「サイトと共にスクロール」オプションを選択します。
    • スクロール中の色:トグルを無効にして、この効果を削除します。
ヘッダーからスクロールエフェクトを削除するために必要な詳細設定がハイライトされているスクリーンショット

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

要素設定パネルで詳細設定を有効にすると、ヘッダースクロールエフェクトをより細かく制御できます。このビューでは、配置タイプ(例:ピン留め、スティッキー)とトランジション(例:移動、フェード)を個別に設定し、プリセットを使用する代わりに独自のエフェクトを作成します。
注意:
デフォルトでは、ピン留めされたヘッダーは次のセクションと重複します。ヘッダーが次のセクションと重ならないよう、画面に固定したい場合は、ヘッダーをスティッキーにすることができます。

詳細設定を有効にする方法:

  1. ヘッダーを選択します。
  2. エディタ右上の「要素設定パネルを開く」アイコン  をクリックします。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
  1. サイズ」横の「その他のアクション」アイコン  をクリックします。
  2. 詳細設定」トグルを有効にします。
  3. ヘッダー設定」下でヘッダーのスクロールエフェクトを調整します:
    • 配置タイプを選択します(例:ピン留め、スティッキー)。
    • オフセットを追加して、ヘッダーとページ上部の間に距離を作成します。
    • 切り替え」トグルを有効にして、「移動」または「フェード」エフェクトを追加します。
    • スクロール中の色」を追加します(「デザイン」下)。
ヘッダーの詳細設定トグルが有効になっていることを示す GIF。
Wix Studio エディタで構築されたサイトの例で、訪問者が下方にスクロールするとヘッダーが固定され、緑色に変わる様子が表示されています。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
Wix Studio エディタのヘッダーと要素設定パネルで、「消滅」スクロールエフェクトを追加している様子を示したスクリーンショット。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
Wix Studio エディタのヘッダーと要素設定パネルで、「スクロール中の色」トグルを有効にし、ヘッダーが緑色に変わる様子を示したスクリーンショット。
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
ヘッダーからスクロールエフェクトを削除するために必要な詳細設定がハイライトされているスクリーンショット
Wix Studio エディタで「要素設定パネル」を開いているスクリーンショット。
ヘッダーの詳細設定トグルが有効になっていることを示す GIF。