最新情報

WordPress サイト作成 #04 ヘッダーのカスタマイズ

Astra3.0テーマを使ったWordPressサイト作成の記録。

ヘッダーの背景色指定とメニュー表示の確認。

使用サーバー:ロリポップ

使用テーマ:Astra

 

ヘッダーの背景色を指定する

Astra3.0の新機能 ”Header Builder”を使って、ヘッダーに背景色を指定する。

外観>カスタマイズ>ヘッダービルダーを選択。

プレビュー画面下部にヘッダービルダーのブロックが現れる。

 

ヘッダービルダーの概要

ヘッダービルダーは、縦に3段並んだ、Above、Primary、Belowの3ブロックで構成されていて、各ブロックにパーツをレイアウトすることができる。

初期状態では、Primaryブロックにロゴとメインメニュー用のパーツが登録されている。

WordPressサイト構築 #0027

Astra3.0 ヘッダービルダーは3ブロック構成

 

Primaryヘッダーに背景色を指定するので、Primaryヘッダーブロックの左端にある歯車(コグ)アイコンをクリック。

左側のメニューパレットがヘッダーカスタマイズ用に切り替わる。

WordPressサイト構築 #0028

ヘッダー設定用のプロパティ。

 

プロパティには”General”と”Design”のふたつのタブがあり、”General”ではPrimaryヘッダーの高さを調節できる。

すでにロゴを登録してあるので、高さは画像サイズに制限され、一定値よりも小さくすることはできない(大きくすることはできる)。

 

ヘッダー背景色の指定

ヘッダーの背景色を指定するには、”Design”タブに切り替えて”Background Color & Image”セクションで「色と画像」のボックスをクリック。

カラーパレットが現れるので、クリックで色を選択したり、カラーコードを入力する。

ここでは、テーマカラーと同じ色を指定している。

WordPressサイト構築 #0028

プライマリーヘッダーの背景色指定。

 

ナビゲーションメニューの作成

続いて、ヘッダー内に表示するナビゲーションメニューを作成する。

Primary Header内にはすでにメインメニュー用パーツが配置されているので、メニューを作成すれば自動的に表示される。

今回は、固定ページを作成してメニューアイテムに登録する。

 

固定ページを作成する

WordPressのメニューで固定ページを選択。

[新規追加]をクリックしてページを作成。

WordPressサイト構築 #0030

固定ページを追加する。

 

新規作成したページに名前とスラッグを指定する。

作成した固定ページにはスラッグとして、ページを識別する数字が割り当てられているので、ページの内容を分かりやすくあらわしたテキストに書き換える。

WordPressサイト構築 #0031

ページ名とスラッグを指定。

 

ナビゲーションメニューを作るにはページタイトルだけあればいいので、ページの内容は空白のままでよい。

WordPressサイト構築 #0032

作成した固定ページ

 

メニューの作成

WordPressのサイドメニューから外観>メニューを選択。

WordPressサイト構築 #0033

メニュー作成画面を開く。

 

「メニュー構造」ブロックでで、作成するメニュー名(ナビゲーション)を入力し、「メニューの位置」で”メインメニュー”を選択し、メニューを作成する。

WordPressサイト構築 #0034

ナビゲーションメニューを作成。

 

作成したナビゲーションメニューに表示したい項目を追加する。

「固定ページ」のリストで必要なページをすべてチェックし、[メニューに追加]をクリック。

WordPressサイト構築 #0035

空のメニューにページを登録する。

 

作成したメインメニュー(ナビゲーション)が、プライマリーヘッダー上に表示される。

WordPressサイト構築 #0036

メインメニューが表示される。

 

メニューを見ると、ホームがいちばん右になっているので、再びメニュー作成画面にもどって、メニュー項目をドラッグし、並び順を入れ替え。

WordPressサイト構築 #0037

「ホーム」が先頭になるように入れ替える。

 

これでメインメニューの左端に「ホーム」が表示される。

WordPressサイト構築 #0038

並べ替え終わったメインメニュー。

 

注意ポイント

ここまでの設定では、サイトのキャッチフレーズやメニューの文字が読みづらい。

ヘッダ背景色を指定する場合、テキストリンクはヘッダー背景色との兼ね合いで色を指定したほうがよい。

 

 

 

 

-最新情報
-

© 2021 FLYINGJUNK.NET