Studio エディタ:要素とセクションをピン留めする
3分
訪問者が重要な情報を見逃さないようにしたい場合、「ピン留め」の配置設定を使用して、要素とセクションを所定の位置に固定することができます。これにより、上下にスクロールしても、訪問者は常にアクセスできるようになります。
ヒント:
ヘッダースクロールエフェクトを追加して、訪問者が上下にスクロールした際の表示方法を変更します。たとえば、スクロール中にヘッダーの色を変えたり、邪魔にならないようにヘッダーを移動させたりして、訪問者がページに集中できるようにします。
要素とセクションをピン留めする
要素をコンテナ、セクション、またはページに固定して、サイト訪問者がいつでもアクセスできるようにします。同様に、セクションを固定して、重要なコンテンツやナビゲーションパーツ(例:サイトメニュー)の視認性を高めることができます。
ピン留めできない要素 / セクションはありますか?
注意:
各ページごとに 1つのセクションのみ固定することができます。また、セクションではすべてのブレイクポイントでページに枠線を設定する必要があります。
要素を固定する方法:
- 該当するセクション、または要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。

- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「ピン留め」を選択します。
- (要素のみ)「ピン留め位置」下で要素を固定する場所を選択します:
- コンテナ・セル:要素は、親コンテナかセルを基準にして固定されたままになります。
- セクション:訪問者がセクションを上下にスクロールしても、要素は固定されたままになります。
- ページ:訪問者がページ全体を上下にスクロールしても、要素は表示されたまま固定されます。

ヒント:
既定では、ピン留めされたセクションはその下のセクションと重なっています。
ピン留めした位置を削除する
要素とセクションはいつでも既定の位置に戻すことができます。これは、ユーザーが画面に固定されるのではなく、サイトのその位置に留まることを意味します。
ピン留めした位置を削除する方法:
- 該当するセクション、または要素を選択します。
- エディタ右上の「要素設定パネルを開く」アイコン をクリックします。

- 「配置」までスクロールダウンします。
- 「配置タイプ」ドロップダウンから「既定」を選択します。
