サイト会員:ログインバーとメニューをカスタマイズする

読了時間:8分
この記事では、現在一部のユーザー様のみご利用いただける会員エリアアプリの新しいバージョンについて説明します。以前のバージョンを使用している場合は、こちらの情報をお読みください。お使いのバージョンを確認するにはこちら
サイト会員が会員エリアにログインする際にクリックするログインバーと、表示されるメニューをカスタマイズします。メニューに表示するタブとリンクを決定し、レイアウトを調整し、サイトの他の部分に合わせてパーツをデザインします。
この記事では、以下の項目について説明します:
ヒント:
ログインバーパーツは、会員エリアアプリの一部として自動的にサイトに追加されます。また、追加パネルの「コミュニティ」下にもあります。

ログインバーを設定する

ログインバーに表示する情報を選択し、テキストをカスタマイズし、親しみやすい雰囲気のあいさつを追加します(例:「こんにちは、鈴木さん!」)。
Wix エディタ
Wix Studio エディタ
  1. エディタでログインバーをクリックします。
  2. ログインバーの設定」をクリックします。
  3. レイアウトを選択」下でログインバーに表示する内容を選択します:
    • アバター:サイト会員のプロフィール写真のみが表示されます。
    • 名前:サイト会員の名前のみが表示されます。
    • イニシャル:サイト会員のイニシャルが姓・名に基づいて表示されます。
    • アバターと名前:サイト会員のプロフィール写真と名前が表示されます。
  4. (オプション)「メッセージを名前の前に表示」トグルを有効にして、サイト会員の名前の前にメッセージを追加し、メッセージを記入します。
    注意:このオプションは、「名前」および「アバターと名前」レイアウトでのみ使用できます。
  5. ログインバーのテキストを編集します:
    • ログイン前のテキスト設定:サイト会員がログインする前に表示されるテキストを編集します。これにより、サイト訪問者に何をすべきか(例:新規登録、ログイン)を知らせることができます。
    • ログアウトのテキスト設定:サイト会員がアカウントからログアウトする際にクリックするテキストを編集します。
Wix エディタのログインバー設定パネル

ログインバーのメニューを管理する

ログインしているサイト会員がログインバーをクリックすると、ドロップダウンメニューが表示されます。ログインバーメニューはフルカスタマイズが可能で、サイト会員用メニューからは完全に独立しています。このメニューを表示する会員タブまたはページを選択してください。
ヒント:
サイト会員用メニューにはタブのみを表示できますが、ログインバーメニューは非公開のサイト会員ページを含むどこにでもリンクできます。
Wix エディタ
Wix Studio エディタ
  1. エディタでログインバーをクリックします。
  2. メニューを管理」をクリックします。
  3. 次に実行する内容を選択します:
    • さらにメニューアイテムを追加する
      1. 下部で「メニューアイテムを追加」をクリックします。
      2. リンク」をクリックします。
      3. リンク先(例:サイトページ、外部ウェブアドレスなど)を選択し、利用可能なオプションを使用して設定します。
      4. 完了」をクリックします。
    • メニューアイテムの名前を変更する:メニューアイテムをダブルクリックして、新しい名前を入力します。
    • メニューアイテムを削除する:タブにマウスオーバーし、「その他のアクション」アイコン  をクリックして、「削除 / メニューから非表示」にします。
    • メニューを並べ替える:該当するアイテムにマウスオーバーし、「並び替え」アイコン  を長押しし、希望の位置までドラッグします。
Wix エディタのログインバーメニューの「メニューを管理」パネル

ログインバーとメニューをデザインする

サイトのスタイルに合わせて、ログインバーとサイト会員用メニューのデザインをカスタマイズします。色やフォント、枠線などを変更できます。
Wix エディタ
Wix Studio エディタ
  1. エディタでログインバーをクリックします。
  2. デザイン」アイコン  をクリックします。
  3. 通常時」タブをクリックし、下記のオプションを使用してデザインをカスタマイズします:
    • 不透明度・色:ログインバーのアイコン、背景、通知の色と不透明度を変更します。
    • 枠線:ログインバーとメニューの枠線の色、不透明度、太さを変更します。
    • :ログインバーとメニューの角の丸みを変更します。半径が大きいほど、角が丸くなります。
    • :ログインバーとメニューに影を追加してデザインします。
    • テキスト:ログインバーとメニューのテキストの色とフォントを変更します。
  4. ホバー」タブと「選択中」タブをクリックして、サイト会員がテキストにマウスオーバーまたは選択した際のテキストの色を選択します。
ログインバーとメニューをカスタマイズできるログインバーのデザインパネルのスクリーンショット

ログインバーとメニューのレイアウトを調整する

ログインバーのレイアウトと表示されるドロップダウンメニューを調整します。ログインバーに表示するアイコンの選択、サイズの変更、テキストの配置の設定などができます。
注意:
利用可能なオプションは、ログインバー設定パネルで選択したレイアウトによって異なります。
Wix エディタ
Wix Studio エディタ
  1. エディタでログインバーをクリックします。
  2. レイアウト」アイコン  をクリックします。
  3. 次のオプションを使用してレイアウトを調整します:
    • アバターサイズ:スライダーをドラッグして、ログインバーに表示されるサイト会員のプロフィール写真のサイズを変更します。
    • 矢印の形:訪問者がクリックしてログインバーメニューを開く矢印の形を選択します。「矢印のサイズ」スライダーで矢印のサイズを調整します。
    • 配置:ログインバーメニューのテキストの配置方法を中央、またはから選択します。
    • ログインバーの配置:ログインバーのアバター、名前、矢印を左から右に配置するか、右から左に配置するかを選択します。
Wix エディタのログインバーレイアウトパネル

お役に立ちましたか?

|