Apura v1.4.0では、モバイルメニューの背景色とテキスト色をカスタマイザーから設定できるようになりました。Dropdown・Fullscreen・Offcanvasの3方式に共通で反映されるため、利用するメニュー方式を変えても配色を統一しやすくなります。
あわせて、FullscreenとOffcanvasの閉じるボタンもテキスト色に連動します。この記事では、設定場所と各項目の違い、既存サイトを更新するときの確認ポイントを紹介します。
v1.4.0で変わったこと
- モバイルメニューの背景色を3方式共通で設定可能
- メニュー内の通常テキストと見出しの色を設定可能
- Fullscreen・Offcanvasの閉じるボタンがテキスト色に連動
- Fullscreen専用だった色設定を、3方式共通の背景色設定へ変更
Dropdownにはパネル内の閉じるボタンがないため、閉じるボタンの色連動はFullscreenとOffcanvasが対象です。
モバイルメニューの色を設定する方法
WordPress管理画面から、外観 → カスタマイズ → Header → Mobile → General Settingsを開きます。
| 設定項目 | 反映される場所 |
|---|---|
| Menu Background Color | Dropdown・Fullscreen・Offcanvasのメニュー背景 |
| Menu Text Color | 3方式の通常テキストと見出し、Fullscreen・Offcanvasの閉じるボタン |
| Menu Link Color | 3方式のメニューリンク |
背景を濃い色にした場合は、Menu Text ColorとMenu Link Colorの両方を明るい色へ調整してください。
Menu Text Colorは案内文や見出しなどに使われ、Menu Link Colorはナビゲーションのリンクに使われる別の設定です。一方だけを変更すると、一部の文字が背景に埋もれることがあります。
閉じるボタンもMenu Text Colorに連動
FullscreenとOffcanvasでは、メニュー内の閉じるテキストとアイコンの色がMenu Text Colorに連動します。メニューの背景色を変更したときも、同じ画面で閉じるボタンの見やすさまで調整できます。
子テーマや追加CSSで閉じるボタン専用の色を指定している場合は、その指定が優先されることがあります。独自にデザインを調整しているサイトでは、更新後の実表示も確認してください。
旧Fullscreenの色設定は引き継がれます
従来のFullscreenにあったOverlay Colorは、v1.4.0で3方式共通のMenu Background Colorへ置き換わりました。Fullscreenで保存していた色は基本的にそのまま引き継がれるため、通常は再設定の必要はありません。
Offcanvasの背面オーバーレイは別設定
今回変更されたのは、モバイルメニュー本体の背景色です。
Offcanvasを開いたときに画面の背後を暗くするOverlay Colorは別の設定として残っています。Menu Background Colorはスライドインするパネル自体、OffcanvasのOverlay Colorはパネルの背後に反映されます。
更新後に確認したいポイント
- スマートフォン幅でモバイルメニューを実際に開く
- 背景色に対して通常テキストとメニューリンクが読みやすいか確認する
- Fullscreen・Offcanvasでは閉じるテキストとアイコンの視認性を確認する
- 過去にFullscreenを使用していた場合は、引き継がれた背景色を確認する
- 今後メニュー方式を変更する予定がある場合は、Dropdown・Fullscreen・Offcanvasを切り替えて確認する
特に、旧Fullscreenで半透明色を使用していたサイトや、Fullscreenから別方式へ変更したサイトでは、更新後の確認をおすすめします。
関連情報
v1.4.0では、3つのモバイルメニュー方式を共通の色設定で整えられるようになりました。
サイトの配色に合わせて背景色・テキスト色・リンク色を調整し、スマートフォンでも読みやすく操作しやすいメニューに仕上げて頂ければ幸いです。