Wix エディタ:サイトのヘッダーをカスタマイズする
読了時間:4分
ヘッダーはウェブサイトの上部にあるセクションで、通常はサイトのメニューやロゴが含まれています。サイトの第一印象はヘッダーで決まるため、ブランドやサイトに合わせてカスタマイズすることをおすすめします。
ヘッダーのデザインとスクロールエフェクトを選択し、サイズと枠線を設定して訪問者に大胆な印象を与えましょう。
この記事では、下記の項目について説明します:
ヘッダーのデザインを変更する
ヘッダーのデザインはサイトに合わせて変更できます。さまざまなプリセットからデザインを選択し、色、間隔、角などの設定をカスタマイズします。
ヘッダーのデザインを変更する方法:
- ヘッダーをクリックします。
- 「ヘッダーのデザインを変更」をクリックします。
- プリセットデザインを選択するか、「デザインをカスタマイズ 」をクリックします。
- オプションを使用してヘッダーのデザインをカスタマイズします:
- 不透明度・色:ヘッダーの色を選択し、不透明度を調整します。
- 枠線:ヘッダーに枠線を追加して、ページ上で目立たせます。
- 角:枠線の角を丸くするか、四角くします。
- 影:影を追加してデザインし、ヘッダーにクールな 3D 効果を出します。
- 間隔:ヘッダーとその位置の間隔を調整します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/06/18/442a73c2-eadd-4fa6-b488-19c646485446/42df046c-982e-464b-9648-a55ef4c72c7a.png)
注意:
カスタマイズオプションは、選択したプリセットによって異なります。
画像をサイトのヘッダーとして使用する
サイトのヘッダーに画像を設定し、さらにサイトをパーソナライズすることができます。
画像をヘッダー内に収め、正しく添付するには、画像をヘッダーよりも小さくする必要があります。バナー画像など、ヘッダーのサイズと互換性のある解像度とサイズの画像を使用することをおすすめします。
画像をサイトのヘッダーとして使用する方法:
- エディタ左側で「追加」
をクリックします。
- 「画像」をクリックします。
- 追加する画像の種類を選択します。
- 画像を選択して「ページに追加」をクリックします。
- 「ヘッダー内へ移動」というメッセージが表示されたら、画像をヘッダーにドラッグ&ドロップします。
![画像がサイトのヘッダーにドラッグ&ドロップされていることを示すGIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/03/23/2259187a-73e6-4cf1-adc7-d490d188f306/1eb37138-4f94-44e3-ad55-9d6d821e4c8d.gif)
ヘッダーのサイズを変更する
ヘッダーのサイズを変更して、自由にサイズ調節することができます。
大きなヘッダーは、サイトタイトル、サイトメニュー、ロゴなどのパーツがたくさんある場合に便利です。小さなヘッダーは、ミニマリスト的なサイトや、ページ内にほとんどのパーツがある場合に最適です。
ヘッダーのサイズを変更する方法:
- エディタ内でヘッダーをクリックします。
- ヘッダー下部のストレッチハンドルをドラッグして、高さを調整します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/06/18/a9201465-a9a9-499c-9e5f-761a85f536b8/b8d9c399-ed63-408d-915f-5c877c9334dc.png)
ページに重要なパーツを追加している場合:
サイトメニューなどのパーツがすべてのページで表示される設定になっていることを確認してください。 パーツをすべてのページで表示する方法はこちら
ヘッダーにスクロールエフェクトを追加する
ヘッダーにクールなスクロールエフェクトを追加して、訪問者がページを下にスクロールしたときの動作を選択します。
ヘッダーのスクロールエフェクトを選択する方法:
- ヘッダーをクリックします。
- 「設定」アイコン
をクリックします。
- スクロール設定を選択します:
- スクロールする:ヘッダーは常にサイトの最上部にあり、ページとともに上下に移動します。
- 固定:ヘッダーは常にページ最上部に表示されます。これにより、サイト訪問者はトップにスクロールしなくても、サイトメニューに簡単にアクセスできます。訪問者がサイトをスクロールするときにパーツやコンテンツを覆わないように、ヘッダーの高さを小さくすることをおすすめします。
- 隠す:訪問者がサイトをスクロールすると、ヘッダーが消えます。ヘッダーが再び表示されるには、上にスクロールする必要があります。
- フェードアウト:訪問者がサイトをスクロールすると、ヘッダーはゆっくりとフェードアウトし、上にスクロールし始めると再び表示されます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/06/18/8be8181e-778d-4392-a921-0b674208d268/f8e381a9-570c-4b40-bd44-f9e5dbb4e1af.png)
注意:
モバイルサイトとデスクトップサイトで、異なるヘッダースクロールエフェクトを設定することができます。 モバイルサイトのヘッダースクロール設定を変更する方法はこちら
お役に立ちましたか?
|