固定位置のヘッダーは、スクロール中も常に画面上部に表示されるため、ヘッダーの下にある見出しや画像が、ヘッダーの高さ分だけ隠れることがあります。
重なりは、隠れている要素の上にヘッダーと同じ高さ以上の余白を追加すると解消できます。
ヘッダーとコンテンツが重なる原因
固定位置のヘッダーは、通常のレイアウトとは別のレイヤーとして画面上部に重ねて表示されます。
ページ上部のセクションは、ヘッダーの高さを考慮せずに配置されるため、ヘッダーの裏に隠れます。
アンカーリンクで移動すると、遷移先の要素の上端が画面の最上部にそろうようにスクロールします。そのため、遷移先の要素がヘッダーの裏に隠れます。
ページ上部のセクションがヘッダーと重なる場合
ヘッダーと重なっているセクションに、ヘッダーの高さ以上の上パディングを設定します。
固定位置で配置しているヘッダーを選択し、高さを確認します。
ヘッダーと重なっているセクションを選択します。
[レイアウト]のパディングで、上の値をヘッダーの高さ以上に設定します。
公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。
アンカーリンクの遷移先がヘッダーに隠れる場合
アンカーリンクの遷移先にも、ヘッダーの高さ以上の上パディングを設定します。設定する場所は、ページの種類によって異なります。
通常ページでアンカーリンクを使用している場合
通常ページでは、遷移先のIDを設定したボックスに上パディングを追加します。
アンカーリンク用のIDを設定したボックスを選択します。
[レイアウト]のパディングで、上の値をヘッダーの高さ以上に設定します。
公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。
CMS記事の目次から見出しに移動する場合
CMS記事アイテムの目次では、本文中の見出しが遷移先になります。CMS詳細ページのリッチテキストボックス内で、見出しに上パディングを追加します。
リッチテキストボックス内の見出し（例：H2）をダブルクリックして選択します。
[レイアウト]のパディングで、上の値をヘッダーの高さ以上に設定します。
目次に表示される他の見出し（H1〜H3）にも、同様に設定します。
Tips：見出し上の余白が広がりすぎる場合 上パディングを追加すると、本文中の見出しの上の余白も広がります。見た目を保ちたい場合は、見出しに設定済みの上マージンを減らして調整します。
公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。