WordPressサイトのヘッダーメニューは、訪問者が目的のページへ移動するための重要な案内部分です。英語表記のメニューはデザインをすっきりと見せられる一方で、項目によっては日本語の説明があった方が内容を理解しやすくなる場合があります。

今回は、英語のみで表示されていたヘッダーメニューに日本語表記を追加し、英語と日本語を上下2段で表示する調整を行いました。既存のデザインやスマートフォン向けのメニュー構造をできるだけ変更せず、HTMLとCSSの修正によって対応した事例をご紹介します。

今回のご相談内容

今回対応したのは、WordPressで構築されたWebサイトのヘッダーメニューに関する表示調整です。もともとのメニューは「HOME」「ABOUT US」「ACCOMMODATIONS」「RESERVE」「FAQ」「CONTACT」といった英語表記で構成されていました。

この英語メニューの下に、それぞれの意味が分かる日本語表記を追加し、2段構成にしたいという内容です。

サイト全体のデザインを変更するのではなく、現在のメニュー構成やリンク先は維持したまま、表示する文字とレイアウトを調整する方針で対応しました。

発生していた症状・エラー内容

今回の対応は、システムの不具合やエラーを修正するものではなく、ヘッダーメニューの表示を改善するための作業です。

既存のメニューは英語のみの1段表示となっており、日本語の補足表記がありませんでした。「HOME」や「CONTACT」のように比較的意味が伝わりやすい項目もありますが、「ACCOMMODATIONS」などは、訪問者によってはメニュー名だけで掲載内容を判断しにくい可能性があります。

また、ヘッダーは画面上部に固定される仕様となっており、スクロール時には背景色やロゴの大きさなどが変化する仕組みでした。スマートフォンではハンバーガーメニューに切り替わるため、単純に文字を追加するだけでなく、既存の表示や動作に影響しない実装が必要でした。

原因の特定ポイント

まず確認したのは、既存のヘッダーメニューがどのようなHTML構造とCSSで管理されているかという点です。

今回のメニューは、WordPressのテンプレート内にHTMLとPHPで記述されており、各メニュー項目のリンクや現在表示しているページの判定も個別に設定されていました。表示については、CSSでリンクの余白やホバー時の装飾が指定されている構成です。

そのため、日本語表記を追加するためにメニュー全体を作り直す必要はないと判断しました。既存のリンク内に英語と日本語をそれぞれ独立した要素として配置すれば、現在の仕組みを活用しながら2段表示に変更できます。

特に重要だったのは、英語と日本語を単純に改行するのではなく、それぞれに異なる文字サイズや余白を指定できる構造にすることです。これにより、英語を主なメニュー名として残しながら、日本語を補足情報として自然に表示できます。

実際に行った対応内容

今回の対応では、まずヘッダーメニューのHTMLを修正し、各リンク内に英語用と日本語用の要素を追加しました。

具体的には、既存の英語表記を「en」、追加する日本語表記を「ja」というクラスで分け、それぞれを個別にCSSで調整できる構造に変更しています。

日本語表記には、「HOME」に対して「ホーム」、「ABOUT US」に対して「当施設について」、「ACCOMMODATIONS」に対して「客室案内」など、各メニューの内容が伝わる名称を設定しました。

続いてCSSでは、メニューのリンク部分にFlexboxを使用し、英語と日本語が上下に並ぶように設定しました。さらに、文字を中央揃えにしたうえで、日本語側の文字サイズを小さくし、英語との間に適度な余白を設けています。

この方法であれば、メニューのリンク先や現在のページを判定するPHPの処理、ホバー時の装飾などを変更する必要がありません。既存のCSSを活用しながら、必要な部分だけを調整する形で実装しました。

対応後の結果・改善点

HTMLとCSSの修正後、ヘッダーメニューに英語と日本語が上下2段で表示されるようになりました。

英語表記を残したことで、もともとのデザインの方向性を維持しながら、日本語による補足を追加できています。特に、英語だけでは内容を判断しにくい項目についても、日本語を併記することでメニューの役割が伝わりやすい構成になりました。

修正後の表示確認でも問題はなく、既存のヘッダーメニューの仕組みを活用したまま対応を完了しています。

今回はメニューの内容やリンク先を変更する必要がなかったため、比較的小規模なコード修正で目的の表示を実現できました。

今回の対応から分かったこと

今回の事例から分かるのは、Webサイトの表示改善では、必ずしも大きな改修が必要になるわけではないということです。

既存のHTMLやCSSがどのように構成されているかを確認し、その仕組みを活用できれば、必要な箇所だけを変更して対応できる場合があります。

今回も、英語と日本語を別々の要素として管理する方法を採用したことで、それぞれの文字サイズや余白を調整しやすくなりました。また、既存のリンク設定やWordPress側のページ判定処理に手を加えずに済んだため、変更範囲を限定できています。

Webサイトの保守では、希望する表示を実現することだけでなく、既存の機能に不要な影響を与えないことも大切です。特にヘッダーのように全ページで共通して使用する部分は、変更内容がサイト全体に反映されるため、現在の構造を理解したうえで作業する必要があります。

同様のトラブルを防ぐために

ヘッダーメニューの表示を変更する際は、パソコンでの見た目だけでなく、スマートフォンなど画面幅が異なる環境も考慮することが重要です。

今回のように英語と日本語を2段で表示する場合、メニューの高さが増えるほか、日本語の文字数によっては項目ごとの幅にも影響する可能性があります。特に横並びのメニューでは、ロゴやほかの要素との間隔が不足しないか確認する必要があります。

また、スマートフォンではメニューが縦並びになったり、ハンバーガーメニュー内に格納されたりすることが多いため、既存のレスポンシブ対応を踏まえた調整が欠かせません。

WordPressサイトの場合は、メニューの管理方法もサイトによって異なります。管理画面のメニュー機能で設定されている場合もあれば、今回のようにテンプレートへ直接記述されている場合もあります。

そのため、修正前にメニューの出力方法とCSSの指定内容を確認し、変更する範囲を明確にしておくことが、不要な表示崩れを避けるためのポイントになります。

メディアプライムスタイルのサポートについて

メディアプライムスタイルでは、WordPressサイトの保守管理や不具合対応だけでなく、既存サイトの表示調整や部分的な改修にも対応しています。

今回のようなヘッダーメニューの表記変更は、一見すると小さな修正ですが、サイトの構造によって適切な対応方法は異なります。既存のデザインや機能を維持しながら、必要な部分だけを調整することも、Webサイトを継続的に運用していくうえで大切な作業のひとつです。

「メニューの表記を変更したい」「現在のデザインを残したまま使いやすくしたい」など、運用中のWebサイトで気になる部分がありましたら、お気軽にご相談ください。

サイトの状態や既存の仕組みを確認しながら、必要な対応をご案内いたします。