ナビゲーションバー

ナビゲーションバー

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

概要

整理されたWebサイトのナビゲーションは、スムーズで直感的なユーザーエクスペリエンスを提供するうえで重要です。Zoho Backstageを使うと、Webサイトのナビゲーションメニューやボタンを簡単に作成・整理・カスタマイズでき、訪問者が必要な情報にすばやくアクセスできるようにできます。
このガイドでは、次のようなナビゲーション要素の管理手順を順を追って説明します。
  1. 関連するコンテンツを効果的にまとめるために、メニューやサブメニューを追加・整理する。
  2. 内部ページや外部Webサイトへのリンクを設定する。
  3. ナビゲーションバーを整理して最新の状態に保つために、リンクを並べ替えたり、非表示にしたり、削除したりする。
  4. インタラクションを高めるために、ボタンのスタイル、色、動作をカスタマイズする。
  5. Webサイトのブランディングやスタイルに合わせて、ナビゲーションバーのレイアウトを設計する。

Webサイトのナビゲーションを最適化することで、使いやすさを向上させ、訪問者をより効果的に誘導し、洗練されたプロフェッショナルなイベントWebサイトを作成できます。

リンク

リンク／メニューを追加する


  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。Webサイトデザイナーが開きます。
  3. プレビューサイト上のナビゲーションバーにカーソルを合わせ、⚙️の設定アイコンをクリックします。
  4. [Navigation リンク 設定] パネルで、[リンクを追加 +]ボタンをクリックします。



  5. ナビゲーションバーに表示するリンク名を入力します。
  6. リンク先の種類を選択します。
    1. ページ:ドロップダウンから内部ページを選択して、メニューをそのページにリンクします。
    2. 外部URL:URLを入力して、メニューを外部サイトにリンクします。
      1. （任意）メニューを別タブで開きたい場合は、[新しいタブで開く]を選択します。
  7. [保存]をクリックします。
  8. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。

入れ子リンク／サブメニューを追加する


  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. [Navigation リンク 設定]パネルで、サブメニューを追加したいメインメニューの横にあるメニューアイコンをクリックします。
  5. ドロップダウンから[サブメニューを追加]を選択します。
  6. リンク名を入力します。
  7. リンク先の種類を選択します。
    1. ページ: ドロップダウンから内部ページを選択してリンクします。
    2. 外部URL: URLを入力して外部Webサイトにリンクします。
      1. （任意）サブメニューを別タブで開きたい場合は、[新しいタブで開く]を選択します。
  8. [保存]をクリックします。
  9. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。

リンク／メニューを編集する


  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。Webサイトデザイナーが開きます。
  3. プレビューサイト上のナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。[Navigation リンク 設定]パネルが表示されます。
  4. 編集したいリンクの横にあるメニューアイコンをクリックし、ドロップダウンから[編集]を選択します。
  5. ナビゲーションバーに表示するリンクの名前を変更します。
  6. リンク先の種類を選択します。
    1. ページ: ドロップダウンから内部ページを選択してリンクします。
    2. 外部URL: テキストボックスにURLを入力して外部Webサイトにリンクします。
      1. （任意）リンクを別タブで開きたい場合は、[新しいタブで開く]を選択します。
  7. [保存]をクリックします。
  8. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。
Info
  1. ホームページは、名前の変更や非表示、URLの変更はできません。
  2. ナビゲーションバーからリンクを削除しても、リンク先のページ自体は削除されません。ページは左側ペインの[ページ]タブから引き続きアクセスできます。

サブメニューをメインメニューに移動する


  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. [Navigation Links]をクリックします。[Navigation リンク 設定]パネルが表示されます。
  5. サブメニューのリンクをドラッグ＆ドロップして、メインメニューのセクションに戻します。
    1. または、サブメニューの横にあるメニューアイコン（⋮）をクリックし、[メインメニューに移動]を選択します。
  6. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。
  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. [Navigation Links]をクリックします。
  5. [Navigation リンク 設定]パネルで、リンクやメニューの横にあるチョコレートアイコンをクリックしてドラッグし、並べ替えます。
  6. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。

リンク／メニューを非表示にする

  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. [Navigation Links]をクリックします。
  5. [Navigation リンク 設定]パネルで、非表示にしたいリンクまたはメニューを探します。
  6. リンクまたはメニューの横にある目のアイコンをクリックします。
    1. 目のアイコンが青の場合、そのリンクは非表示です。クリックすると再び表示されます。
    2. 目のアイコンが黒の場合、そのリンクは表示されています。クリックするとリンクが非表示になります。

Info
リンクまたはメニューを非表示にすると、そのリンク先ページに関連付けられているボタンも、Webサイト全体で非表示になります。

リンク／メニューを削除する


  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. [Navigation Links]をクリックします。
  5. [Navigation リンク 設定]パネルで、削除したいリンクまたはメニューの横にあるメニューアイコンをクリックします。
  6. ドロップダウンから[削除]を選択します。
  7. ポップアップで削除を確定します。
  8. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。
