スマホメニューの文字色変更

g568013e5b19946e65134bd9837adb944f5b3b121e86ee12652ac07b69c15dab9dc7e47294e50a5337c6afeadabbac95b392710b066e742194ce2ed79fccefdd3_1280-1822438.jpg

当サイトはアストラ(無料)&エレメンター(無料)で作ったサイトです。固定ページはエレメンター、投稿は Gutenberg で編集を行い、他のエディター系のプラグインは一切追加していません。

このサイトもだいぶ完成に近付いて来ました。ですが、まだまだ細部までの確認が出来ていません。スマホデザインの確認をしている際、メニューにアクセントカラー(ライトグリーン)が適用されている事に気付きました。


透過ヘッダーの設定

結論から言いますと、当サイトは一部に透過ヘッダーが採用されているので、メニュー設定は透過ヘッダーセクションから行なう必要がありました。カラーヘッダーと透過ヘッダーのメニュー色の変更が個別に行えるという事です。

無料のアストラに、ここまでの設定が用意されているとは素晴らしいことです。

メニュー色の変更

画像1が現在の状態です。スマホメニューの文字色にライトグリーンが選択されています。

ちょっと見にくいですね。

外観 → カスタマイズ → ヘッダービルダー → メインメニューと進み、DESIGN からメニュー色を変更したのですが、もちろん適用されません。

結局いろいろと触って、透過ヘッダーを採用したページのメニュー色の変更は透過ヘッダーセクションから行うことがわかりました。

透過ヘッダーの設定へは、外観 → カスタマイズ → ヘッダービルダーと進みます。

透過ヘッダーのカスタマイズ

画像2 青文字のリンク、透過ヘッダーをカスタマイズします。をクリックしましょう。

上部に書かれている英語の説明文は、「このページのヘッダーは透明ヘッダーから設定されます。透明ヘッダーをカスタマイズするには、下のリンクをクリックしてください。」という案内です。

ここまでスマホから設定変更をしました。ですが透過ヘッダーの変更はカラーヘッダーの設定にも影響するようです。パソコン、スマホ等でデザインをしっかりと確認しましょう。

お買い物カゴ
上部へスクロール