DiviのスティッキーヘッダーにCSS背景フィルター効果を追加する方法

公開: 2021-07-21

CSSの背景フィルター効果を追加することは、スティッキーヘッダーメニューのデザインを後押しするための楽しくてユニークな方法です。 background-filter CSSプロパティを非常にユニークなものにしているのは、要素の背後の領域にフィルター効果を適用できることです。 ページを下にスクロールしているときにページのデザインをヘッダーの後ろで魔法のように変更できるため、これはスティッキーヘッダーに最適なオプションです。 この効果がapple.comのような人気のあるサイトで使用されているのを見たことがあるかもしれません。

このチュートリアルでは、DiviのスティッキーヘッダーにCSS背景フィルター効果を追加する方法を紹介します。 最初に、3つの簡単なステップを含む既存のヘッダーに背景フィルター効果を追加する簡単なプロセスについて説明します。 その後、ヘッダー全体を最初から作成する方法を説明します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

スクロールすると、ヘッダーの後ろの要素に適用されるぼかしと彩度のフィルター効果に注目してください。

ヘッダーに追加されたこの背景フィルター効果の簡単なライブデモについては、このcodepenを確認してください。

グローバルヘッダーテンプレートを無料でダウンロード

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする
無料でダウンロード

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

テンプレートをアップロードする方法

Diviテーマビルダーに移動します

テンプレートをアップロードするには、WordPressWebサイトのバックエンドにあるDiviThemeBuilderに移動します。

DiviのBushcraftLayoutPackのヘッダーとフッターのテンプレート

グローバルデフォルトのウェブサイトテンプレートをアップロードする

次に、右上隅に2つの矢印の付いたアイコンが表示されます。 アイコンをクリックします。

DiviのBushcraftLayoutPackのヘッダーとフッターのテンプレート

[インポート]タブに移動し、この投稿でダウンロードできたJSONファイルをアップロードして、[Diviテーマビルダーテンプレートのインポート]をクリックします。

DiviのBushcraftLayoutPackのヘッダーとフッターのテンプレート

Diviテーマビルダーの変更を保存

ファイルをアップロードすると、デフォルトのWebサイトテンプレートに新しいグローバルヘッダーとフッターが表示されます。 テンプレートをアクティブ化したらすぐに、Diviテーマビルダーの変更を保存します。

DiviのBushcraftLayoutPackのヘッダーとフッターのテンプレート

チュートリアルに取り掛かりましょう。

CSS背景フィルター効果を既存のヘッダーに追加する

プロセスを示す最も簡単な方法は、Diviの既存のヘッダーにCSS背景フィルター効果を追加することです。 本当に、それはこれらの3つの簡単なステップに要約されます：

  1. ヘッダーセクションに半透明の背景色を追加します
  2. 背景フィルターカスタムCSSをヘッダーセクションに追加します
  3. ヘッダーセクションにスティッキーポジションを追加する

Diviでそれを行う方法は次のとおりです。

テーマビルダーでヘッダーを編集する

テーマビルダーに移動し、クリックして既存のヘッダーテンプレートを編集します。

セクションに半透明の背景色を追加する

ヘッダーメニュー要素を含むセクションの設定を開きます。 次に、半透明の背景色をセクションに追加します。 この例では、セクションに次の背景色を付けます。

  • 背景色：rgba（0,0,0,0.8）

背景フィルターカスタムCSSを追加する

次に、セクションのメイン要素にカスタムCSSのスニペットを使用して、（backdrop-filter CSSプロパティを使用して）backdrop-filter効果を追加できます。 [詳細設定]タブで、次のCSSをメイン要素に貼り付けます。 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

これらのフィルター効果は、すべてのDivi要素に組み込まれているフィルター効果に似ています。 主な違いは、背景フィルターが背後の要素に効果を追加するのに対し、Diviの組み込みフィルター効果は要素自体に効果を追加することです。

ここでは、セクションの背後にあるすべてのデザイン要素にフィルター効果を適用する2つのフィルター効果（飽和とぼかし）を使用しています。

他のフィルター関数値（またはこれらの組み合わせ）を追加して、独自のデザインを作成することを自由に検討してください。 これらの中で最も便利なものは次のとおりです。

  • ブラー（）
  • 輝度（）
  • 対比（）
  • グレースケール（）
  • hue-rotate（）
  • 反転（）
  • セピア（）
  • saturate（）

ヘッダーにスティッキーポジションを追加

最後に、ヘッダーセクションに粘着性のある位置を与えるようにしてください。

最終結果

ライブページでの最終結果を見てみましょう。 スクロールすると、ヘッダーの後ろの要素に適用されるぼかしと彩度のフィルター効果に注目してください。

