- ナレッジベース
- コンテンツ
- ウェブサイト/ランディングページ
- サイトのナビゲーションメニューを設定
サイトのナビゲーションメニューを設定
更新日時 2025年10月8日
以下の 製品でご利用いただけます(別途記載されている場合を除きます)。
ウェブサイトを作成する際には、コンテンツの情報アーキテクチャーを編成することに時間を割きます。ナビゲーションメニューには、ウェブサイト訪問者がサイトを閲覧中に素早く、あるいは頻繁にアクセスする最も重要なページが含まれます。ウェブサイトとメニューを編成整理したら、HubSpotでサイトマップをカスタマイズできます。
新規メニューを作成
メニューには、サイトの重要なページを含めたり、親メニュー項目と子メニュー項目を使用してページを階層構造にしたりできます。これらのメニューは、デザイン マネージャー ツールのテンプレートの詳細メニューモジュールで選択できます。
設定で新しいメニューを作成するには、次ようにします。
- HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
- 左のサイドバーメニューで、[コンテンツ]>[ナビゲーション]メニューに移動します。デフォルトのメニューには、詳細メニューモジュールのデフォルトのコンテンツが自動的に設定されるページが含まれています。
- [ナビゲーション]ドロップダウンメニューをクリックし、[+メニューを追加]をクリックします。
![ナビゲーションメニュー設定が表示されます。ナビゲーションメニューのドロップダウンメニューの周りにボックスがあり、矢印が[+メニューを追加]オプションを指しています。](https://53.fs1.hubspotusercontent-na1.net/hub/53/hubfs/Knowledge_Base_2023-24-25/KB-website-and-landing-pages/website-and-landing-pages-navigation-menus-add-menu.png?width=550&height=219&name=website-and-landing-pages-navigation-menus-add-menu.png)
- 既存の詳細メニューのコピーを作成するには、右上の[その他]ドロップダウンメニューをクリックし、[複製]を選択します。
グローバル コンテンツ エディターで新しいメニューを作成するには、次のようにします。
-
目的のコンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- ブログ:HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
- ページまたは投稿の名前をクリックするか、右上の[作成]をクリックします。
- コンテンツエディターで、siteTreeIcon content icon and then click the globalGroupIcon global content icon for the global module.をクリックします。
- グローバル コンテンツ エディターでsiteTreeIconコンテンツアイコンをクリックし、ナビゲーションメニューを含むモジュールをクリックします。
- サイドバーエディターで、[メニュー]フィールドの下にある[新規作成]をクリックします。
- ダイアログボックスで、さらにメニュー項目、ページ、子ページを追加します。グローバル コンテンツ エディターでのコンテンツの編集について詳細をご確認ください。
- 完了したら、[[#]件のアセットに公開]をクリックします。
メニュー項目を追加
設定またはグローバル コンテンツ エディターの中で、ナビゲーションメニューにメニュー項目を追加できます。子メニュー項目を追加することもできます。
設定でメニュー項目を追加するには、次のようにします。
- HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
- 左のサイドバーメニューで、[コンテンツ]>[ナビゲーション]メニューに移動します。
- ナビゲーション ドロップダウン メニューをクリックし、更新する既存のメニューを選択します。
- 既存のナビゲーションメニューの最下部にある[+メニュー項目を追加]ドロップダウンメニューをクリックし、オプションを選択します。
- リンクなしの項目を追加:既存のページにリンクしていないメニュー項目を追加します。これは、子メニュー項目のプレースホルダー(仮挿入)として使用されます。
- ページリンクを追加:特定のHubSpotページにリンクしているメニュー項目を追加します。
- URLパラメーターを含むページリンクを追加:特定のHubSpotページにリンクしているメニュー項目を追加します。このオプションを使用すると、望むページの正確なURLを入力することができます。
- URLリンクを追加:外部URLにリンクしているメニュー項目を追加します。
- メニュー項目を並べ替えるには、メニュー項目の横にあるdragHandleIconドラッグ ハンドル アイコンをクリックし、それを新しい位置にドラッグします。
- メニュー項目のURLリンクを新しいウィンドウで開くには、そのメニュー項目の右側にマウスポインターを置き、[アクション]ドロップダウンメニューをクリックして、[リンクを新しいウィンドウで開く]チェックボックスを選択してオンにします。
- 子メニュー項目を追加するには、メニュー項目の右側にマウスポインターを置き、[アクション]ドロップダウンメニューをクリックして、[以下に子項目を追加]を選択します。
- [メニュー項目ラベル]フィールドにメニュー項目の名前を入力します。
- [ページを選択]ドロップダウンメニューをクリックして、リンクするページを選択します。URLを手動で入力する場合は、[アクション]をクリックし、[URLリンク]を選択して、子メニューの項目タイプを変更します。
- 完了したら、右上の[保存]をクリックします。
グローバル コンテンツ エディターでメニュー項目を追加するには、次のようにします。
- 目的のコンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- ブログ:HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
- ページまたは投稿の名前をクリックするか、右上の[作成]をクリックします。
- コンテンツエディターでsiteTreeIconコンテンツアイコンをクリックした後、グローバルモジュールのglobalGroupIconグローバル コンテンツ アイコンをクリックします。
- グローバル コンテンツ エディターでsiteTreeIconコンテンツアイコンをクリックし、ナビゲーションメニューを含むモジュールをクリックします。サイドバーエディターで[編集]をクリックします。
- ダイアログボックスで、既存のナビゲーションメニューの最下部にある[+メニュー項目を追加]ドロップダウンメニューをクリックし、オプションを選択します。
- リンクなしの項目を追加:既存のページにリンクしていないメニュー項目を追加します。これは、子メニュー項目のプレースホルダー(仮挿入)として使用されます。
- ページリンクを追加:特定のHubSpotページにリンクしているメニュー項目を追加します。
- URLパラメーターを含むページリンクを追加:特定のHubSpotページにリンクしているメニュー項目を追加します。このオプションを使用すると、望むページの正確なURLを入力することができます。
- URLリンクを追加:外部URLにリンクしているメニュー項目を追加します。
注:URLリンクを追加する際には、httpまたはhttpsのプロトコルを含むURL全体を入力する必要があります。
- メニュー項目を並べ替えるには、メニュー項目の横にあるdragHandleIconドラッグ ハンドル アイコンをクリックし、それを新しい位置にドラッグします。
- メニュー項目のURLリンクを新しいウィンドウで開くには、そのメニュー項目の右側にマウスポインターを置き、[アクション]ドロップダウンメニューをクリックして、[リンクを新しいウィンドウで開く]チェックボックスを選択してオンにします。
- 子メニュー項目を追加するには、メニュー項目の右側にマウスポインターを置き、[アクション]ドロップダウンメニューをクリックして、[以下に子項目を追加]を選択します。
![グローバル コンテンツ エディターで、ナビゲーションメニューを編集するためのダイアログボックスが表示されます。[アクション]ドロップダウンメニューの周囲にボックスがあり、矢印が[以下に子項目を追加]オプションを指しています。](https://53.fs1.hubspotusercontent-na1.net/hub/53/hubfs/Knowledge_Base_2023-24-25/KB-website-and-landing-pages/website-and-landing-pages-navigation-menu-add-child-item.png?width=550&height=375&name=website-and-landing-pages-navigation-menu-add-child-item.png)
-
- [メニュー項目ラベル]フィールドにメニュー項目の名前を入力します。
- [ページを選択]ドロップダウンメニューをクリックして、リンクするページを選択します。URLを手動で入力する場合は、[アクション]をクリックし、[URLリンク]を選択して、子メニューの項目タイプを変更します。
- 完了したら、[保存]をクリックします。
- 変更内容を適用するには、右上の[[#]件のアセットに公開]をクリックします。
セカンダリーメニューを作成する
サイトに複数のメニューを作成できます。セカンダリーメニューを特定のページで使用するか、あるいはページフッターに追加のナビゲーションを提供することができます。
設定でセカンダリーメニューを作成するには、次のようにします。
- HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
- 左のサイドバーメニューで、[コンテンツ]>[ナビゲーション]メニューに移動します。
- [ナビゲーション]ドロップダウンメニューをクリックして、[+新規追加]をクリックします。
- ナビゲーションメニューの名前を入力します。
- 次に、メニュー項目を追加するための手順を完了します。
グローバル コンテンツ エディターでセカンダリーメニューを作成するには、次のようにします。
-
目的のコンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- ブログ:HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
- ページまたは投稿の名前をクリックするか、右上の[作成]をクリックします。
- コンテンツエディターで、siteTreeIcon content icon and then click the globalGroupIcon global content icon for the global module.をクリックします。
- グローバル コンテンツ エディターでsiteTreeIconコンテンツアイコンをクリックし、ナビゲーションメニューを含むモジュールをクリックします。サイドバーエディターで、[新規作成]をクリックします。
- 次に、メニュー項目を追加するための手順を完了します。
メニューの変更履歴を表示する
以前に公開したバージョンのメニューを変更履歴に表示および復元することができます。バージョンごとに作成日、タイムスタンプ、変更履歴の作成ユーザーが含まれます。
設定でメニューの変更履歴を表示するには、次のようにします。- HubSpotアカウントにて、上部のナビゲーションバーに表示される設定アイコンsettingsをクリックします。
- 左のサイドバーメニューで、[コンテンツ]>[ナビゲーション]メニューに移動します。
- ナビゲーション ドロップダウン メニューをクリックし、更新する既存のメニューを選択します。
- [その他]ドロップダウンメニューをクリックし、[変更履歴を表示]を選択します。
- ダイアログボックスの左側の列で、タイムスタンプをクリックすると、その日時のメニューの内容を確認できます。
- 以前に公開したバージョンのメニューを復元するには、左下の[選択]をクリックします。
- 完了したら、[保存]をクリックします。
- 目的のコンテンツに移動します。
- ウェブサイトページ:HubSpotアカウントにて、[コンテンツ]>[ウェブサイトページ]の順に進みます。
- ランディングページ:HubSpotアカウントにて、[コンテンツ]>[ランディングページ]の順に進みます。
- ブログ:HubSpotアカウントにて、[コンテンツ]>[ブログ]の順に進みます。
- 既存のページまたは投稿の名前をクリックします。
- コンテンツエディターでsiteTreeIconコンテンツアイコンをクリックした後、グローバルモジュールのglobalGroupIconグローバル コンテンツ アイコンをクリックします。
- グローバル コンテンツ エディターでsiteTreeIconコンテンツアイコンをクリックし、ナビゲーションメニューを含むモジュールをクリックします。サイドバーエディターで[編集]をクリックします。
- ダイアログボックスで、[その他]ドロップダウンメニューをクリックし、左下の[変更履歴を表示]を選択します。ナビゲーションメニューの設定が表示されます。
- ダイアログボックスの左側の列で、タイムスタンプをクリックすると、その日時のメニューの内容を確認できます。
- 以前に公開したバージョンのメニューを復元するには、左下の[選択]をクリックします。
- 完了したら、[保存]をクリックします。