固定ヘッダーの設定方法

固定ヘッダーの設定方法

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

※この機能は yStandard v3.7.0以降で利用できます。

固定ヘッダーを設定する

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

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

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

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

ヘッダー高さ設定の入力

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

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

ヘッダー高さを入力する

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

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

プレビューサイズを変更して各デバイスでの高さを調べる

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

プレビュー画面に表示されたヘッダー高さ以外も設定できます。

ただし、キレイに表示させるためにはプレビュー画面に表示されたヘッダー高さより大きい数字を入力することをおすすめします。