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

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

2020.04.27
デザイン

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

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

ヘッダー表示タイプの設定

ヘッダータイプの設定

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

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

1行

1行表示デザイン

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

中央揃え

中央揃えのデザイン

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

左揃え

左揃えデザイン

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

ヘッダーカラー

ヘッダーカラー設定

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

検索フォームの表示設定

検索フォーム表示設定

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

検索フォームの表示

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

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

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

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

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

ヘッダー固定表示

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

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