Info
リンクまたはメニューを削除しても、削除されるのはナビゲーションバー上の項目のみです。

ボタン

新しいボタンを追加する
  1. Dockで[Design > Webサイト]に移動します。
  2. [Webサイトを編集]をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. [Navigation Buttons]をクリックします。
  5. [新しいボタンを追加]をクリックします。新しいボタンが下部に一覧表示されます。
  6. [再公開]をクリックして、変更内容をイベントWebサイトに反映します。

ボタンを設定する


  1. Dock で［デザイン > ウェブサイト］に移動します。
  2. ［ウェブサイトを編集］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、［設定］アイコンをクリックします。
  4. ［ナビゲーションボタン］をクリックします。
  5. ［ナビゲーションボタン］パネルで、編集したいリンクまたはメニューの［編集］アイコンをクリックします。 ［ボタン設定］パネルが表示されます。
  6. ［設定］タブに移動します。
  7. ドロップダウンからボタン種別を選択します。選択した種別に応じて、次のボタンタイプと設定が表示されます。



    1. 今すぐ登録する:参加者を登録ページに誘導し、参加枠を確保してもらいます。
      1. ボタンテキスト
      2. 代替登録リンク（任意）
    2. お問い合わせ:訪問者がワンクリックで簡単に連絡できるようにします。
      1. ボタンテキスト
    3. カレンダーに追加:参加者がイベントの日付を自分のカレンダーに保存できるようにします。
      1. ボタンテキスト
    4. アジェンダを印刷:訪問者がイベントスケジュールをダウンロードまたは印刷できるようにします。
      1. ボタンテキスト
    5. 経路を確認:インタラクティブマップでイベント会場の場所を参加者に案内します。
      1. ボタンテキスト
    6. カスタム:［カスタム］オプションでは、複数のリンク設定を利用できます。
      1. ページの場合: ページを選択するドロップダウンが表示されます。
      2. 外部 URLの場合: URL を入力し、新しいタブで開くかどうかを選択します（チェックボックス）。
      3. スピーカーの場合: 設定済みのすべてのスピーカーが表示されるドロップダウンが表示されます。
      4. セッションの場合: 予定されているすべてのセッションが表示されるドロップダウンが表示されます。
      5. スポンサーの場合: 確定済みのすべてのスポンサーが表示されるドロップダウンが表示されます。
      6. イベント一覧の場合: イベント一覧ページにリダイレクトされます。
      7. チケットの場合: チケットクラスセレクタードロップダウンが表示され、登録ポップアップが表示されたときに購入者に自動的に適用するチケットクラスを選択できます。アクセスコードまたはプロモコードを含めるかどうかも選択できます。
    7. スポンサーになる:個人や企業に、イベントの協賛やパートナーシップを依頼します。
      1. ボタンテキスト
    8. カスタムフォームにリンク:参加者が問い合わせ、フィードバック、その他の目的のためのフォームに入力できるようにします。
      1. カスタムフォームの選択
      2. ボタンテキスト
    9. 出展者になる:団体がイベントで自社製品を展示できるよう促します。
      1. ボタンテキスト
    10. アブストラクトを送信:ユーザーがイベント向けのアブストラクトを送信できるようにします。
      • ボタンテキストを設定します。
    11. サインイン:ユーザーが自分のアカウントにログインできるようにします。
      1. ボタンテキスト
    12. 言語:訪問者が利用可能な言語間で切り替えられるようにします。
      1. 追加の設定はありません。
  8. ［保存］をクリックします。
  9. ［再公開］をクリックして、イベントウェブサイトに変更を反映します。

ボタンのデザイン
  1. Dock で［デザイン > ウェブサイト］に移動します。
  2. ［ウェブサイトを編集］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、［設定］アイコンをクリックします。
  4. ［ナビゲーションボタン］をクリックします。
  5. ［ナビゲーションボタン］パネルで、編集したいリンクまたはメニューの［編集］アイコンをクリックします。［ボタン設定］パネルが表示されます。
  6. ［デザイン］タブに移動します。
  7. 必要な変更を行います。



    1. ボタンサイズ: Tiny、Small、Medium から選択します。
    2. ボタンスタイル: Filled、Ghost、Link から選択します。
    3. ボタンの色:
      1. Filledスタイルの場合:
        1. テキスト色と背景色をカスタマイズします。
        2. 枠線オプションをオン／オフに切り替えます。
          1. オンの場合、枠線の太さと枠線の色を調整できます。
          2. オフの場合、枠線の設定は非表示になります。
      2. Ghostスタイルの場合:
        1. テキスト色のみをカスタマイズします。
        2. 枠線オプションをオン／オフに切り替えます。
          1. オンの場合、枠線の太さと枠線の色を調整できます。
          2. オフの場合、枠線の設定は非表示になります。
      3. Linkスタイルの場合:
        1. テキスト色のみをカスタマイズできます。
  8. 変更内容は自動的に反映されます。
  9. ［再公開］をクリックして、イベントウェブサイトに変更を反映します。
