こんな悩みはありませんか？
「ナビゲーションとサブメニューの色を変えたいけど、どこで設定すればいいのかわからない…」
ブロックテーマではサイトエディターから直感的に変更できます。サイトエディターの詳細はこちらの記事で紹介しています。
今回は、実際に設定した手順を、自分のブログ（X-T9テーマ使用）でご紹介します。
環境
- WordPressバージョン7.02
- 使用テーマ：X-T9
※ブロックテーマであれば他のテーマでも基本的な手順は同じです。
ナビゲーションメニューの配色を変える手順
STEP1＿サイトエディターを開く
①WordPress管理画面の左メニューから「外観」→「エディター」をクリックします。下記はナビゲーションのエディターです。
下の画像は、私が操作中に思わず間違いそうになった実際の画面です。皆様が迷わないよう参考までに載せておきますが、残念ながらこの画面から設定を変更することはできません。
最初は、ナビメニューの色もここから編集できると思っていました。
でも、実際は違っていました！こちらは、ナビメニューを増やしたりテキストを修正したり、サブメニューを設定したりする場所です。こちらを参照↓
実際には、配色を調整する場所は少し異なります。エディターを開くまでは同じですが、別の手法もありつつ、パターンのセクションから編集します。テンプレートパーツとして保存してあるので、一覧内にあるヘッダーを選んで作業を進めていきます。
②下図のように、テンプレートパーツの編集画面のヘッダーをクリックして編集画面に入る
オリジナルを編集をクリックすることで、ナビゲーションメニューの配色変更が行えるようになります。
STEP2＿パターン編集画面に入る
③下図の通り、まずはオリジナルの編集→「マイパターン」に入って、画面を開きます。そこにナビゲーションメニューが表示されますので、内容を確認した上で「ナビゲーション」ブロックを選択し、具体的な設定やカスタマイズを行うための編集画面へと進みます。（私の場合、マイパターンで作り直しました）
④ナビゲーションブロックをクリックすると右側の設定―ブロックースタイル編集画面に色の項目が出てくるので、ここのテキスト、背景、サブメニューテキスト、サブメニュー背景から変更します。下の図は、わかりやすくサブメニューの配色を変えてみたところです。OTHERSの下にサブメニューとして、SITE MAPとPRIVACY POLICYをいれています。
メインメニューはテキスト・背景で変更します。サブメニューはその下のサブメニューテキスト・サブメニュー背景から変更します。
まとめ
ブロックテーマのナビゲーション配色変更はサイトエディターだけで完結します。
- ナビゲーションメニューの背景色・テキスト色はサイトエディターのパターン→ヘッダー編集→オリジナル編集→マイパターン（私の場合）ナビゲーションブロックのスタイルパネルから変更（パターンが同期だと、すべてのページのナビゲーションの色が変わる）
- サイトエディターのナビゲーションからは、編集できないと覚えておくとよいかも
- サブメニューの配色も同じ場所からまとめて設定できる
- CSSを書かなくてもGUIで直感的に設定できるのがブロックテーマの魅力
クラシックテーマからブロックテーマに移行すると最初は戸惑うことも多いですが、サイトエディターに慣れてくるとデザイン変更がぐっと楽になります。ぜひ試してみてください！
☆ サブメニューとナビメニューの配色をセットで統一すると、サイト全体のデザインがまとまりやすくなります。
次回は、スマホのメニューの場合は少し違いますので、次の投稿で解説いたします。