• HOME > 
  • WordPress > 
  • ワードプレスのナビゲーションメニューに説明文を表示する方法【...

ワードプレスのナビゲーションメニューに説明文を表示する方法【画像付きで解説】

投稿日:

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

カテゴリー記事のアイキャッチ画像
広告
広告

ナビゲーションメニューの説明文とは?

ワードプレスにはじめから備わっているメニューの説明文の機能を利用すれば、以下の画像のようなホームページでよく目にするメニュー項目の下に、英語表記を表示させるというデザインが簡単に実現できます。

メニュー説明文完成形

このページではワードプレスのナビゲーションメニューの説明文機能の使い方を解説します。ナビゲーションメニュー自体の使い方や作成方法、カスタマイズ方法に関しては以下の記事をご確認下さい。

リンク先のサムネイル
ワードプレスのナビゲーションメニューの作り方とカスタマイズ方法

ナビゲーションメニューとは、WEBサイトにおいてお問い合わせなど主要ページへのリンクをまとめたメニューのことを指します。ワードプレスに標準的に備わっている機能を使ってナビゲーションメニューを作成する方法をご説明します。...【もっと読む】

説明文の入力欄を表示させる

ワードプレスのデフォルトの状態では、説明文の入力欄は隠された状態になっています。まずは、入力欄を表示させましょう。

説明文入力欄非表示状態

ナビゲーションメニュー画面の右上の「表示オプション」をクリックします。

表示オプション

表示オプション項目が表示されますので、「説明文」にチェックを入れます。

表示オプション

再び、ナビゲーションメニュー画面のメニュー項目を確認すると「説明文」の入力欄が追加されています。

説明文入力欄

今回は、英語表記を入力していきます。

入力欄を表示させただけではサイト上には何も表示されません。説明文が不要な部分は空欄のままにしておけば大丈夫です。

説明文入力欄

入力が完了したら、右下の「保存」を押します。サイトを確認すると英語表記が追加されました。

説明文

説明文の表示をカスタマイズする

「説明文」には「menu-item-description」というクラスが付与されていますのでCSSで自由にカスタマイズしましょう。

CSS

header .menu-item-description span{
    font-size:12px !important;
    color:blue;
}

プレビュー

説明文

まとめ

メニューのアクセントにもなりますので、デザインする際のアイデアの一つとして取り入れてみてください。

関連する記事

サムネイル

ワードプレスの固定ページにPHPファイルを読み込む方法【ショ……

2023年12月04日
ワードプレスの固定ページ(投稿ページ)内にPHPを書いたり、PHPファイルを読み込ませることができたら便利ですよね。「PHPファイルを作成して、ショートコードを使って固定ページ内に読み込ませる」という方法をご紹介します。
サムネイル

コンタクトフォーム7のショートコードをテーマファイル内に埋め……

2023年11月24日
テーマファイル(PHPファイル)内にコンタクトフォーム7のショートコードをそのまま記述しても、フォームを呼び出すことはできません。
サムネイル

ワードプレスで前後の記事の公開日を取得して表示する方法【ge……

2023年10月01日
最終更新日:2023年09月12日
ワードプレスの投稿ページで前後の記事の公開日を表示させたいときはget_previous_postとget_next_post関数を使います。
サムネイル

Elementor(エレメンター)の使い方を徹底解説【ページ……

2023年03月09日
最終更新日:2023年03月10日
Elementorは直感操作でワードプレスのサイトを構築できるページビルダープラグインです。ウィジェットをドラッグアンドドロップしていくだけでページのレイアウトを作成することが可能です。
サムネイル

ワードプレスのログイン画面をカスタマイズする方法【プラグイン……

2023年03月07日
最終更新日:2023年12月08日
ワードプレスのログイン画面はカスタマイズしてロゴや背景を変更することができます。ログイン画面のカスタマイズはプラグインを使うかfunctions.phpを編集して行います。
サムネイル

ワードプレスのコンタクトフォーム7で自動返信メールを設定する……

2023年02月28日
最終更新日:2023年03月10日
ワードプレスのContact Form 7プラグインを使って自動返信メールを設定する手順を解説します。フォームの編集画面で「メール(2)を使用」にチェックを入れると、設定項目が表示されて自動返信ができるようになります。
サムネイル

ワードプレスでログイン履歴を確認する方法【SiteGuard……

2023年01月26日
最終更新日:2023年03月10日
多くのセキュリティ対策プラグイン「SiteGuard WP Plugin」を使ってログイン履歴を確認する方法について解説します。