サポートに戻る サイトをデザインする ナビゲーションブロック

ナビゲーションブロック

ナビゲーションブロックには、訪問者がサイト内を移動しやすくなるリンクのメニューが表示されます。このガイドではその使用方法について説明します。

ナビゲーションブロックを追加する

ナビゲーションブロックを追加するには、「+」ブロック挿入アイコンをクリックして「ナビゲーション」を検索します。クリックしてブロックを投稿またはページに追加します。

💡

キーボードを使用して新しい行に「/navigation」と入力して Enter キーを押すことで、新しいナビゲーションブロックをすばやく追加することもできます。

エディターの空白スペースでスラッシュの後に「navigation」という文字を入力すると、一致するブロックタイプが表示され、追加されます。
ナビゲーションブロックを追加するには、エディターに「/navigation」と入力します。

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

ブロックにコンテンツを追加する

投稿やページに初めてナビゲーションブロックを追加する場合は、その投稿やページが空になっているか、サイトですでに公開されているページへのリンクが表示されている可能性があります。「+」ブロック挿入アイコンをクリックしてメニューにリンクを追加し、次のオプションから選択します。

  • サイトに公開されているページ、投稿、カテゴリー、商品、その他のコンテンツを検索します。非公開または下書きのコンテンツはここには表示されません。
  • 任意のページにリンクを追加する URL を入力します。
  • サイトのページまたは投稿が最近更新されました
  • サイトロゴブロック – サイトのロゴ。
  • ソーシャルアイコンブロック – ソーシャルメディアのプロフィールにリンクするロゴ。
  • 固定ページリスト – 公開されたすべての固定ページのリスト。
  • 検索ブロック – 訪問者はサイトを検索して探しているページを見つけることができます。
  • ボタンブロック – ボタンスタイルのリンクを追加します。

以下の方法については専用のガイドをご覧ください。

ブロックツールバー

ブロックをクリックすると、ブロックの上に次のオプションのツールバーが表示されます。

ブロックの上に表示されるツールバーには、ブロックタイプの変更、ブロックの位置のドラッグなどのオプションを示すアイコンがある。

ナビゲーションブロックのツールバーには次のオプションがあります。

ナビゲーションブロックの各リンクの上にはツールバーもあります。

ナビゲーションブロック内の1つのリンクに表示されるツールバーには、親ブロックを選択したり、リンクのタイプを変更したりするためのオプションがある。

ブロック設定サイドバー

サイドバーが右側に表示されない場合、右上の設定アイコンをクリックして設定を表示させます。このアイコンは2つの不均一な列がある正方形のような形をしています。

WordPress エディター上部のハイライト表示された設定アイコン。
右上の設定アイコン

ナビゲーションブロックの設定には次の3つのタブがあります。

  • リスト表示
  • 設定
  • スタイル

上記の設定については以下で説明します。

リスト表示

リスト表示を使用してメニュー内の項目を制御します。以下のことが可能です。

3つのドットをクリックしてナビゲーションブロックの別のメニューを選択するか、新しいメニューを作成します。

クラシックメニューがある場合はこちらからインポートできます。クラシックメニューでは、メニュー名の前に「クラシックメニュー:」と表示されます。

ナビゲーションブロックのサイドバー設定には、メニューに項目を追加したり、別のメニューを選択したりするためのオプションがある。

ブロック設定

歯車アイコンをクリックして「ナビゲーション」ブロックの追加設定にアクセスします。

レイアウト

メニューリンク間の配置 (左揃え、中央揃え、右揃え、項目間の等間隔) を選択します。

メニューの向きを設定します。デフォルトは横型ですが、縦型を選択してメニュー項目を上下に表示することもできます。

ナビゲーションを1行で表示する場合は、「複数行への折り返しを許可」をオフにします。

表示

モバイル端末でのナビゲーションの表示方法や、最小限のメニューを使用するかを制御します。グレーのボックスをクリックすると次の設定が表示されます。

  • アイコンボタンを表示: オンに切り替えると世界共通の水平線の「ハンバーガー」アイコンが表示されます。オフに切り替えると「メニュー」という単語が表示されます。
  • アイコン: アイコンのスタイルを選択します。
  • オーバーレイメニューでは、タップまたはクリックしたときにオーバーレイとして開くメニューアイコンにナビゲーションが折りたたまれます。この動作「常時」または「モバイル」の訪問者にのみ有効にするか、メニューを折りたたまない場合は「オフ」にします。

サブメニューを作成した場合は、次の追加オプションが表示されます。

  • クリックして開く: サブメニューのドロップダウンはクリックしたときにのみ開きます。このオプションがオフの場合、サブメニューのあるメニュー項目にマウスオーバーするとドロップダウンが開きます。
  • 矢印を表示: サブメニュー項目を示すために使用する矢印を表示するかどうかを選択します。実際に使われるアイコンはテーマによって決まります。
ブロック設定のサイドバーに、設定アイコンを指す矢印と、ナビゲーションブロックの「レイアウト」と「表示」のオプションが表示されている。

高度な設定

(名前は公開されていない) サイトの編集時に使用されている現在のメニューの名前を変更します。「メニューを削除」をクリックして使用可能なメニューリストからメニューを削除します。「メニューを管理」をクリックして既存のメニューをすべて管理します。

ここでブロックに HTML アンカーCSSクラスを追加することもできます。

ブロックスタイル

ブロック設定サイドバーでスタイルアイコンをクリックし、ブロックのデザイン設定にアクセスします。スタイルアイコンは、半分が塗りつぶされた円の形をしています。

矢印がスタイルアイコンを指している。これをクリックするとブロックスタイルセクションが開く。

以下の設定でメニューのデザインを調整します。

ナビゲーションブロック内の各リンクには追加のカスタマイズオプションがあります。カスタマイズするリンクをクリックすると、サイドバーに「リンク設定」が表示されます。

ラベル

ラベルはナビゲーションメニューに表示されるテキストです。

URL

URL は訪問者を誘導するメニュー項目のリンクまたはページです。

説明

リンクの説明を補足するテーマを使用する場合、ここに追加されたテキストがメニューに表示されます。

タイトル属性

訪問者がリンクの上にマウスオーバーしたときに表示されるツールチップで、スクリーンリーダーにも便利です。

rel 属性

訪問者がアクセスしているページとクリックしているリンクとの関係をブラウザーに伝えます。検索エンジンがインデックスを付けたり、リンクにランキングのクレジットを付与したりしないように nofollow を含める場合に便利です。

Copied to clipboard!