前回の記事では、テンプレートを使ってAstraのデザインを決定しました。そのデザインをベースに、オリジナルのホームページとなるよう改良をしてみたいと思います。その第一弾はヘッダーです！
目次
- ヘッダービルダーとは？
- キーカラーを変えてみる。
- ヘッダーのメニュー内容を変更する。
- まとめ
１．ヘッダービルダーとは？
ロゴ、メニュー、ボタンが配置されている部分は、カスタマイズ画面の「ヘッダービルダー」で編集できます。メニュー＞外観＞カスタマイズを選び、テーマカスタマイズ画面に移動します。
カスタマイズ画面の「ヘッダービルダー」を選びます。すると、こんな画面が出ます。
なにやら英語が書いてありますね。苦手な人はこちらの翻訳をご覧ください！（笑）
「このページのヘッダーは透過ヘッダーやで。透過ヘッダーをカスタマイズするには下のリンクをクリックしてや～」と言われています。いわれた通り素直にリンクをクリックしましょう！
すると、こんな感じでいろいろ設定できそうな項目が表示されます。
２．キーカラーを変えてみる。
スターターテンプレートのままでも十分かっこいいのですが、色が派手すぎて若干目がちかちかするので色を変えてみます。（特にHomeの文字がみにくい。）
１．DESIGNタブをクリック。
２．メニューの色＞テキスト/リンクの色を変更。
若干ですが、左の丸は透明度を上げています。（現在ページが強調されるようにするため。）
３．ボタンの色＞背景を同じ青にする。
するとこんな感じになりました。さっきよりも目はちかちかしなくなりましたね。
今、開いているのがどのページなのかのわかりやすさもそのまま残るようにしました。背景の画像によって臨機応変に色を変えていきましょう。
いちいち変えるのがめんどくさい場合は背景オーバーレイを暗めにしてどんな画像が来てもいい感じに見えるようにしましょう。
ヘッダー全体を見てみましょう！いい感じ！
３．ヘッダーのメニュー内容を変更する。
これはカスタマイズ画面でなく、「メニュー」から変更します。 カスタマイズ ＞ メニューをクリック。
この画面でメニュー表示設定を行います。テンプレートで作られているものが英語なので、例としてHomeをホームに変えてみます。ナビゲーションラベルと書いてあるところをホームに変えてください。
するとこんな表示になります。
まとめ
ヘッダーデザインを変更してみましたが、いかがでしたか？ヘッダービルダーはまだまだ機能があり、見た目をもっと変えることもできますが、いったんこれぐらいのカスタマイズデモ十分見やすくできたかなと思います。いろいろ触って試してみてくださいね！
デモサイト↓↓
Astraデモサイト
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
