固定ヘッダーの設定方法

固定ヘッダーの設定方法

2019.11.30
デザイン

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

固定ヘッダーを設定する

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

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

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

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

ヘッダー高さ設定の入力

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

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

ヘッダー高さを入力する

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

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

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

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

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