ヘッダーを固定する方法&固定できない原因【STUDIO】

ページをスクロールするとヘッダーが固定されているサイトってよくありますよね。

ページの上部に表示され続けるので、ユーザーが他のページに移動したい時などにとても便利な仕組みです。

今回はSTUDIOでヘッダーを固定する方法をご紹介します。

↓の動画のようにヘッダーを固定します。

STUDIOでヘッダーを固定する方法

通常のサイト制作ではCSSで「position: fixed」を指定すればOKですが、STUDIOの場合はデザインエディタで設定します。

設定の手順は以下のとおりです。

1. ヘッダーを選択した状態にする

2. 画面左上にある『配置』で「固定」を選択する

これでヘッダーの固定表示が完了です。

設定自体はとてもシンプルですが、気を付けないといけない点があります。

ここからは、ヘッダーが表示されなくなったり、デザインがおかしくなった場合の原因や対処法についてご案内します。

ヘッダーが表示されなくなった場合

ヘッダーが見えなくなった場合は、『重ね順』に問題がある可能性が高いです。

『重ね順』の設定箇所は画面左上にあります。

この『重ね順』は、通常のCSSで「z-index」に相当するもので、コンテンツの重なりの順番を設定できます。

『重ね順』は大きい数字になるほど上側（前側）に表示されます。

『重ね順』の設定が原因でヘッダーが表示されなくなった場合は、メインビジュアルの下側（後ろ側）に隠れてしまっている状態なので、メインビジュアルの『重ね順』の数字よりも大きい数字を設定すれば解決します。

※ちなみに、数字の大きい順が適用されるのは「同じ階層」のボックス同士です。

メインビジュアルの一部が隠れる場合

ヘッダーを『固定』表示にすると、メインビジュアルが上に移動するため、一部がヘッダーに隠れてしまいます。
※これは「position: fixed」と同じ挙動です。

ヘッダーの高さ分ほど隠れた状態になるので、ヘッダーの後にくるボックスに「同じ高さの余白」を設定すれば解決します。

ヘッダーのテキストだけが表示される場合

ヘッダーのテキストだけが表示される場合は、ヘッダー自体に『塗り』の設定ができていない可能性があります。

デフォルトの状態だとヘッダーの背景色が透明になっていると思うので、『塗り』を設定しましょう。

ヘッダーの囲み方が間違っている可能性も

ヘッダーに背景色をつけているのに、色だけが固定表示されない場合は、『配置』の「固定」を設定するボックスが間違っている可能性もあります。

例えば、ヘッダー全体ではなく、子要素のボックスなどが『固定』表示になっているかもしれませんので、『固定』表示を設定するボックスを正しく選択しているか確認してみましょう。

まとめ

以上がSTUDIOでヘッダーを固定する方法と注意点です。

ヘッダーの固定表示は、サイト制作でとても一般的な仕組みなので、STUDIOでもよく設定する内容です。
参考になれば幸いです。

ホームページの制作会社をお探しの方やサイトのリニューアルをご検討中の方は、当社へお気軽にお問い合わせください。

集客アップや新規顧客の開拓、ブランディングなど、当社はデザイン性だけでなく、お客様が期待される目的や成果に合わせて導線や視線誘導を重視したホームページを制作しています。

当社はSTUDIOだけでなくWordPressの実績やノウハウも豊富ですので、WordPressと比較した場合のSTUDIOのメリットやデメリットなどもご案内可能です。

→ ホームページ制作のプランや料金はこちら