ゼロからのCSS背景フィルター効果を使用したヘッダーの作成

CSSの背景フィルター効果を使用してヘッダー全体を最初から作成する場合は、次の方法で作成できます。

テーマビルダーでグローバルヘッダーを作成する

テーマビルダーに移動し、クリックして新しいグローバルヘッダーを作成します。

CSS背景フィルター効果を使用したスティッキーセクションの作成

このチュートリアルの最初の部分で行ったように、CSSの背景フィルター効果を使用してスティッキーセクションを作成することから始めましょう。

グローバルヘッダーレイアウトエディターで、セクションに1列の行を追加します。

セクションの設定を開きます。 次に、次の半透明の背景色をセクションに追加します。

  • 背景色：rgba（0,0,0,0.8）

次のようにパディングを更新します。

  • パディング：0px上、0px下

次に、セクションのメイン要素にカスタムCSSのスニペットを使用して、（backdrop-filter CSSプロパティを使用して）backdrop-filter効果を追加できます。 [詳細設定]タブで、次のCSSをメイン要素に貼り付けます。 

-webkit-backdrop-filter: saturate(200%) blur(10px);
backdrop-filter: saturate(200%) blur(10px);

最後に、ヘッダーセクションに粘着性のある位置を与えるようにしてください。

  • スティッキーポジション：トップに固執

行設定の編集

セクションが終了したので、行設定を開き、以下を更新します。

  • 側溝幅：1
  • 幅：95％
  • パディング：上20px、下20px

ロゴ画像を追加

行の設定が更新されたら、画像モジュールを行/列に追加してロゴを作成します。

ロゴ画像を画像モジュールにアップロードします。

次のように画像デザイン設定を更新します。

  • 幅：50px
  • マージン：0px右

メニューの作成

次に、画像モジュールの下にメニューモジュールを追加します。

[コンテンツ]タブでメニューを選択し、メニューに透明な背景色を付けます。

  • 背景色：rgba（0,0,0,0）

[デザイン]タブで、メニューのデザイン設定を次のように更新します。

  • スタイル：左揃え
  • アクティブリンクの色：#fff
  • メニューフォント：Montserrat
  • メニューフォントの太さ：半太字
  • メニューテキストの色：#fff
  • テキストの配置：中央
  • ドロップダウンメニューの背景色：＃333
  • ドロップダウンメニューの線の色：#fff
  • ドロップダウンメニューのテキストの色：#fff
  • ドロップダウンメニューアクティブリンク：#fff
  • モバイルメニューの背景：＃333
  • モバイルメニューのテキストの色：#fff
  • ショッピングカートのアイコンの色：#fff
  • 検索アイコンの色：#fff
  • ハンバーガーメニューアイコンの色：#fff
  • 幅：80％（デスクトップとタブレット）

テキストモジュールでボタンを作成

ヘッダーの小さなボタンを作成するには、テキストモジュールを使用します。 メニューの下にテキストモジュールを追加します。

作品「ショップ」で本文の内容を更新します。 次に、テキストモジュールに白い背景色を付けます。

  • 本文：「ショップ」
  • 背景色：#fff

[デザイン]タブで、以下を更新します。

  • テキストフォント：Montserrat
  • テキストフォントの太さ：半太字
  • テキストテキストの色：＃333
  • テキスト行の高さ：2em
  • テキストの配置：中央
  • 幅：50px
  • 丸みを帯びた角：5px

ここで、テキストモジュールの幅はロゴ画像と同じです。 これは、カスタムCSSで列のflexプロパティを使用するときに、アイテムを完全に整列させるのに役立ちます。

列内のモジュールをCSSFlexプロパティに揃える

ロゴ、メニュー、およびテキストモジュールが列に追加されたら、列の設定を開き、次のカスタムCSSをメイン要素に貼り付けます。 

display:flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items:center;

ヘッダーのレイアウトとテンプレートを保存する

完了したら、レイアウトとテンプレートを必ず保存してください。

最終結果

これが最終的なデザインの別の見方です。 スクロールすると、ヘッダーの後ろの要素に適用されるぼかしと彩度のフィルター効果に注目してください。

ブラウザのサポート

残念ながら、backdrop-filter CSSプロパティは現在、IEとFirefoxではうまく機能しません。 ただし、フォールバックはセクションに与えられた半透明の背景色になります。これは引き続き機能し、見栄えがします。

最終的な考え

うまくいけば、あなたの次のプロジェクトは素晴らしい背景フィルター効果を持つヘッダーから利益を得るでしょう。 Diviのヘッダーに追加するのは本当に簡単で、利用可能なさまざまなフィルター関数値をすべて調べるのは楽しいことです。

コメントでお返事をお待ちしております。

乾杯！