ヘッダーを画面上部に固定表示する方法

ヘッダーを画面上部に固定表示する方法

デザイン
初心者向け
yStandard

ロゴやメニューなどサイトヘッダー部分を画面上部に固定表示する設定方法について紹介します。

ヘッダーの固定表示設定はテーマカスタマイザーの「[ys]デザイン」→「サイトヘッダー」の設定内にあります。

ヘッダー固定表示設定する

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

ヘッダー固定表示設定をONにする

画面上部にヘッダーを固定する場合は「ヘッダーを画面上部に固定する」にチェックをつけます。

合わせて「ヘッダー高さ設定」のPC・タブレット・モバイルの各ヘッダー高さを忘れずに入力してください

ヘッダー高さ設定の入力

yStanadrdのヘッダー固定機能では、ヘッダーの高さを入力する必要があります。
(やや手間になってしまいますが、yStandardではヘッダー高さを事前に設定しておく方式にしています。)

これは、固定したヘッダーの下側にコンテンツ部分が隠れないようにするための設定です。

ヘッダー高さを入力する

「ヘッダーを画面上部に固定する」にチェックを入れると、プレビュー画面左上にヘッダーの高さが表示されます。

ここに表示された数字を「ヘッダー高さ」の設定に入力します。

モバイル表示ではプレビューレイアウトを変更して入力する

カスタマイザー左下のPC・タブレット・スマートフォンのアイコンをクリックすると、プレビューのサイズが変わるので、それぞれ調べて入力します。

プレビュー画面に表示されたヘッダー高さ以外も設定できますが、キレイに表示させるためにはプレビュー画面に表示されたヘッダー高さを入力することをおすすめします。