スクラッチからのWix Webサイト-ヘッダーメニュー
このチュートリアルでは、空白のテンプレートから始めたWix Webサイトで作業を続けます。ヘッダーセクションにメインメニューを追加します。

最初のタスクは、ヘッダーに背景色を追加することです。

  1. ヘッダーを選択し、[ヘッダーデザインの変更]ボタンをクリックします。

    この時点で、ヘッダーは色なしに設定されます。それを白に変えましょう。

  2. 色なしのすぐ下にあるヘッダーデザインをクリックします。

  3. ウィンドウの下部にある[デザインのカスタマイズ]ボタンをクリックします。

  4. 背景と中央の背景の[塗りつぶしの色と不透明度]設定を100%白に設定します。

  5. 境界線設定では、上部境界線と下部境界線幅を0に設定します。

  6. Corners Radiusを0に設定し、Enable Shadowをオフにします。

これで、トップメニューを追加できます。

  1. 左側のメニューから[プラス]アイコンをクリックし、リストから[メニュー]を選択します。

  2. いずれかの水平メニューをクリックして、ページに追加します。

    ページに新しいメニューが表示され、1つのページへのリンク(ホーム)が表示されます。

  3. メニューをクリックしてヘッダーセクションにドラッグします。テキストが表示されたら ヘッダーに添付、メニューを離します。

    メニューをページの中央に配置するため、メニューボックスを幅980ピクセルに拡張します。

  4. メニューボックスを選択した状態で、ボックスの端をドラッグして、980領域を埋めます。左右のガイドラインをガイドとして使用してください。

    メニューは、デフォルトですでに中央に設定されているはずです。これは、ホームリンクがボックスの中央にあるために表示されます。これで、メニューをカスタマイズできます。

  5. メニューを選択したまま、デザインアイコン(ペイントブラシ)をクリックして、水平メニューデザインウィンドウを開きます。ウィンドウの下部にある[デザインのカスタマイズ]ボタンをクリックします。

    [塗りつぶしの色と不透明度]をクリックすると、メニューの背景が既に100%白に設定されていることがわかります。この設定を維持して、テキストに進みましょう。

    前のチュートリアルでは、メインテキストテーマのフォントをFutura Lightに設定しました。メニューについても同じことをしましょう。

  6. Tアイコンをクリックして、[テキスト設定]セクションを開きます。

  7. [フォント]セクションの右側にある矢印をクリックして、リストから[Futura Light]を選択します。

    通常のメニューテキストのデフォルトの色設定を維持しましょう。ただし、ホバーおよびクリックメニューのテキストの色を金色に変更します。

  8. ウィンドウのホバーリンクをクリックします。カラーボックスをクリックして、カラーピッカーを開きます。 [色の追加]リンクをクリックし、[色]設定を#bc9b5dに変更して、[追加]ボタンをクリックします。カラーピッカーを閉じます。

  9. [クリック済み]設定について、前の手順を繰り返します。ただし、今回は、[マイカラー]領域からゴールドの色を選択できます。

    最後に、ページリンクのデフォルトテキストをHOMEからWebサイトの名前に変更します。

  10. メニューを選択したまま、ポップアップメニューから[メニューの管理]ボタンをクリックします。

  11. [ページ]メニューから[ホーム]ページを見つけて、右側のリンクをクリックします。リストから名前の変更を選択します。新しいリンクタイトルを追加して、[完了]をクリックします。

    次のタスクは、ヘッダーセクションのサイズをメニューの高さより少し大きくすることです。

  12. メニューを選択し、ヘッダー領域の上部まで上にドラッグします。

  13. ヘッダーの空の領域をクリックして、ストレッチハンドルを表示します。ハンドルを上にドラッグします。

Wix.com、Inc.の許可により使用されるスクリーンショット