Studioでヘッダーを画面に固定する方法——「固定」と「追従」の違いと、本文が隠れないための設定

ページを下へスクロールしても、ヘッダーのメニューや「お問い合わせ」ボタンが画面の上に残り続ける——長いページでは、読む人がいつでも次の行動を選べるので、よく使われる作りです。Studioでは、ボックスの「位置」という設定を変えるだけで実現できます。

ただし、位置の設定には「固定」と「追従」があり、使いどころが違います。さらに、固定したヘッダーの下に本文が隠れてしまう問題もつきものです。この記事では、設定の手順と、つまずきやすい点を順に整理します。

「位置」の設定は4種類——ヘッダーに使うのは「固定」か「追従」

Studioの公式ヘルプでは、ボックスの「位置」にはRelative・Fixed・Absolute・Stickyの4種類があると説明されています。日本語のエディタでは、実機で確認したところ、Base（ページ全体の土台）の直下に置いたボックスで、「相対」「固定」「追従」の3つが選べました。

ヘッダーを「固定」にする手順

Studioの公式ヘルプで案内されている流れに、実機で確かめた内容を足した手順です。

1. レイヤーパネルで、ヘッダー全体を入れているボックスが、Base（ページ全体の土台）の「すぐ下」にあるか確認する
2. そのボックスを選ぶ
3. 右側のパネルの「ボックス」タブを開き、いちばん下の「ポジション」にある「位置」のプルダウンから「固定」を選ぶ
4. 「距離」の欄で、画面の端からの距離を決める（ヘッダーなら、画面の上端にぴったり付ける）
5. 「重ね順」の数字を確認する。ほかの要素より手前に出したいときは、数字を上げる
6. プレビューでスクロールして、ヘッダーが残ることを確かめる
7. サイトを更新（公開）する

「追従」を使うときの注意

「追従」は、「あるエリアの中を通る間だけ、画面の上に留まらせたい」ときに便利です。たとえば、長い料金表の見出し行などです。公式ヘルプには、動かないときの原因になりやすい制限が2つ書かれています。

• エディタの上では、動きをプレビューできない。確認は、プレビューのURLで行う
• 親ボックスの「はみ出し」が「表示」か「スクロール」のときだけ動く。「非表示」になっていると、追従は無効になる

固定したヘッダーの下に、本文が隠れるとき

「固定」にしたヘッダーは、ほかの内容とは別の「層」として、画面の上に浮かびます。そのため、ページの最初にある見出しや画像の上側が、ヘッダーの裏に隠れてしまうことがあります。Studioの公式ヘルプでは、原因は2つ挙げられています。

1. 固定したヘッダーを選び、高さを確かめる（たとえば80px）
2. 隠れているセクションを選び、右側の「ボックス」タブの「レイアウト」を開く
3. パディングの「上」の値を、ヘッダーの高さ以上にする（80pxなら、100pxなど）
4. サイトを更新（公開）する

重ね順——ヘッダーが後ろに隠れたら、クリックできなかったら

ボックスどうしが重なるときの前後は、「重ね順」の数字で決まります。公式ヘルプによると、初期値は0で、-9999〜9999の範囲で設定でき、数字が大きいほど手前に表示されます。同じ数字のときは、レイヤーパネルで下にあるボックスのほうが手前に出ます。

「ヘッダーが、ほかの要素の後ろに隠れる」「ヘッダーのリンクを押せない」というときは、ヘッダーの重ね順が、ほかの要素より小さくなっていないかを確認します。押せない場合は、別のボックスがヘッダーを上から覆っていることもあります。覆っているボックスの重ね順も見てください。

スマホでの考え方

Studioの公式ヘルプには、「固定」「追従」のスマホ向けの注意点は書かれていません。画面の縦が短いスマホでは、固定したヘッダーが画面に占める割合が、パソコンより大きくなります。ヘッダーの高さを控えめにする、メニューを折りたたむ、といった工夫は、PC・タブレット・スマホそれぞれの画面幅で、プレビューを見ながら確かめてください。幅ごとの崩れにくい作りはStudioのヘッダーナビを崩れにくくする設計にまとめています。

よくある質問

まとめ

ヘッダーを画面に固定するには、「Baseの直下にあるか確かめる」→「位置を『固定』にする」→「距離と重ね順を決める」→「本文の上パディングをヘッダーの高さ以上にする」→「プレビューで確かめて更新する」の順で進めます。エリアの中だけで追わせたいときは「追従」を使い、プレビューのURLで確認します。

ヘッダー全体の設計はStudioのヘッダーナビを崩れにくくする設計に、ボックスの種類の全体像はStudioのボックスの種類と使い分けにまとめています。