スクロール中もブロックを表示し続ける

先頭固定表示の要素とは、訪問者がページを下にスクロールしても「固定」されたままになるサイトのブロックです。このガイドでは、ボタン、ヘッダー、メニューの一般的な例を使用して、先頭固定表示の要素を作成する方法について説明します。同じ手順を使用して、サイトの内容を先頭固定表示できます。

ブロックまたはブロックのグループを先頭固定表示にするには、「先頭固定表示」の位置設定が特別に用意されたグループブロック内に、ブロックを配置します。次の手順に従って、サイトに先頭固定表示の要素を作成します。

1. サイトのダッシュボードにアクセスします。
2. 「ページ」、「投稿」、または「外観」→「テンプレート」に移動し、先頭固定表示にするコンテンツを編集します。
3. エディターの左上隅にある「リストビュー」を選択します。3本の横線が上下に並んでいる形のアイコンです。
4. 既存のグループブロックを選択するか、新規作成します。
   • グループをすばやく作成するには、複数の要素を選択して3つの点 (⋮) をクリックし、「グループ」を選択してグループブロック内に配置します。
   • 先頭固定表示にするには、要素が最上位置にある (つまり、他のブロック内にネストされていない) 必要があります。
5. グループブロック設定サイドバーで 「位置」 セクションを見つけて、ドロップダウンから「先頭固定表示」オプションを選択します。
6. 「保存」ボタンをクリックして変更をテンプレートに適用します。

先頭固定要素を含むグループブロックのスタイルとレイアウトをさらにカスタマイズする方法について、詳しくご確認ください。

先頭固定表示メニューを作成すると、読者がページをスクロールしている間、メニュー全体が「固定」されたままになります。先頭固定表示メニューを作成するには、次の手順を実行します。

1. ダッシュボードから「外観」→「エディター」に移動します。
2. 「テンプレート」タブを選択し、ヘッダーのあるテンプレートをクリックします。
3. 左上隅にある「リストビュー」アイコンをクリックします。
4. ナビゲーションブロックを選択し、それが最上位の要素であることを確認します (ほとんどの場合、ナビゲーションブロックはヘッダーテンプレートパーツまたは同様のレイアウト要素の中にネストされているため、移動して独立させる必要があります)。
5. ナビゲーションブロック項目の横にある3つのドット (⋮) をクリックし、「グループ」を選択してメニューをグループブロック内に配置します。
6. ブロック設定サイドバーで、「位置」を「先頭固定表示」に設定します。
   • グループの背景色を変更して、さまざまなコンテンツをスクロールする際にメニューのテキストを読みやすくすることもできます。
7. 「保存」をクリックします。

先頭固定要素を含むグループブロックのスタイルとレイアウトをさらにカスタマイズする方法について、詳しくご確認ください。

訪問者がサイトをスクロールしても、先頭固定表示ヘッダーは画面に固定されたままになります。先頭固定表示ヘッダーの作成方法をご確認ください。