ヘッダー

ヘッダーのカスタマイズ:ヘッダーメニューをロゴの下からロゴの横に移動する【ヘッダー用メニュー(横列)】の設定方法

2021年2月22日

AFFINGERのヘッダーカスタマイズのコーナーです。今回はヘッダーメニューを右上に移動させる方法をご紹介します。デフォルトではメニューはロゴの下にありますが、ロゴの右側に移動させることもできます。

完成図はこんな感じです。

\ ビフォー /

ヘッダーメニューをロゴの下からロゴの横に移動する(デフォルト状態)

\ アフター /

ヘッダーメニューをロゴの下からロゴの横に移動する(完成図)

\ ビフォー /

ヘッダーメニューをロゴの下からロゴの横に移動する(デフォルト)

\ アフター /

ヘッダーメニューをロゴの下からロゴの横に移動する(完成図)

メニューの位置がロゴの下からロゴの右側に移動しましたね。

ヘッダーメニューを右上に移動させる設定方法

ここからヘッダーメニューを右上に移動させる方法を説明します。

それではやっていきましょう。

デフォルトのメニューを右上に移し替える

まず、メニューの位置を移動させます。メニュー画面へ行きましょう。

【ダッシュボード】→【外観】→【メニュー】

  1. "編集するメニューを選択"より現在使っているデフォルトのメニューを選びます。右側に(ヘッダー用メニュー)と付いているメニューです。"選択"ボタンを押します。
  2. "メニュー構造"のところに現在使っているメニューが表示されたことを確認してください。
  3. "メニュー設定"の項目で"ヘッダー用メニュー"(1番目)のチェックを外し、"ヘッダー用メニュー(横列)"(2番目)にチェックを入れます。
  4. "メニューを保存"のボタンを押して設定を保存します。

これでメニューの位置を移動させました。

ヘッダーメニューをロゴの下からロゴの横に移動する(デフォルトのメニューを右上に移し替える)

ヘッダー用メニュー(横列)を有効化

メニューを移しただけではサイトに表示されません。"ヘッダー用メニュー(横列)"の設定を有効化する必要があります。"メニュー設定"画面へ移動します。

【ダッシュボード】→【AFFINGER管理】→【メニュー】(メニュ設定) > "PC用グローバルメニュー"

"メニュー設定"画面の"PC用グローバルメニュー"にある"ヘッダー用メニュー(横列)を有効化(960px以上)"にチェックを入れます。そして"Save"を押しましょう。

これでサイトの右側にメニューが表示されました。

ヘッダーメニューをロゴの下からロゴの横に移動する(ヘッダー用メニュー(横列)を有効化する)

デフォルトのメニューを非表示に

デフォルトのメニューを非表示に(ヘッダーメニューが両方表示された状態)

右上にメニューが表示されました。しかし、なぜかデフォルトのメニューが消えないまま残っています。この残ったメニューを非表示にしましょう

先ほどと同じように"メニュー設定"画面へ移動します。

【ダッシュボード】→【AFFINGER管理】→【メニュー】(メニュ設定) > "PC用グローバルメニュー"

現在、"PC用メインメニューを上に表示する(デフォルト)"にチェックが入っているものを"PC用メインメニューを表示しない"に変更します。最後に"Save"ボタンを押して完了です。

これでデフォルトのメニューが消えました。

ヘッダーメニューをロゴの下からロゴの横に移動する(デフォルトのメニューを非表示に)

色を変更する

ヘッダーメニューの文字色はカスタマイズ画面から変更できます。

【ダッシュボード】→【外観】→【カスタマイズ】 > 【基本エリア設定】 > 【ヘッダーエリア】 > "電話番号とヘッダーリンク"

完成!

お疲れさまです。完成です!右上にメニューが移動しました!

デフォルトのメニューを非表示に(完成:拡大)
デフォルトのメニューを非表示に(完成)

以上、デフォルトのヘッダーメニューを右上に移す方法についてでした。

-ヘッダー