このチュートリアルでは、空白のテンプレートから始めたWix Webサイトで作業を続けます。ヘッダーセクションにメインメニューを追加します。
最初のタスクは、ヘッダーに背景色を追加することです。
- ヘッダーを選択し、[ヘッダーデザインの変更]ボタンをクリックします。
この時点で、ヘッダーは色なしに設定されます。それを白に変えましょう。
- 色なしのすぐ下にあるヘッダーデザインをクリックします。
- ウィンドウの下部にある[デザインのカスタマイズ]ボタンをクリックします。
- 背景と中央の背景の[塗りつぶしの色と不透明度]設定を100%白に設定します。
- 境界線設定では、上部境界線と下部境界線幅を0に設定します。
- Corners Radiusを0に設定し、Enable Shadowをオフにします。
これで、トップメニューを追加できます。
- 左側のメニューから[プラス]アイコンをクリックし、リストから[メニュー]を選択します。
- いずれかの水平メニューをクリックして、ページに追加します。
ページに新しいメニューが表示され、1つのページへのリンク(ホーム)が表示されます。
- メニューをクリックしてヘッダーセクションにドラッグします。テキストが表示されたら ヘッダーに添付、メニューを離します。
メニューをページの中央に配置するため、メニューボックスを幅980ピクセルに拡張します。
- メニューボックスを選択した状態で、ボックスの端をドラッグして、980領域を埋めます。左右のガイドラインをガイドとして使用してください。
メニューは、デフォルトですでに中央に設定されているはずです。これは、ホームリンクがボックスの中央にあるために表示されます。これで、メニューをカスタマイズできます。
- メニューを選択したまま、デザインアイコン(ペイントブラシ)をクリックして、水平メニューデザインウィンドウを開きます。ウィンドウの下部にある[デザインのカスタマイズ]ボタンをクリックします。
[塗りつぶしの色と不透明度]をクリックすると、メニューの背景が既に100%白に設定されていることがわかります。この設定を維持して、テキストに進みましょう。
前のチュートリアルでは、メインテキストテーマのフォントをFutura Lightに設定しました。メニューについても同じことをしましょう。
- Tアイコンをクリックして、[テキスト設定]セクションを開きます。
- [フォント]セクションの右側にある矢印をクリックして、リストから[Futura Light]を選択します。
通常のメニューテキストのデフォルトの色設定を維持しましょう。ただし、ホバーおよびクリックメニューのテキストの色を金色に変更します。
- ウィンドウのホバーリンクをクリックします。カラーボックスをクリックして、カラーピッカーを開きます。 [色の追加]リンクをクリックし、[色]設定を#bc9b5dに変更して、[追加]ボタンをクリックします。カラーピッカーを閉じます。
- [クリック済み]設定について、前の手順を繰り返します。ただし、今回は、[マイカラー]領域からゴールドの色を選択できます。
最後に、ページリンクのデフォルトテキストをHOMEからWebサイトの名前に変更します。
- メニューを選択したまま、ポップアップメニューから[メニューの管理]ボタンをクリックします。
- [ページ]メニューから[ホーム]ページを見つけて、右側のリンクをクリックします。リストから名前の変更を選択します。新しいリンクタイトルを追加して、[完了]をクリックします。
次のタスクは、ヘッダーセクションのサイズをメニューの高さより少し大きくすることです。
- メニューを選択し、ヘッダー領域の上部まで上にドラッグします。
- ヘッダーの空の領域をクリックして、ストレッチハンドルを表示します。ハンドルを上にドラッグします。
Wix.com、Inc.の許可により使用されるスクリーンショット