Kadenceチュートリアル：スティッキー＆トランスペアレント・ヘッダー実装完全ガイド

現代のウェブサイトデザインでは、粘着性フッターと透明なヘッダーは、視覚効果と操作の流暢さを高めるためによく使われる。またケイデンステーマ高度なヘッダー関数を使うことで、両方のスタイルを柔軟に実装したり、それらを組み合わせてリッチなページデザインを実現したりすることができる。

高度なヘッダーモジュールの追加

まず、ヘッダー（Adv）ブロックをページに追加します。新しいヘッダーを作成するか、既存のテンプレートから選択するよう促されます。ケイデンス様々なテンプレートがあらかじめ用意されている：

テンプレートを選択したら、ビジュアルエディターでコンテンツモジュールを追加し、セクションを自由に配置できます。

基本的なデスクトップのレイアウト例：

複数行のデスクトップ・レイアウトの例：

タブレット／モバイル機器のレイアウト例::

透明ヘッダーは、ページの上部に大きな画像や背景コンテンツがあるデザインでよく使われ、ページに階層感を与えます。

セットアップの手順は以下の通り：

Auto Spacing Under設定は、有効にすると表示され、ページの最初のコンテナの上部に自動的にスペースを追加し、コンテンツが見えなくなるのを防ぐために使用されます。

また、ヘッダーブロックとナビゲーションブロックに以下のスタイルオプションが追加されました：

これらのスタイルは、ページの配色やタイポグラフィのニーズに応じて微調整できる。

スティッキーヘッダーは、スクロールしてもページ上部に留まり、簡単にアクセスできます。ナビゲーターまたは運転口。

以下のように有効にする：

アクティベーション後、以下の設定が可能です：

下にスクロールすると消える：

上にスクロールすると表示される：

対応するスティッキースタイルの設定は、背景色、ボーダー、テキストカラーのオプションを含む、ヘッダーとナビゲーションのモジュールにも表示されます。

フッター（ブロックスティッキー・バックグラウンドとスティッキー・ボーダー・スタイルのブロック設定を取得します。

ナビゲーター（ブロックスティッキースタイル・ブロックの設定を取得する。

透明効果と粘着効果の両方を使用するには、ヘッダー（Adv）の一般設定で両方のオプションをオンにするだけです。

その後、[スタイル設定]で[スティッキー背景設定]を展開し、スティッキー状態の背景色と透明度をカスタマイズします。

この組み合わせは、大きな画像やブランドスローガン、ホームページのバナーを表示するなど、視覚的に要求の高いページのトップエリアに適しています。

透明ヘッダーが有効になっていなくても、スティッキー状態のヘッダーを透明または半透明にすることができます。

ヘッダー（アドバンス）のスタイル設定から、スティッキーバックグラウンド設定をオンにし、カラーピッカーで透明度を調整するだけで、お好みの視覚効果が得られます。

透明性を必要としない場合フッター完全に透明にするか、または背景色をわずかに含む半透明のスタイルに設定できます。スタイル設定の[透明な背景]を展開し、カラーピッカーで色の不透明度を調整することで、ヘッダーをよりソフトな視覚表現にすることができます。

ケイデンス高度なヘッダー機能は、様々なページデザインのニーズに合わせて、粘着スタイルと透明スタイルの独立した使用と組み合わせをサポートします。カスタムスタイルコントロールと組み合わせることで、実用的で美しいヘッダーエリアを作成し、ページ全体の品質を向上させることができます。

スタイルをさらにカスタマイズするには、以下の組み合わせがある。ケイデンス・ブロックより詳細なタイポグラフィーを実現。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み