Wix の使用方法を学び、サイトとビジネスを構築する。

直感的な Wix 機能でサイトをデザインして管理する。

定期購入、プラン、請求を管理する。

ビジネスを運営し、サイト会員とつながる。

ドメインの購入、サイトへの接続と移管方法を学ぶ。

ビジネスとウェブプレゼンスを成長させるツールを入手する。

SEO とマーケティングツールで知名度を上げる。

より効率的な作業を支援する高度な機能を利用する。

解決策や既知の問題について確認し、問い合わせる。

コースとチュートリアルでスキルを習得する。

ウェブデザインやマーケティングなどのヒントを得る。

検索エンジンからのトラフィックを増やす方法について学ぶ。

フルスタックプラットフォームでカスタムサイトを構築する。

あなたの目標達成をサポートするエキスパートを見つけましょう。

この記事では下記を説明します：

ヘッダーの背景をカスタマイズする
ヘッダーをデザインする
ヘッダー動作を調整する
特定のページからヘッダーを非表示にする
よくある質問

Wix Harmony エディタ：サイトのヘッダーをカスタマイズする

10分

この記事内

ヘッダーの背景をカスタマイズする
ヘッダーをデザインする
ヘッダー動作を調整する
特定のページからヘッダーを非表示にする
よくある質問

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

サイトのヘッダーは、訪問者が目的のページにアクセスできるだけでなく、訪問者の第一印象を決める重要なパーツの一つです。Wix Harmony エディタでは、ヘッダーの背景や枠線を変更したり、スクロールエフェクトを調整したりと、あらゆる部分をカスタマイズすることができます。

Wix Harmony エディタでサイトを作成し、サイトのヘッダーがハイライトされている様子を示したスクリーンショット。

ヘッダーの背景をカスタマイズする

ヘッダーには、サイトに適した背景を選択することができます。単色、画像、またはループ動画を選択して、必要に応じて微調整することができます。

ヘッダーの背景をカスタマイズする方法：

エディタに移動します。
ヘッダーを選択します。
アクションバーで「背景の置き換え」をクリックします。
背景の種類を、「色」、「画像」、または「動画」から選択します。
ヘッダーの背景を設定します：

背景色

画像背景

動画背景

ヘッダーをデザインする

背景を選択したら、ヘッダーのデザインをカスタマイズします。枠線を追加したり、角や間隔を調整したり、影を適用したりして、ヘッダーを目立たせることができます。

ヘッダーをデザインする方法：

エディタに移動します。
ヘッダーを選択します。
アクションバーで「すべてのデザインオプション」アイコンをクリックします。
ヘッダーをデザインする方法を選択します：
- 枠線：ヘッダーの枠線の色、太さ、スタイルを変更します。
- 角：「半径」下のスライダーをドラッグし、ヘッダーの角の丸みを調整します。「個々の角を編集」アイコンをクリックすると、それぞれの角を個別にデザインすることができます。
- 間隔：スライダーをドラッグし、ヘッダーと画面の端までの間隔を調整します。「個々の側面を編集」アイコンをクリックすると、それぞれの間隔を個別に調整することができます。
- 影：内側と外側の影を適用し、位置、ぼかし、色などを調整して、ヘッダーが立体的に見えるようにします。

ヘッダーで「デザイン」パネルを開き、「影」のオプションが表示されている様子を示したスクリーンショット。

ヘッダーのサイズを変更したい場合：

ハンドルをドラッグすると、ヘッダーの高さを変更することができます。ヘッダーの下に余白が多い場合は、ハンドルをダブルクリックすると余白を削除することができます。

Wix Harmony エディタで、ヘッダー下部のハンドルをドラッグして、サイズを変更する様子を示したスクリーンショット。

ヘッダー動作を調整する

ヘッダーを次のセクションとオーバーラップさせるか、分離したままにするかを選択します。オーバーラップさせるとモダンなレイヤー効果を演出し、分離させるとすっきりとしたクラシックな雰囲気を演出することができます。

次に、サイトのスタイルに合わせて、ヘッダーにスクロールエフェクトを追加します。スクロールエフェクトでは、ヘッダーへのアクセスを考慮し、ヘッダーを常に表示させるようにしたり、スクロールするとヘッダーがフェードアウトするようにしたりすることができます。

ヘッダーの動作を調整する方法：

エディタに移動します。
ヘッダーをクリックします。
アクションバーで「動作を変更」をクリックします。
「次のセクションをオーバーラップ」横のトグルをクリックします：
- 有効：ヘッダーが次のセクションの上に配置され、ヘッダーと次のセクションが明確に区切られます。
- 無効：ヘッダーが次のセクションの上に浮く状態で配置され、ヘッダーの背後にコンテンツが表示されるレイヤーが作成されます。
スクロールエフェクトを選択します：
- ページと共に移動：スクロールエフェクトは適用されません。訪問者がページをスクロールダウンすると、ヘッダー（ページ上部）から離れます。
  注意：ヘッダーを次のセクションと重ねる設定にした場合、このオプションは無効になります。
- 固定：訪問者が上下にスクロールしても、ヘッダーは常にページの上部に表示されます。
- 消滅：訪問者がページをスクロールすると、ヘッダーが徐々に消えます。訪問者が上にスクロールすると、ヘッダーが再び表示されます。
- フェードアウト：訪問者がページをスクロールすると、ヘッダーがゆっくりとフェードアウトし、上にスクロールすると再び表示されます。
（オプション）ページをプレビューし、エフェクトの動作を確認します。