ナビゲーションバー

ナビゲーションバー

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

概要

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

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

リンク

リンク／メニューの追加


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



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

入れ子リンク／サブメニューの追加


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

リンク／メニューの編集


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

サブメニューのメインメニューへの移動


  1. ドックから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. ［ナビゲーションリンク］をクリックします。ナビゲーションリンクの設定パネル が表示されます。
  5. サブメニューのリンクをメインメニュー欄にドラッグ＆ドロップします。
    1. または、サブメニューの横にあるメニューアイコン⋮をクリックし、［メインメニューに移動］を選択します。
  6. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。
  1. ドックから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. ［ナビゲーションリンク］をクリックします。
  5. ナビゲーションリンクの設定パネルで、リンクまたはメニューの横にあるチョコレートアイコンをドラッグして順番を変更します。
  6. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。

リンク／メニューの非表示

  1. ドックから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. ［ナビゲーションリンク］をクリックします。
  5. ナビゲーションリンクの設定パネルで、非表示にするリンクまたはメニューを見つけます。
  6. リンクまたはメニューの横にある目のアイコンをクリックします。
    1. 目のアイコンが青色の場合、リンクは非表示です。リンクを再表示するには、アイコンをクリックします。
    2. 目のアイコンが黒色の場合、リンクは表示されています。リンクを非表示にするには、アイコンをクリックします。

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

リンク／メニューの削除


  1. ドックから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. ［ナビゲーションリンク］をクリックします。
  5. ナビゲーションリンクの設定パネルで、削除するリンクまたはメニューの横にあるメニューアイコンをクリックします。
  6. ドロップダウンから［削除］を選択します。
  7. ポップアップで削除を確認します。
  8. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。
Info
リンクまたはメニューを削除しても、ナビゲーションバーから削除されるだけです。

ボタン

新規ボタンの追加
  1. ドックから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  3. ナビゲーションバーにカーソルを合わせ、設定アイコンをクリックします。
  4. ［ナビゲーションボタン］をクリックします。
  5. ［新規ボタンを追加する］をクリックします。新しいボタンが下に表示されます。
  6. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。

ボタンの設定
  1. Dockから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  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. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。

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



    1. ［ボタンのサイズ］：［極小］、［小］、［中］から選択してください。
    2. ［ボタンのスタイル］：［塗りつぶし］、［ゴースト（透過）］、［リンク］から選択してください。
    3. ［ボタンの色］。
      1. ［塗りつぶし］スタイルの場合。
        1. ［テキストの色］と［背景の色］をカスタマイズします。
        2. ［罫線］の選択肢をオンまたはオフに切り替えます。
          1. オンの場合、［罫線の太さ］と［罫線の色］を調整できます。
          2. オフの場合、罫線の設定は非表示になります。
      2. ［ゴースト（透過）］スタイルの場合。
        1. ［テキストの色］のみをカスタマイズします。
        2. ［罫線］の選択肢をオンまたはオフに切り替えます。
          1. オンの場合、［罫線の太さ］と［罫線の色］を調整できます。
          2. オフの場合、罫線の設定は非表示になります。
      3. ［リンク］スタイルの場合。
        1. ［テキストの色］のみカスタマイズできます。
  8. 変更は自動的に反映されます。
  9. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。
Idea
  1. ボタンの背景色は、単色またはグラデーションにカスタマイズできます。［背景の色］をクリックして色の設定ツールを開き、［単色］または［グラデーション］を選択してください。
  2. 同様に、テキストの色をクリックして色を選択し、［選択］をクリックします。
  3. 罫線の色を設定するには、［罫線の色］の横にある色をクリックし、色を選択します。

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

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

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


  1. Dockから［デザイン］→［Webサイト］に移動します。
  2. ［Webサイトを編集する］をクリックします。
  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. 変更をイベントのWebサイトに反映するには、［再公開］をクリックします。
ご不明な点がございましたら、support@zohobackstage.comまでお問い合わせください。