こんにちは。SaitoKouです。
以前設定してみたテーマ「Neve」のヘッダーカスタマイズについてみていこうと思います。とりあえず動かしてみた結果、「Astra」のヘッダービルダーと似ており、こちらもノーコードでかなり設定できる様子です。タイトルとメニュー表示するくらいでしたら十分すぎるくらい機能があると感じました。今回はその中でもヘッダービルダーの簡単な設定について早速見ていきます。
１．ヘッダーのカスタマイズ方法
Neveでのヘッダーとは下の画像の一番上の白いバー部分のことを指します。
サイトのタイトル、メニューなどを表示する部分ですね。
今回は、上の画像のようなヘッダーを、下のように改造したいこととします。
変更点
・メニューを右端ではなく、真ん中に配置する。
・空いた右端にはボタンを配置する。
（ボタンの見た目や、カーソルを合わせたときのアニメーションは今回対象外。）
この変更を、カスタマイズ画面から設定してみます。管理画面の「外観」＞「カスタマイズ」＞「ヘッダー」を選択します。すると、下の図のようなメニューが出てきます。
また、右下にはこんなバーが表示されていると思います。
このバーでは、ヘッダーに配置する各要素の配置場所を調整することができます。
早速このバーを使ってヘッダーを編集してみます。
➀ メニューを右端ではなく、真ん中に配置する。
めちゃめちゃ簡単で、「メインメニュー」をここに持ってきます。
これでホームページのデザインを見ると、メニューが真ん中に移動していますね。
② 空いた右端にはボタンを配置する。
下の画像のように、右端の空いている箇所をクリックします。
すると、下のようなウィンドウが出ます。クリックした箇所に配置する要素を選択することができます。今回は「ボタン」をクリック。
すると、下の画像のようにボタンが右端に配置されます。
せっかくなのでボタンの文言を変えてみます。ヘッダービルダーのボタンの歯車マークをクリックします。
すると、ボタンの設定画面が左サイドバーに出てきます。
この画面の「テキスト」を変更します。
するとボタンの文言が変わります。
まとめ
ヘッダービルダーはノーコードでヘッダーの要素を追加したり、配置を変更したりできることがわかりました！今回は真ん中の段しか使用しませんでしたが、上段と下段もあるようなので次回使ってみようと思います！
みなさまのホームページやイメージがよくなるお手伝いをいたします。
ヘッダー画像、バナー画像、ロゴ、WordPressデザインなどお気軽にご相談ください！
WordPressデザインサービスは以下から承っております。
