Astra3.0テーマを使ったWordPressサイト作成の記録。
ヘッダーの背景色指定とメニュー表示の確認。
使用サーバー：ロリポップ
使用テーマ：Astra
ヘッダーの背景色を指定する
Astra3.0の新機能 ”Header Builder”を使って、ヘッダーに背景色を指定する。
外観＞カスタマイズ＞ヘッダービルダーを選択。
プレビュー画面下部にヘッダービルダーのブロックが現れる。
ヘッダービルダーの概要
ヘッダービルダーは、縦に3段並んだ、Above、Primary、Belowの3ブロックで構成されていて、各ブロックにパーツをレイアウトすることができる。
初期状態では、Primaryブロックにロゴとメインメニュー用のパーツが登録されている。
Astra3.0 ヘッダービルダーは3ブロック構成
Primaryヘッダーに背景色を指定するので、Primaryヘッダーブロックの左端にある歯車（コグ）アイコンをクリック。
左側のメニューパレットがヘッダーカスタマイズ用に切り替わる。
ヘッダー設定用のプロパティ。
プロパティには”General”と”Design”のふたつのタブがあり、”General”ではPrimaryヘッダーの高さを調節できる。
すでにロゴを登録してあるので、高さは画像サイズに制限され、一定値よりも小さくすることはできない（大きくすることはできる）。
ヘッダー背景色の指定
ヘッダーの背景色を指定するには、”Design”タブに切り替えて”Background Color & Image”セクションで「色と画像」のボックスをクリック。
カラーパレットが現れるので、クリックで色を選択したり、カラーコードを入力する。
ここでは、テーマカラーと同じ色を指定している。
プライマリーヘッダーの背景色指定。
ナビゲーションメニューの作成
続いて、ヘッダー内に表示するナビゲーションメニューを作成する。
Primary Header内にはすでにメインメニュー用パーツが配置されているので、メニューを作成すれば自動的に表示される。
今回は、固定ページを作成してメニューアイテムに登録する。
固定ページを作成する
WordPressのメニューで固定ページを選択。
［新規追加］をクリックしてページを作成。
固定ページを追加する。
新規作成したページに名前とスラッグを指定する。
作成した固定ページにはスラッグとして、ページを識別する数字が割り当てられているので、ページの内容を分かりやすくあらわしたテキストに書き換える。
ページ名とスラッグを指定。
ナビゲーションメニューを作るにはページタイトルだけあればいいので、ページの内容は空白のままでよい。
作成した固定ページ
メニューの作成
WordPressのサイドメニューから外観＞メニューを選択。
メニュー作成画面を開く。
「メニュー構造」ブロックでで、作成するメニュー名（ナビゲーション）を入力し、「メニューの位置」で”メインメニュー”を選択し、メニューを作成する。
ナビゲーションメニューを作成。
作成したナビゲーションメニューに表示したい項目を追加する。
「固定ページ」のリストで必要なページをすべてチェックし、［メニューに追加］をクリック。
空のメニューにページを登録する。
作成したメインメニュー（ナビゲーション）が、プライマリーヘッダー上に表示される。
メインメニューが表示される。
メニューを見ると、ホームがいちばん右になっているので、再びメニュー作成画面にもどって、メニュー項目をドラッグし、並び順を入れ替え。
「ホーム」が先頭になるように入れ替える。
これでメインメニューの左端に「ホーム」が表示される。
並べ替え終わったメインメニュー。
注意ポイント
ここまでの設定では、サイトのキャッチフレーズやメニューの文字が読みづらい。
ヘッダ背景色を指定する場合、テキストリンクはヘッダー背景色との兼ね合いで色を指定したほうがよい。