Idea
  1. ボタンの背景色は、単色またはグラデーションにカスタマイズできます。［背景色］をクリックして色設定ツールを開き、単色またはグラデーションを選択します。
  2. 同様に、テキスト色をクリックして色を選択し、［選択］をクリックします。
  3. 枠線の色を設定するには、［枠線の色］の横の色をクリックし、色を選択します。

ボタンの並べ替え
  1. Dock で［デザイン > ウェブサイト］に移動します。
  2. ［ウェブサイトを編集］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、［設定］アイコンをクリックします。
  4. ［ナビゲーションボタン］をクリックします。
  5. ［ナビゲーションボタン］パネルで、ボタンの横にあるチョコレートアイコンをクリックしてドラッグし、並び順を変更します。
  6. ［再公開］をクリックして、イベントウェブサイトに変更を反映します。

ボタンの削除
  1. Dock で［デザイン > ウェブサイト］に移動します。
  2. ［ウェブサイトを編集］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、［設定］アイコンをクリックします。
  4. ［ナビゲーションボタン］をクリックします。
  5. ［ナビゲーションボタン］パネルで、削除したいボタンの横にある［削除］アイコンをクリックします。
  6. ［再公開］をクリックして、イベントウェブサイトに変更を反映します。
Info
初期設定に戻すには、［初期設定にリセット］をクリックします。

ナビゲーションバーのデザイン


  1. Dock で［デザイン > ウェブサイト］に移動します。
  2. ［ウェブサイトを編集］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、［設定］アイコンをクリックして、［ナビゲーションバー設定］パネルを開きます。
  4. デザインをカスタマイズします。



    1. ナビゲーションバーのレイアウト - ナビゲーションバー内の要素の配置方法を選択します。6 種類のスタイルから選択できます。
      1. ロゴ - スペース - リンク - ボタン: ロゴとリンクの間にスペースがあり、その後にボタンが続くシンプルなレイアウトです。
      2. ロゴ - リンク - スペース - ボタン: ロゴの後にナビゲーションリンク、スペース、最後にボタンが配置されます。
      3. ロゴ - スペース - リンク - スペース - ボタン: リンクの両側にスペースを配置し、バランスの取れたデザインにします。
      4. ボタン - スペース - リンク - ロゴ: 最初にボタン、その後にスペース、リンク、最後にロゴが表示されます。
      5. ボタン - リンク - スペース - ロゴ: ボタンの後にリンク、スペース、最右端にロゴが表示されます。
      6. ボタン - スペース - リンク - スペース - ロゴ: リンクの両側にスペースを配置し、一方の端にボタン、もう一方の端にロゴを配置します。
    2. アクティブリンクのスタイル - アクティブ（現在選択中）のリンクの表示方法を定義します。次から選択します。
      1. ボックス: アクティブリンクを長方形の背景で強調表示します。
      2. ひし形: アクティブリンクをひし形のような形で表示します。
      3. ピル: アクティブリンクにカプセル状の丸みを帯びた背景を適用します。
      4. 下線: アクティブリンクに下線を表示します。
      5. 上線: アクティブリンクの上部に線を表示します。
      6. 枠線: アクティブリンクの周囲に枠線を表示します。
    3. サブメニューのドロップダウンアイコン - サブメニューのドロップダウンアイコンのスタイルを選択します。
      1. アウトラインの下向き矢印: 標準的な下向き矢印アイコンです。
      2. 塗りつぶしの下向き矢印: 塗りつぶされた下向き矢印アイコンです。
      3. プラス: 展開可能なコンテンツを示すプラスアイコンです。
    4. メニューの表示方法 - サブメニュー項目の表示方法を選択します。
      1. クリック: クリックしたときのみサブメニューが展開されます。
      2. ホバー: カーソルを合わせるとサブメニューが展開されます。
  5. ナビゲーションバーの色を調整するには、［ナビゲーションバーの色］をクリックします。
    ナビゲーションバー内の各要素の色をカスタマイズします。



    1. 背景: ナビゲーションバー全体の背景色です。
    2. リンクテキスト: ナビゲーションリンクのテキスト色です。
    3. アクティブリンクの背景: アクティブリンクの背景色です。
    4. アクティブリンクのテキスト: アクティブリンクのテキスト色です。
    5. シャドウを追加するには:
      1. ［シャドウ］をオンに切り替えると、ナビゲーションバーの下部に影の効果が追加されます。
      2. デザインに合うシャドウの色を選択します。
  6. ［再公開］をクリックして、イベントウェブサイトに変更を反映します。
ご不明な点がある場合は、support@zohobackstage.com までお問い合わせください。