フォローする

ヘッダー部分を固定させる方法

ヘッダー部分を固定する方法をご紹介します。

 

▼例えば、ヘッダー部分のナビゲーションを固定し、
 サイトをスクロールしてもそのまま表示されるように設定する場合です。

 

 

 

▼以下、設定手順をご紹介致します。

今回はGoodsieのテンプレートで設定されている「main」のページを使って、
 設定方法ご紹介致します。

 

①レイアウトタグ「main」のページより、サイト上部に行を追加し、
 幅を画面全体まで拡大します。

 

②追加した行をハサミツールで分割します。

 

③分割した行にコンテンツを挿入します。(※今回は、ロゴとナビゲーション)

(補足)

コンテンツタブ、「ナビゲーション」内の階層を「ネストリスト」/詳細設定を「ホバーで表示」に設定すると、ナビゲーションを横並びに配置することができます。

※ナビゲーションの挿入・表示設定に関しては詳しくはコチラから 

 

 

④「デザインタブ」を選択状態で、画像部分をクリック。
 「イメージ[モジュール]」を選択。
 「背景」項目より、背景色を設定。「位置」項目より、位置を「固定」。
  重なり順序を「2」に設定。

  *位置を「固定」にすると配置がズレることがありますが、後で調整します。

 

⑤ナビ部分をクリックし、「ナビ[モジュール]」を選択。
「背景」項目より、背景色を設定。「位置」項目より、位置を「固定」、
 重なり順序を「2」に設定。(背景色は上記設定と同じ)

 

⑥文字の間隔・位置は「デザインタブ」の「間隔」項目より、
 マージン/余白を活用して調整します。

 

上記設定より、ヘッダー部分が固定されます。

スクロールしてもナビが同じ部分に表示されるので、
ユーザービリティの向上につながります。是非お試し下さい。

この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください

コメント

Powered by Zendesk