サイト会員：ログインバーを追加・カスタマイズする
8分
サイト会員が会員エリアにログインするために使用するログインバーと、表示されるメニューをカスタマイズします。メニューに表示するタブとリンクを指定し、レイアウトを調整したり、パーツのデザインをカスタマイズしたりして、サイト全体のスタイルに合わせることができます。
ログインバーを追加する
サイトに会員エリアを追加すると、ヘッダーセクションにログインバーが自動的に含まれます。これにより、すべてのページに表示されるようになり、メンバーはアカウントにすばやく便利にアクセスできるようになります。ログインバーを再度追加する必要がある場合や、さらにログインバーを追加したい場合は、簡単に行うことができます。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- エディタ左側で「パーツを追加」
をクリックします。 - 「コミュニティ」をクリックします。
- 「ログインバー」をクリックします。
- ログインバーをクリックするかページ上にドラッグして追加します。
ログインバーを設定する
ログインバーに表示する情報を選択し、テキストをカスタマイズし、「こんにちは」などの親しみやすい雰囲気のあいさつを追加します。このパーソナライズされた内容は、サイト会員に快適な体験を提供するのに役立ちます。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上の「ログインバー」パーツをクリックします。
- 「ログインバーの設定」をクリックします。
- 該当するログインバーの状態（「ログイン」または「ログアウト」）を選択します：
- ログインバーの「ログイン」バージョンをカスタマイズします：
- 外観：「アバター」、「全幅」、または「テキスト」のスタイルから選択します。アバターを使用している場合は、「プロフィール写真」、「イニシャル」、または「カスタム」を選択してサイズを調整します。テキストと全幅スタイルには、カスタムボタンテキストを追加できます。矢印のスタイルとサイズを選択します。オプションで、サイト会員の名前の前にグリーティングを表示し、通知ベルアイコンを表示することができます。
- レイアウト：ログインバーの配置とパーツの方向を選択します。
- ドロップダウンメニュー：アイテムの配置を選択し、ログアウトボタンのテキストを変更します。
- ログインバーの「ログアウト」バージョンをカスタマイズします：
- 「アバター」、「全幅」、または「テキスト」のスタイルから選択します。アバターを使用している場合は、「プロフィール写真」、「イニシャル」、または「カスタム」を選択してサイズを調整します。テキストと全幅スタイルには、カスタムボタンテキストを追加できます。
- ログインバーの「ログイン」バージョンをカスタマイズします：
ヒント：
パネル下部の「元のデザインにリセット」ボタンをクリックすると、変更内容を簡単に元に戻すことができます。
ログインバーのメニューを管理する
ログインしたサイト会員がログインバーをクリックすると、ドロップダウンメニューが開きます。このメニューに表示する会員タブとページは選択することができます。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上の「ログインバー」パーツをクリックします。
- 「メニューを管理」をクリックします。
- 次に実行する内容を選択します：
- さらにメニューアイテムを追加する：
- 下部で「メニューアイテムを追加」をクリックします。
- 「リンク」をクリックします。
- リンク先（例：サイトページ、外部ウェブアドレスなど）を選択し、利用可能なオプションを使用して設定します。
- 「完了」をクリックします。
- メニューアイテムの名前を変更する：メニューアイテムをダブルクリックして、新しい名前を入力します。
- メニューアイテムを削除する：該当するアイテムにマウスオーバーし、「その他のアクション」アイコン
をクリックします。「メニューから削除 / メニューから非表示」を選択します。 - メニューを並べ替える：該当するアイテムにマウスオーバーし、横の「並び替え」アイコン
を長押しし、希望の位置までドラッグします。
- さらにメニューアイテムを追加する：
ログインバーをデザインする
サイトのテーマに合わせてログインバーのデザインをカスタマイズします。色、フォント、枠線などを変更して、一貫した外観を作成できます。
Wix エディタ
Wix Studio エディタ
- エディタにアクセスします。
- ページ上の「ログインバー」パーツをクリックします。
- 「デザイン」アイコン
をクリックします。
- 「通常時」タブをクリックし、下記のオプションを使用してデザインをカスタマイズします：
- 色・不透明度：ログインバーのアイコン、背景、通知の色と不透明度を変更します。
- 枠線：ログインバーとメニューの枠線の色、不透明度、太さを変更します。
- 角：ログインバーとメニューの角の丸みを変更します。半径が大きいほど、角が丸くなります。
- 影：ログインバーとメニューに影を追加してデザインします。
- テキスト：ログインバーとメニューのテキストの色とフォントを変更します。
- 「ホバー」と「選択中」タブをクリックして、サイト会員がテキストにマウスオーバーまたは選択した際のテキストの色を変更します。