wix新エディタを使ってヘッダーパーツをカスタマイズしてみる（その4）

今回はヘッダーエリアにメニューとソーシャルアイコンを組み込んでいこうと思います。

基本的にヘッダーエリアには、ユーザーがどのページを観覧中でも、他のページにアクセスできるようにメニューは必須ですね。

上の画像のように左の+アイコンをクリックし、メニューの項目にマウスカーソルをドラッグします。

ドラッグしたら初期でwixが用意しているメニューのテンプレートが複数表示されます。

この中から好きなメニューをクリック、または配置したい場所にドラッグ＆ドロップしましょう。

配置したら、サイトのデザインに合わせて横幅を調節しましょう。

横幅が狭すぎると、表示しきれないページは「もっと見る」という形でリンクで隠れてしまうので、ページを非表示にするか文字サイズ、メニューの幅で調整してください。

次にデザインを変更したいと思います。

配置したメニューパーツをクリックして、レイアウトを変更アイコンの隣にある「デザイン」を変更をクリックしましょう。

上の画像のメニューは横型メニューの左から6番目のデザインになります。

すると、ウインドウが表示されるので、ヘッダーパーツのデザインを変更したように、下の部分にある「デザインをカスタマイズ」を選択してください。

デザインのカスタマイズを選択するとウインドウが表示されます。

ウインドウのタブメニューに「通常時」、「ホバー」、「クリック」の項目あるので、軽く説明すると。

「通常時」

マウスでクリック、ホバーされていない状態のデザインを編集できます。

テキストのフォントの種類やサイズ、影、枠線、色など、ヘッダーパーツやテキストパーツに共通する項目が編集できます。

「ホバー」

マウスのポインターをメニューの項目に合わせたときの設定を編集できます。

枠線の色・不透明度、テキストの色などが編集できます。

「クリック」

マウスでメニューをクリックした状態の時の設定を編集できます。

こちら枠線の色・不透明度、テキストの色の編集ができます。

基本的には、テキストパーツやヘッダーパーツのデザイン編集の項目と一緒なので、同じように設定してみたください。

このようにフォントのデザインが変わるだけで、サイトの印象も変わりますね。

水色のメニューはマウスでカーソルを合わせた時の状態です。

最後にメニューのレイアウトの調整をしてみましょう。

メニューパーツをクリックし、ページの追加の右側にある一番左のアイコンの「レイアウトを変更」を選択してください。

ウインドウが表示され設定項目が表示されます。

とりあえず項目の説明からします。

「テキスト配置」

テキストを左寄せ、真ん中寄せ、右寄せ、の設定ができます。

「タブサイズを均等にする」

初期ではタブの横幅は、テキストに合わせて自動で調整されます。

なので、文字数によって横幅がバラバラになりますが、「タブサイズ」を均等にすることで、

文字の数に関わらず、全てのタブを一番長い文字数の幅に合わせてくれます。

「メニュー全幅を使用する」

初期ではオンになっていたと思います。

メニューの表示エリアを全部使わずに左右に一定の空間を開けます。

オフにすると、「テキスト配置」と表示されますが、正確には「タブの配置」だと思われます。

一番上の項目にある「テキスト配置」は言葉の通りテキストの配置を設定できますが、この場合は、タブの配置を設定することができます。

「タブのテキスト」

メニューにタブが収まらない場合に表示されるテキストの設定ができます。

以上が項目の説明になります。

個人的な使い方としては、基本的に初期の設定のままで、デザイン性によって、タブのサイズを均等にする場合があります。

タブの横幅を揃えることで、デザインに統一性が生まれると私は思っています。

次はソーシャルバーを配置してみましょう。

メニューから+アイコンを選択し、ソーシャルの項目にカーソルを合わせます。

その中の「ソーシャルバー」の項目から一番上のアイテムをクリック、またはドラッグ＆ドロップでヘッダーパーツの中に配置します。

初期では、wix側でソーシャルのアイコンを用意してくれているので、使用しないソーシャルアイコンは消去しましょう。

ソーシャルバーをクリックしたら「ソーシャルリンクの設定」という項目が下の部分に表示されるので、選択してください。

すると、上の画像みたいにウインドウが表示されるので、消去したいアイコンを選択し、キーボードのDeleteキー、または選択したアイコンの右下にある「ゴミ箱マーク」を選択しましょう。

Deleteキーを立て続けに押すと、右から順番に消えていくので、注意しましょう。

さらにこの画面では、ウインドウの右端にあるように、アイコンのリンクを設定できます。

このソーシャルバーの場合は、ユーザーに自身のソーシャルページへのリンクに案内する形になります。

アイコンをクリックした時に表示したいページのURLを入力しましょう。

あと、ウインドウの右上辺りに「アイコンを追加」という項目があるので、オリジナルなどの

好きなアイコンに変更する事も可能です。

次にソーシャルバーのレイアウトの設定を紹介します。

ソーシャルバーをクリックしたら「ソーシャルリンクを設定」の右に、レイアウトを変更のボタンがあるのでクリックします。

すると上の画像のようにソーシャルレイアウトのウインドウが表示されます。

設定項目は上から順に

「アイコンサイズ」

アイコンの大きさの設定

「間隔」

アイコン同士の間隔の設定

「レイアウト」

横か縦のレイアウトの設定

とくに詳細に説明する項目はありませんが、注意点として、アイコンサイズの大きさは解像度に依存するので、オリジナルのアイコンなどの場合は、変更する画像のサイズを大きめのものを用意しておきましょう。

画像のサイズが極端に小さいと、大きくした時に表示された画像が荒くなってしまいます。

そんなにソーシャルアイコン自体大きくする事はないと思いますが、一応注意点です。

それでは今回はこの辺りで失礼します。

今回でヘッダーは一旦ここまで終了して、次回は「ページの追加・その他設定」を紹介したいと思います。