メニューの項目にマウスオーバーするか項目をクリックすると、ドロップダウンメニュー (サブメニュー) に追加項目が表示されます。これらはメニューをきれいに整理された状態に保つのに役立ちます。このガイドでは、ドロップダウンメニューの作成方法について説明します。
ドロップダウンメニューを作成するには次の手順を実行します。
📌
このガイドのどのセクションに従えば良いか決めるには、「ダッシュボード」にアクセスし、左側の「外観」の下を確認します。「エディター」が表示されている場合は、このガイドのサイトエディターのセクションを参照してください。それ以外の場合は、WP 管理画面またはカスタマイザーの手順を参照してください。
サイトエディターでは、メニューは「ナビゲーション」ブロックから取得されます。ドロップダウンメニューを作成するには次の手順を実行します。
- ダッシュボードから「外観」→「エディター」の順に移動します。
- 編集する「テンプレート」または「テンプレートパーツ」を選択するか、画面右側のサイトのプレビューをクリックしてホームページエディターを開きます。
- 画面の左上にある「リスト表示」を開きます (3本の水平線が縦に並んだアイコンです)。
- 「ナビゲーション」ブロックを選択します (このブロックは「ヘッダー」、「グループ」、「横並び」など、他のブロックの中にネストされている場合があります)。
- 右側のサイドバー設定でメニュー項目にカーソルを合わせ、表示される3つの点をクリックします。
- 右側にサイドバーが表示されない場合、右上の「設定」アイコンをクリックして設定を表示させます。幅の異なる2つの列から成る正方形のアイコンです。
- 「サブメニューを追加」リンクをクリックします。
- ドロップダウンに表示する最初のページを選択します。
- すべてのメニュー項目を追加し終わるまで繰り返します。
- 「保存」をクリックして、変更を保存します。
または、ナビゲーションブロックのツールバーを使用してドロップダウンメニューを作成できます。
- ドロップダウンにするメニュー項目をクリックします。
- メニュー項目の上にツールバーが表示されます。そこには「サブメニューを追加」ボタン (曲線矢印と3本の水平線が横に並んだような形のアイコン) があります。
- ツールバーの「サブメニューを追加」ボタンをクリックすると、そのメニュー項目がドロップダウンメニューに変換されます。
- 表示された 「+」 アイコンまたは
「リンクを追加」オプションをクリックすると、新しいドロップダウンメニューに新しいリンクが追加されます。 - 「保存」をクリックし、変更を保存します。
ドロップダウンメニューの作成時に役立つ、「クリックできない」メニュー項目を作成できます。それには、メニュー項目のリンクとして # 記号を使用します。この項目はまだクリックできますが、新しいページには移動しません。「クリックできない」メニュー項目を作成するには、次の手順を実行します。
📌
このガイドのどのセクションに従えば良いか決めるには、「ダッシュボード」にアクセスし、左側の「外観」の下を確認します。「エディター」が表示されている場合は、このガイドのサイトエディターのセクションを参照してください。それ以外の場合は、WP 管理画面またはカスタマイザーの手順を参照してください。
サイトエディターでは、メニューは「ナビゲーション」ブロックから取得されます。クリックできないメニュー項目を作成するには、次の手順に従います。
- ダッシュボードから「外観」→「エディター」の順に移動します。
- 編集する「テンプレート」または「テンプレートパーツ」を選択するか、画面右側のサイトのプレビューをクリックしてホームページエディターを開きます。
- 画面の左上にある「リスト表示」を開きます (3本の水平線が縦に並んだアイコンです)。
- 「ナビゲーション」ブロックを選択します (このブロックは「ヘッダー」、「グループ」、「横並び」など、他のブロックの中にネストされている場合があります)。
- 「+」ブロック挿入ツールをクリックして、新しいメニュー項目を追加します。
- 表示されるウィンドウで「ブロックを追加」をクリックし、「カスタムリンク」オプションを選択します。
- # 記号を入力し、キーボードで Enter または Return を押します。
- 鉛筆アイコンをクリックして新しいメニュー項目を編集します。メニュー項目に表示する内容を「テキスト」フィールドに入力します。クリックできないリンクにするには、「リンク」フィールドには # 記号のみを入力した状態にします。
- 「保存」ボタンをクリックして変更を送信します。

既存のメニューリンクを編集してクリックできないようにすることも可能です。既存のメニュー項目をクリックすると、メニュー項目の上にツールバーが表示され、「リンク」ボタン (鎖の輪のような形のアイコン) が表示されます。メニュー項目を編集し、現在のリンクを # 記号に置き換えます。以下の GIF は、このプロセスを説明しています。



コメントを投稿するにはログインしてください。