ワードプレスでメニュースタイルを変更する方法

WordPress メニュー スタイルを変更するにはどうすればよいですか? WordPress ダッシュボードを開き、[外観] > [メニュー] を選択します。変更したいメニューを選択し、「CSS クラス」チェックボックスをオンにします。変更するメニュー項目名の横にある「CSS クラス」フィールドをクリックします。目的の CSS クラス名を入力します。 「追加 CSS」セクションにカスタム CSS を追加します。 「メニューを更新」ボタンをクリックして変更を保存します。

WordPress メニュー スタイルを変更する方法

WordPress メニューは、Web サイトのナビゲーションに構造とアクセシビリティを提供します。メニューの外観をカスタマイズすると、ユーザー エクスペリエンスが向上し、Web サイトのデザインに合わせることができます。 WordPress メニュー スタイルを変更するためのステップバイステップ ガイドは次のとおりです。

1. WordPress ダッシュボードを開きます

WordPress アカウントにログインし、ダッシュボード。

2. メニューに移動します。

左側のメニューで、[外観] > [メニュー] を選択します。

3. 変更するメニューを選択します。

[メニュー] ページには、作成したすべてのメニューが表示されます。スタイルを設定したいメニューを選択します。

4. [画面オプション] を展開します。

画面の右上隅にある [画面オプション] ドロップダウン メニューをクリックします。 [CSS クラス] チェックボックスをオンにすると、メニュー項目の CSS クラスが表示されます。

5. CSS クラスの追加

スタイルを変更するメニュー項目ごとに、メニュー項目名の横にある [CSS クラス] フィールドをクリックします。目的の CSS クラス名を入力します。複数のクラス名はスペースで区切ります。

6. カスタム CSS を追加する

WordPress ダッシュボードの [外観] > [カスタマイズ] > [追加 CSS] セクションで、次のカスタム CSS を追加します:

.css-class-name {
  /* 修改样式的 CSS 属性 */
}

たとえば、[ホーム] メニュー項目の背景色を赤に変更するには、次の CSS を追加します:

.home-menu-item {
  background-color: red;
}

7 [変更を保存]

「メニューを更新」ボタンをクリックして変更を保存します。

ヒント:

• 要素の検査ツール (Chrome の F12 ツールなど) を使用して、スタイルを設定したいメニュー項目の CSS クラスを特定します。変更します。
• サブメニューを作成しますか?サブメニュー項目名の横にある「CSS クラス」フィールドを使用して、CSS クラスを追加します。
• より高度なカスタマイズについては、Max Mega Menu などのメニュー管理プラグインの使用を検討してください。

以上がワードプレスでメニュースタイルを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。