top of page

ホームページのヘッダーってなに?Wixの編集方法(メニュー編)

更新日:2023年10月22日


今日はヘッダーを編集してみたいと思います。


ヘッダーとは???


弊社のホームページでいうと、


これです↓


コーポレートサイトのヘッダー
INITIAL LINEのヘッダー

この赤色で囲まれた部分がヘッダーです。

クリックすることで、そのページが開いたり、さらに細かいメニューが表示されたり、またはこのページ内のある部分に飛んだりすることができる、これがヘッダーです。


ヘッダーもホームページ作成において、ほぼ必須のメニューと思います。


Wixでも、ヘッダーの設定はもちろん可能です。

基本的なヘッダー機能は備わっています。


ということで、今回の完成イメージはこちらです。


ヘッダーの完成形
ヘッダーの完成形

枠線で囲まれたヘッダーメニューで、選択しているページは紫色になっています。


シンプルで、少し古臭いと思われるかもしれませんが、この記事を読めば、ヘッダーメニューの編集方法が分かると思います。



では、編集方法を見ていきましょう!

Wixの編集画面から、

「メニュー・アンカー」を選択すると、多くのヘッダーメニューのテンプレートがあります。

好きなデザインがあれば、それを選択しましょう。


ヘッダーのテンプレート



今回はシンプルなものを選択しました。



ヘッダーを追加

追加すると、メニューがいくつか出てきます。


メニュー

・メニューを管理:ここに表示するページや、ページの名前変更などを操作

・ページを追加:新規のページを追加

 こちらの2つに関しては、別の記事で紹介していますので、そちらをご覧ください。



・設定:高度な設定

・レイアウト:テキストの配置等

・デザイン:先ほどのテンプレートとカスタマイズが表示される

・アニメーション

・ストレッチ



では、メニュー管理から見ていきます。


メニュー管理

ここでは、メニューに関連することだけを説明します。

ここでは、非表示だけになります。非表示を選択すると、メニューには表示されなくなります。


※メインのページ以外を選択すると、サブページが表示されます、サブページを設定すると、メニューは下の画像のように親子関係のようになり、親のメニューが選択されると、表示されます



サブメニュー

※サイトメニューの左にイカリマークや家マークがついていますが、家はメインのページ。イカリはアンカーといって、ページではなく、特定のページの特定の位置を表します。アンカーについては次回の記事で説明します。




では、続いて、デザインを選択して、

区切りのあるデザインを選択しました。


メニューデザイン

さらに、デザインをカスタマイズを選択して、

詳細のデザインメニューが出てきました。


ここで、上のところから1つ選択して、さらに

ホバー時の色を選択しました。ホバーは、マウスがその上に乗ったときのことです。

クリック時のタブでも、同様に紫色を選択しました。クリックは、もちろんクリックされたとき、つまりそのページが表示されているときです。

デザインのカスタマイズ

追加でアニメーション等も設定できますが、今回はこれで完成にしたいと思います。


このようにデザインをカスタマイズして、思い通りのメニューを完成させましょう!

bottom of page