Wix エディタ：サイトのヘッダーをカスタマイズする
この記事内
- ヘッダーのデザインを変更する
- 画像をヘッダーの背景に設定する
- ヘッダーの背景を透明にする
- ヘッダーのサイズを変更する
- ヘッダーにスクロールエフェクトを追加する
- よくある質問
ヘッダーはページの上部にあるセクションで、メニューやロゴが表示されます。ヘッダーは訪問者にサイトの最初の印象を与えるため、ブランドやサイトに合わせてカスタマイズすることをおすすめします。
ヘッダーのデザインとスクロールエフェクトを選択し、サイズと枠線を設定して目立つようにします。
ヘッダー内のパーツは、ヘッダーが表示されるすべてのページに自動的に表示されます。
ヘッダーのデザインを変更する
ヘッダーのデザインはサイトに合わせて変更できます。さまざまなプリセットからデザインを選択し、色、間隔、角などの設定をカスタマイズします。
ヘッダーは、通常時とスクロール時の 2つの異なる状態に合わせてデザインすることができます。スクロール状態を設定すると、訪問者がページをスクロールする際に、見た目が変化するよう、ヘッダーをデザインすることができます。たとえば、ヘッダーの色が変わるようにしたり、枠線を追加して目立たせたりすることができます。
ヘッダーのデザインを変更する方法：
- エディタに移動します。
- ヘッダーをクリックします。
- 「ヘッダーのデザインを変更」をクリックします。
- 「通常時」または「スクロール」の状態をクリックします。
- オプションを使用してヘッダーのデザインをカスタマイズします：
- 不透明度・色：ヘッダーの背景色を選択し、不透明度を調整します。
- 枠線：スライダーをドラッグして、ヘッダーに上下の枠線を追加して目立たせます。次に、枠線の不透明度と色を調整します。
- 角：枠線の角を丸くするか、四角くします。
- 影：影を追加してデザインし、ヘッダーにクールな 3D 効果を出します。
画像をヘッダーの背景に設定する
サイトをさらにパーソナライズするために、画像をサイトのヘッダーの背景として設定することができます。画像をヘッダーにドラッグして配置し、ドラッグハンドルを使用して画像をヘッダー全体に引き延ばします。次に、画像を背面へ移動させて、ヘッダーのパーツを覆わないようにします。
画像をヘッダー内に収め、正しく添付するには、画像をヘッダーよりも小さくする必要があります。バナー画像など、ヘッダーのサイズと互換性のある解像度とサイズの画像を使用することをおすすめします。
画像をヘッダー背景として使用する方法：
- エディタに移動します。
- 新しい画像を追加するか、ページ上の既存の画像を選択します。
- 「ヘッダー内へ移動」というメッセージが表示されたら、画像をヘッダーにドラッグ＆ドロップします。
- 画像の周りのサイドハンドルをドラッグして、画像を引き延ばしてヘッダー全体をカバーします。
- 画像を背面へ移動させます：
- 画像を右クリックします。
- 「アレンジ」にマウスオーバーし、「背面へ移動」をクリックします。
ヒント：
「クイック編集」パネルを使用して、現在の画像横の「変更」をクリックすると、いつでもヘッダー画像を置き換えることができます。
ヘッダーの背景を透明にする
ヘッダーを透明に設定すると、サイトの背景と調和しながら、モダンで洗練されたデザインを作成することができます。
ヘッダーの背景を透明にする方法：
- エディタに移動します。
- ヘッダーをクリックします。
- 「ヘッダーのデザインを変更」をクリックします。
- 「通常時」または「スクロール」の状態をクリックします。
- 「色・不透明度」をクリックします。
- 背景の不透明度を 0％ に設定します。
ヘッダーのサイズを変更する
ヘッダーのサイズを変更して、自由にサイズ調節することができます。
大きなヘッダーは、サイトタイトル、サイトメニュー、ロゴなどのパーツがたくさんある場合に便利です。小さなヘッダーは、ミニマリスト的なサイトや、ページ内にほとんどのパーツがある場合に最適です。
ヘッダーのサイズを変更する方法：
- エディタに移動します。
- ヘッダーをクリックします。
- ヘッダー下部のストレッチハンドルをドラッグして、高さを調整します。
ヘッダーにスクロールエフェクトを追加する
ヘッダーにクールなスクロールエフェクトを追加して、訪問者が上下にスクロールする際の動作を選択します。たとえば、訪問者がスクロールしてもヘッダーを上部に表示したままにしたり、段階的にフェードアウトさせたりすることができます。
ヘッダーのスクロールエフェクトを選択する方法：
- エディタに移動します。
- ヘッダーをクリックします。
- 「設定」アイコン
をクリックします。 - スクロールエフェクトを選択します：
- サイトをスクロール：スクロールエフェクトは適用されません。 訪問者がページをスクロールダウンすると、ヘッダー（例：ページ上部）から離れます。
- 固定：訪問者が上下にスクロールしてもヘッダーがページの上部に残り、サイトメニューに簡単にアクセスできます。
ヒント：このエフェクトを選択する場合、スクロール中にコンテンツに重ならないよう、ヘッダーは短かめに設定することをおすすめします。 - 非表示：訪問者がサイトをスクロールすると、ヘッダーが段階的に消えます。 ヘッダーが再び表示されるには、上にスクロールする必要があります。
- フェードアウト：訪問者がサイトをスクロールすると、ヘッダーはゆっくりとフェードアウトし、上にスクロールし始めると再び表示されます。
よくある質問
詳細については以下の質問をクリックしてください。
ヘッダーの背景を透明に設定しましたが、下のストリップと調和させるにはどうすればよいですか？
モバイルサイトでデスクトップとは異なるスクロールエフェクトを設定することはできますか？
ヘッダー内のパーツを選択できないのはなぜですか？