スティッキーブロックでコンテンツを印象的に表示する
「スティッキーブロック」の機能で、ページスクロール時に特定のブロックを画面上部に常に吸着させることができます。 ヘッダーやフッターに常にブロックが配置される「フロート」とは違い、どの位置のブロックにも設定可能です。※ペー […]
2024.02.19 | 【終了】3/19(火) システムメンテナンス実施のお知らせ |
---|---|
2023.12.19 | 【終了】1/16 システムメンテナンス実施のお知らせ |
2023.12.05 | 【終了】12/5 システムメンテナンス実施のお知らせ |
2023.10.23 | 【終了】11/21 システムメンテナンス実施のお知らせ |
2023.09.15 | 【終了】9/19 【ブログ機能】緊急メンテナンスのお知らせ |
ゴーストヘッダーの設定をすることで、ページのスクロール時、ヘッダー内の指定したブロックを表示させることができます。
フロート設定でも追随するヘッダーの設定は可能ですが、フロート設定はゴーストヘッダーでのみ表示させたいヘッダーメニューを作成することで、」「スクロール時のみ、異なるデザインのヘッダーを表示させる」ことが可能となります。
ゴーストヘッダーの設定は、レスポンシブ形式でのみご利用可能です。また、スマホ、タブレットでは表示されません。
ヘッダーエリアの鍵マーク横のボタンより〈ゴーストヘッダーを使う〉をクリックします。
現在のヘッダーの内容をコピーするかを選択します。〈はい〉を選択すると、ヘッダーの全ブロックがそのままコピーされ、ゴーストヘッダーエリアが現れます。
〈いいえ〉を選択すると、コンテンツがないゴーストヘッダーが作成されます。
〈はい〉を選択し、コピーを行うと、すでにゴーストヘッダー側で作成済みのブロックが全て上書き保存されますので、ご注意雨ください。
ここでは〈はい〉を選択します。
ゴーストヘッダーエリアが表示され、元のヘッダーと同じ内容のコンテンツがコピーされました。
ゴーストヘッダーエリアに設定されているコンテンツが、スクロール時に追随して表示されます。
もし、必要なコンテンツのみスクロール時に表示させたい場合、ゴーストヘッダー内の不要なコンテンツを削除します。ここでは、メニューのブロックのみ表示させるため、ロゴのブロックを削除しました。
〈プレビュー〉をクリックします。
最上部では、ヘッダーが表示されます。
ページをスクロールすると、ゴーストヘッダーに設定されているコンテンツのみ表示されます。
ゴーストヘッダーの背景色や背景画像は、サイトエディタ画面の「プロパティ設定」にある「ページデザイン」や、ブロックエディタ内の「背景色」で変更可能です。
ゴーストヘッダーに背景色を設定した場合の表示です。