メニューを作成し、リンクを追加したら、メニューの見た目をカスタマイズしたくなるかもしれません。このガイドでは、メニューのデザインを変更するための一般的な方法を紹介します。
サイトエディターテーマでは、ダッシュボードの「外観」にある「エディター」から、サイトのメニューの見た目を自由にカスタマイズできます。クラシックテーマでは、ダッシュボードの「外観」にある「カスタマイザー」で、メニューの見た目に関するオプションを一部利用できます。
このガイドのどのセクションを参照すべきかを判断するには、WordPress.com のダッシュボードにアクセスし、左側の「外観」の下を確認してください。「エディター」が表示されている場合は、このガイドの「サイトエディター」セクションを参照してください。表示されていない場合は、「カスタマイザー」の手順を参照してください。
テーマがサイトエディターを使用している場合 (ダッシュボードに「外観」→「エディター」がある場合)、次のステップに沿ってナビゲーションブロックの設定からメニューのデザインを調整できます。
- サイトのダッシュボードから、「外観」→「エディター」の順に移動します。
- 「テンプレート」を選択し、「ホーム」や「フロントページ」など、メニューを含むテンプレートを選択します。
- 画面の左上にある「リスト表示」を開きます (3本の水平線が上下に並んだアイコンです)。
- リスト表示でナビゲーションブロックを選択します。
- ナビゲーションブロックが表示されない場合は、新しく作成できます。
- 画面右側にある ナビゲーションブロックの設定を開きます。
- 設定アイコンまたはスタイルアイコンから、ナビゲーションブロックのスタイルをカスタマイズします。
- 「保存」ボタンをクリックし、変更を保存してください。
各設定の使い方については、ナビゲーションブロックの設定ガイドをご覧ください。次の内容を紹介しています。
- 色、タイポグラフィ、サイズなど、ナビゲーションブロックのスタイル設定。
- 配置や方向、メニューの表示方法など、ナビゲーションブロックのレイアウト設定。
この動画では、ナビゲーションブロックにアクセスして設定やスタイルを変更する方法を紹介しています。この機能は完全にカスタマイズ可能なサイトエディターテーマで利用できます。再生ボタンをクリックした後、右下のコントロールで動画の速度を調整できます。
このセクションは、AI ウェブサイトビルダーで作成されたサイト (すべての有料プラン) または WordPress エージェントを有効化したサイト (すべての有料プラン) に適用されます。WordPress エージェントを開くには、画面下部の AI アイコン (四芒星) をクリックしてください。
WordPress エージェントは、メニューの見た目や動作を直接変更できます。たとえば、次のようなリクエストが可能です。
- 「ナビゲーションメニューの色をブランドカラーに合わせて変更して。」
- 「ドロップダウンメニューをホバーではなくクリックで開くように設定して。」
- 「すべての画面サイズでメニューをハンバーガーメニューとして表示するようにして。」
- 「お問い合わせメニュー項目に ‘featured-link’ という CSS クラスを追加して。」
すべてのサイトエディターテーマでメニューの位置を移動できます。サイトエディターテーマでは、「外観」の「エディター」を使用して、サイトのメニュー位置を含むレイアウトを完全に制御できます。
サイトエディターテーマではメニューの位置を自由にカスタマイズできますが、まずは目的の位置にメニューが表示されるテーマを探すのもよいでしょう。テーマの切り替えの詳細についてはこちらをご覧ください。
すでに使用したいサイトエディターテーマを選択していて、メニューの表示位置を変更したい場合は、いくつかの方法があります。
- ナビゲーションブロックの選択と移動の方法を確認するか、動画チュートリアルに進んでください。
- テンプレートに新しいメニューを追加します。
- ページリストブロックを使用して、個別のページや投稿にサイトナビゲーションを追加します。
- 目次ブロックを使用して、ページや投稿内にナビゲーションを追加します。
ダッシュボードの「外観」に「エディター」がないテーマを使用している場合は、完全にカスタマイズ可能なサイトエディターテーマをご検討ください。
デスクトップ画面では、メニューは通常1行に並んだテキストリンクの一覧として表示されます。タブレットやモバイル端末のような小さな画面では、モバイルの訪問者が簡単にタップできる形ですべてのテキストリンクを表示できるだけのスペースがない場合があります。
その代わり、一般的には「オーバーレイメニュー」または「ハンバーガーメニュー」と呼ばれるボタンの中に、メニュー項目をまとめて表示します(「ハンバーガーメニュー」は、3本の水平線がハンバーガーに似ていることから名付けられています)。
サイトエディターのナビゲーションブロック設定から、オーバーレイメニューの表示を調整できます。オーバーレイメニューの表示をカスタマイズするには、次の手順に従ってください。
- サイトのダッシュボードから、「外観」→「エディター」の順に移動します。
- 「テンプレート」を選択し、「ホーム」や「フロントページ」など、メニューを含むテンプレートを選択します。
- 画面の左上にある「リスト表示」を開きます (3本の水平線が上下に並んだアイコンです)。
- リスト表示でナビゲーションブロックを選択します。
- 画面右側にあるナビゲーションブロックの設定を開きます。
- 設定アイコン (歯車アイコン) をクリックします。
- 「表示」の下で、オーバーレイメニューの設定を選択します。
- モバイル: デフォルトの設定です。オーバーレイメニューはモバイルサイズの画面でのみ表示されます。
- オフ: オーバーレイメニューをまったく表示しません。
- 常に: 画面サイズに関係なく、常にオーバーレイメニューを表示します。
- オーバーレイテンプレートを使用すると、モバイルで表示されるフルスクリーンオーバーレイのデザインをカスタマイズできます。ナビゲーションオーバーレイのカスタマイズに関するガイドをご覧ください。
- 「保存」ボタンをクリックし、変更を保存してください。
サイトの訪問者は、モバイル端末でアイコンやハンバーガーメニューが表示されることに慣れています。デスクトップメニューをそのまま表示する (つまりオーバーレイメニューをオフにする) と、訪問者がモバイル端末でサイト内を移動しにくくなる可能性があります。
ブロックのすべての機能については、ナビゲーションブロックガイドをご覧ください。
クラシックテーマやサードパーティのテーマでは、モバイル端末でのメニュー表示に独自のデフォルト設定が適用されている場合があります。詳しくは、選択したテーマのドキュメントをご確認ください。
訪問者がメニュー項目にカーソルを合わせたときに開くか、クリックしたときに開くかなど、ドロップダウンメニューの表示方法を設定できます。
サブメニューの表示を設定するには、次の手順に従います。
- サイトのダッシュボードから、「外観」→「エディター」の順に移動します。
- 「テンプレート」を選択し、「ホーム」や「フロントページ」など、メニューを含むテンプレートを選択します。
- 画面の左上にある「リスト表示」を開きます。
- ナビゲーションブロックを選択します。
- ブロック設定サイドバーで、「設定」アイコン (歯車アイコン) をクリックします。
- 「表示」の下にある「サブメニューの表示」設定を見つけ、次のいずれかのオプションを選択します。
- ホバー: 訪問者が親メニュー項目にカーソルを合わせると、ドロップダウンメニューが開きます。必要に応じて、その設定をオフにすると、メニューの横に矢印を表示できます。
- クリック: 訪問者が親メニュー項目をクリックすると、ドロップダウンメニューが開きます。
- 「保存」ボタンをクリックし、変更を保存してください。
このガイドのセクションは、WordPress.com パーソナル、プレミアム、ビジネス、コマースプランをご利用のサイトに適用されます。無料サイトの場合は、この機能を利用するためにプランをアップグレードしてください。
CSS クラスは、個々のメニュー項目に適用できる高度な設定です。
このガイドのどのセクションに従うべきかを判断するには、WordPress.com のダッシュボードにアクセスし、左側の「外観」を確認してください。「エディター」が表示されている場合は、このガイドの「ブロックテーマ」セクションに従ってください。それ以外の場合は、「クラシックテーマ」の手順に従ってください。
サイトエディターで CSS クラスを追加するには、次の手順に従います。
- サイトのダッシュボードから、「外観」→「エディター」の順に移動します。
- 「テンプレート」を選択し、「ホーム」や「フロントページ」など、メニューを含むテンプレートを選択します。
- 画面の左上にある「リスト表示」を開きます (3本の水平線が上下に並んだアイコンです)。
- リスト表示でナビゲーションブロックを選択します。
- ナビゲーションブロックが表示されない場合は、作成できます。
- 画面右側にあるナビゲーションブロックの設定を開きます。
- 設定の歯車アイコン ⚙️ をクリックし、「高度な設定」と表示されたセクションを開きます。
- CSS クラスを追加します。
ナビゲーションブロック内の個々のリンクにも CSS クラスを設定できます。「高度な設定」を開く前に、対象のリンクを選択してください。
ブロックのすべての機能については、ナビゲーションブロックのガイドをご覧ください。
カスタム CSS の追加について詳しくはこちらをご覧ください。
日本語サポート 
コメントを投稿するにはログインしてください。