ナビゲーションブロックを使用する

ナビゲーションブロックは、サイトのメニューを表示して訪問者がページ間を移動できるようにします。このガイドでは、ナビゲーションブロックを追加およびカスタマイズする方法について説明します。

ナビゲーションブロックは通常、サイトのテンプレートに追加され、最も一般的にはヘッダーまたはフッター内に追加されます。

ナビゲーションブロックを追加するには、次の手順に従います。

1. サイトのダッシュボードにアクセスします。
2. 「外観」→「エディター」の順に移動します。
3. 右側のホームページのプレビューをクリックしてホームページを編集するか、ナビゲーションメニューを表示するテンプレートまたはテンプレートパーツ (ヘッダーなど) を選択します。
4. 「+」ブロック挿入をクリックして「ナビゲーション」を検索します。
5. 「ナビゲーション」ブロックをクリックして、サイトに追加します。

ブロックを追加する手順についてはこちらを参照してください。

最初にナビゲーションブロックを追加すると、サイトのメニューが表示されます。まだカスタムメニューを作成していない場合は、自動的に固定ページリストブロックが含まれ、すべての公開済みの固定ページを表示し、新しいページが公開されたときに自動的に更新されます。

表示するページをカスタマイズしたり、カスタムリンクを追加したり、メニュー項目の順序を変更したりする場合、まず固定ページリストブロックを個々のリンクに変換するよう求められます。

固定ページリストブロックを変換するには、次の手順に従います。

1. 「リストビュー」を使用して、ナビゲーションブロック内の「固定ページリスト」ブロックに移動します。

2. ブロックツールバーの「編集」ボタンをクリックします。

3. 固定ページリストが自動的に更新されなくなるという警告が表示されます。「編集」をクリックして確定します。

これで、新しいリンクとページの追加、メニュー項目の削除、メニュー内のリンクの並べ替えができるようになります。

ナビゲーションブロック内の特定のリンクを変更するには、次の手順に従います。

1. 「リストビュー」を使用して、ナビゲーションブロック内でカスタマイズする個々のリンクに移動します。
2. ブロック設定サイドバーで、以下を変更できます。
   • テキスト: ナビゲーションメニューに表示されるテキストラベルを変更します。
   • リンク: 移動先のページまたは URL を更新します。
   • 新しいタブで開く: リンクが新しいタブで開くよう設定するには、ボックスにチェックを入れます。
   • 説明: お使いのテーマがリンクの説明をサポートしている場合に、表示されるテキストを追加します。
   • rel 属性: SEO 目的で「nofollow」のような関係性を設定します。
   • スタイル: スタイルタブをクリックして、フォントのサイズやその他のタイポグラフィ設定を変更します。

3. ブロックツールバーでは、次の操作を実行できます。
   • リンクを変更する: リンクアイコンをクリックして URL を変更するか、新しいタブで開くように設定します。
   • 書式設定を追加する: 太字、斜体、その他のテキスト書式設定オプションを使用します。
   • サブメニューを追加する: サブメニューアイコンをクリックして、ドロップダウンメニューを作成します。
   • リンクを移動する: 左右の矢印を使用して、メニュー内のリンクの位置を変更します。

メニュー項目の管理の詳細については、「メニュー項目を編集する」を参照してください。

複数のメニューを作成した場合は、ナビゲーションブロックに別のメニューを選択できます。

次の手順に従って、別のメニューを選択します。

1. リストビューを使用して、「ナビゲーション」ブロックを選択します。
2. ブロック設定サイドバーで、「メニュー」の横の (⋮) をクリックします。

3. 次のオプションから選択します。
   • メニュー: 作成済みの既存のメニューから選択します。
   • クラシックメニューをインポート: ブロックエディターで使用するために、WordPress のクラシックメニューを変換します。このオプションが表示されるのは、変換できる WordPress のクラシックメニューがある場合のみです。
   • メニューを新規作成: 完全に新しいメニューで新たに始めます。

メニュー管理の詳細については、リンクの追加、ドロップダウンの作成、項目の並べ替えについてのガイドを参照してください。

ナビゲーションブロックの訪問者への表示方法をカスタマイズするには、次の手順に従います。

1. リストビューを使用して、「ナビゲーション」ブロックを選択します。
2. ブロック設定サイドバーで、設定アイコンをクリックします。

3. 「レイアウト」設定を調整します。
   • 配置: 左揃え、中央揃え、右揃え、項目間の等間隔を選択します。
   • 方向: 水平 (デフォルト) または垂直のメニューレイアウトを選択します。
   • 複数行への折り返しを許可: ナビゲーションを1行に保つにはオフに切り替えます。
4. 「表示」設定を構成します。
   • アイコンボタンを表示: ハンバーガー型アイコンを表示する場合はオンに、「メニュー」テキストを表示する場合はオフに切り替えます。
   • アイコン: ハンバーガー型アイコンの2本または3本の水平線を選択します。
   • オーバーレイメニュー: 「オフ」 、 「モバイル」 (デフォルト )、「常に」 のいずれかを選択し、メニューがオーバーレイに折りたたまれるタイミングを制御します。オーバーレイテンプレートをデザインして、モバイルメニューのオーバーレイの外観をカスタマイズします。
5. サブメニューがある場合は、「サブメニュー」の動作を調整します。
   • クリックして開く: サブメニューをクリックして開く場合はオン、マウスオーバーで開く場合はオフに切り替えます。
   • 矢印を表示: オンにすると、サブメニューの存在を示す矢印が表示されます。

その他のメニューカスタマイズオプションについては、「メニューデザインをカスタマイズする」を参照してください。

ナビゲーションブロックの外観をカスタマイズするには、次の手順に従います。

1. リストビューを使用して、「ナビゲーション」ブロックを選択します。
2. ブロック設定サイドバーで、「スタイル」アイコンをクリックします。

3. 次を使用して外観をカスタマイズします。
   • 色設定: テキスト、背景、リンクの色を変更します。
   • タイポグラフィ設定: フォントファミリー、サイズ、太さを調整します。
   • サイズ設定: パディング、マージン、間隔を制御します。

その他のメニュースタイル設定オプションについては、「メニューデザインをカスタマイズする」を参照してください。