前回の記事では、テンプレートを使ってAstraのデザインを決定しました。そのデザインをベースに、オリジナルのホームページとなるよう改良をしてみたいと思います。その第一弾はヘッダーです!

目次

  1. ヘッダービルダーとは?
  2. キーカラーを変えてみる。
  3. ヘッダーのメニュー内容を変更する。
  4. まとめ

1.ヘッダービルダーとは?

ロゴ、メニュー、ボタンが配置されている部分は、カスタマイズ画面の「ヘッダービルダー」で編集できます。メニュー>外観>カスタマイズを選び、テーマカスタマイズ画面に移動します。

カスタマイズ画面の「ヘッダービルダー」を選びます。すると、こんな画面が出ます。

ヘ ッ タ ー ビ ル ダ ー 
く 
を カ ス タ マ イ ズ 中 で す 
G E N E R A し 
ヘ ッ タ - の 種 第 
0 E SIG N 
ー ad “ 0 れ 新 朝 リ e な 5 を an 平 0 
P 0 、 ecl に を 一 ″ ″ [ ocu om T' ー 0 料 平 aren を 
透 明 へ ッ ダ - を カ ス タ マ イ ズ し ま す - 
ロ ゴ 
メ イ ン メ ニ 
1- 
透 過 ヘ ッ ダ -
透過ヘッダーのカスタマイズバー

なにやら英語が書いてありますね。苦手な人はこちらの翻訳をご覧ください!(笑)
「このページのヘッダーは透過ヘッダーやで。透過ヘッダーをカスタマイズするには下のリンクをクリックしてや~」と言われています。いわれた通り素直にリンクをクリックしましょう!

C 醂 [ 001 淞 四 ・ 透 過 ヘ ッ タ - 
く 
透 過 ヘ ッ タ ー 
G EN [ RA [ 
サ イ ト 全 体 で 有 効 化 
有 効 化 す る 
デ ス ク ト ッ プ 
モ バ イ ル 
D ES ー G N 
デ ス ク ト ッ プ と モ バ イ 
透 過 ヘ ッ ダ - で 別 の ロ ゴ を 使 用 し ま す か ? 
ロ ゴ 
画 像 を 変 更 
削 除 
レ テ ィ - ナ ま で 別 の ロ ゴ を 使 用 し ま す か 
ロ ゴ 
120 
0
リンク押下後

すると、こんな感じでいろいろ設定できそうな項目が表示されます。
 

2.キーカラーを変えてみる。

スターターテンプレートのままでも十分かっこいいのですが、色が派手すぎて若干目がちかちかするので色を変えてみます。(特にHomeの文字がみにくい。)
 1.DESIGNタブをクリック。
 2.メニューの色>テキスト/リンクの色を変更。

メ ニ ュ ー の 色 
テ キ ス ト / リ ン ク
色設定

若干ですが、左の丸は透明度を上げています。(現在ページが強調されるようにするため。) 

 3.ボタンの色>背景を同じ青にする。 

ホ タ ン の 色 
テ キ ス ト 
背 景
色設定

するとこんな感じになりました。さっきよりも目はちかちかしなくなりましたね。

OUTDOOR 
ADVENTURE 
Home 
About 
Services 
Projects 
Contact 
TAKE ACTION

今、開いているのがどのページなのかのわかりやすさもそのまま残るようにしました。背景の画像によって臨機応変に色を変えていきましょう。

いちいち変えるのがめんどくさい場合は背景オーバーレイを暗めにしてどんな画像が来てもいい感じに見えるようにしましょう。

0
背景オーバーレイ設定画面

ヘッダー全体を見てみましょう!いい感じ!

OUTDOOR 
Home 
ADVENTURE 
About 
Services 
Projects 
Contact 
TAKE ACTION 
Explore The Colourful World 
A WONDERFUL 
LEARN MORE
外観

3.ヘッダーのメニュー内容を変更する。

これはカスタマイズ画面でなく、「メニュー」から変更します。 カスタマイズ > メニューをクリック。

メニュー編集画面

この画面でメニュー表示設定を行います。テンプレートで作られているものが英語なので、例としてHomeをホームに変えてみます。ナビゲーションラベルと書いてあるところをホームに変えてください。

するとこんな表示になります。

ヘッダーメニュー編集後

まとめ

ヘッダーデザインを変更してみましたが、いかがでしたか?ヘッダービルダーはまだまだ機能があり、見た目をもっと変えることもできますが、いったんこれぐらいのカスタマイズデモ十分見やすくできたかなと思います。いろいろ触って試してみてくださいね!

デモサイト↓↓
Astraデモサイト


みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください!
WordPressデザインサービスは以下から承っております。

ワードプレスホームページを新規導入します テンプレート付き!!初めての導入、初心者の方にオススメ!!

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP