ヘッダーデザインの変更方法

ヘッダーデザインの変更方法

2020.04.27
デザイン

サイトのヘッダーデザインの変更方法について紹介します。

サイトのヘッダーのデザインは「[ys]デザイン」→「サイトヘッダー」から設定します。

ヘッダー表示レイアウトの設定

ヘッダータイプの設定

ヘッダーの表示デザインは「ヘッダータイプ」設定の「表示タイプ」から次の3種類から選択できます。

  • 1行
  • 中央揃え
  • 左揃え

1行

1行表示デザイン

1行表示では左にロゴ、右側にグローバルメニューが表示されます。

中央揃え

中央揃えのデザイン

中央揃えでは、ロゴとグローバルメニューが中央に表示されます。

左揃え

左揃えデザイン

左揃えではロゴとグローバルメニューが2行で左揃えで表示されます。

ヘッダーデザイン

ヘッダー背景色・文字色、グローバルメニュー色

サイトヘッダーの背景色・文字色の変更

「背景色」「文字色」「概要文の文字色」設定ではヘッダーの背景色、文字色、概要文の文字色を設定できます。

ヘッダーデザインの色設定ではデスクトップレイアウトでのグローバルメニューの色にも反映されます。

ヘッダーに影をつける

ヘッダーに影をつける設定

「ヘッダーに影をつける」設定ではヘッダーの下側に影をつけることができます。

メニュー間の間隔

メニュー間の間隔設定

「メニュー間の間隔」ではヘッダーに表示されるメニューの間隔を調整できます。

見栄えの良いメニューの間隔は項目数によって変わりますので、メニューが折り返したり潰れたりしない範囲で調整してみてください。

検索フォームの表示設定

検索フォーム表示設定

「検索フォーム」設定ではヘッダー部分に検索フォームを表示するか設定できます。

検索フォームの表示

「検索フォームを表示する」にチェックをつけた場合、PC表示ではグローバルメニューの一番右側に虫眼鏡アイコンが表示されます。

検索ボックスが表示される

▲アイコンをクリックすると検索ボックスが表示されます。

スマートフォンの検索ボックス

スマートフォンの場合、メニューボタンをクリックして表示されるメニュー一覧の一番上に検索ボックスが表示されます。

ヘッダー固定表示

ヘッダーの固定表示についての詳細はこちらをご覧ください▼

固定ヘッダーの設定方法
画面上部にロゴやメニューを固定表示する「固定ヘッダー」の設定方法について紹介します。
wp-ystandard.com