Diviですりガラスの背景デザインを作成する方法

ウェブサイトにすりガラスの背景を追加することは、背景とテキストを独自の方法で際立たせる新鮮なデザイン要素になる可能性があります。 すりガラスの背景効果を作成する秘訣は、ターゲット要素の背後にある背景をぼかすことです。 つまり、ターゲットの背景がすりガラスのように見え、要素の背後にある背景のぼやけたバージョンが表示されるように、2つの要素をブレンドする必要があります。

このチュートリアルでは、Diviですりガラスの背景デザインを作成するための3つの方法を紹介します。 最初に、1行のCSSでつや消しの背景を作成する強力な背景フィルターCSSプロパティを紹介します。 次に、Divi要素（背景スタイルとフィルターを使用）をレイヤー化して、美しいつや消しの背景デザインを作成する2つの方法を紹介します。

始めましょう！

スニークピーク

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

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

私たちのYoutubeチャンネルを購読する

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

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

始めるために必要なもの

開始するには、次のことを行う必要があります。

1. まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
2. WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
3. 「最初から構築」オプションを選択します。

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

Diviですりガラスの背景デザインを作成する方法

方法1：背景フィルターCSSプロパティを使用してすりガラスの背景を作成する `

この最初の例では、background-filterCSSプロパティを使用してすりガラスの背景デザインを作成する最も簡単な方法を示します。 必要な結果を得るのに必要なのはCSSの行だけなので、簡単です。 欠点は、現在、背景フィルターをサポートしていないブラウザーがいくつかあることです（IEおよびFirefox）。

つや消しの背景デザインの目的は、単にターゲット要素の背景をぼかすだけでなく、要素の背後の背景をぼかすことです。 backdrop-filterプロパティは、ターゲット要素の下（または後ろ）の要素にぼかしフィルター効果を適用することでこれを行うことができます。

これがその方法です。

セクションの背景画像の追加

まず、セクションに1列の行を追加します。

セクション設定を開き、背景画像を付けます。

行の背景色と背景フィルターの追加

次に、行の設定を開き、次のように半透明の白い背景色を追加します。

• 背景色：rgba（255,255,255,0.3）

[デザイン]タブで、行のサイズと間隔を次のように更新します。

• 幅：90％
• 最大幅：900px
• パディング：上5％、下5％、左5％、右5％

[詳細設定]タブで、次のCSSをメイン要素に追加します。

-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);

これにより、要素の背景に10pxのぼかしフィルターが追加されます。 CSSが行に適用されている場合でも、効果によってセクションの背景画像がどのようにぼやけているかに注目してください。 CSSのピクセル値を変更することで、ぼかしの量を増減できます。

テキストモジュールを使用したコンテンツの追加

つや消しの背景にコンテンツを提供するには、行の列にテキストモジュールを追加します。

次に、次のHTMLをテキストタブの下の本文に貼り付けます。

<h2>Frosted Glass Background</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

デザインを磨くために、次のようにテキストスタイルを更新しましょう。

• テキストフォントの太さ：半太字
• テキストテキストの色：＃33345b
• テキストテキストサイズ：16px
• テキスト行の高さ：2em
• 見出し2フォント：ポピンズ
• 見出し2フォントの太さ：太字
• 見出し2フォントスタイル：TT
• 見出し2テキストの配置：左
• 見出し2のテキストの色：＃33345b
• 見出し2テキストサイズ：70px（デスクトップ）、40px（タブレット）、25px（電話）
• 見出し2文字の間隔：2px
• 見出し2行の高さ：1.3em

結果

これが最終結果です。 それは簡単だとあなたに言いました！

方法2：視差とレイヤードモジュールを使用してすりガラスの背景を作成する

この次の方法では、Diviですりガラスの背景効果を作成する方法を少し工夫します。 これを作成するのは簡単ではありませんが、プラス面は、デザインがすべてのブラウザーでサポートされていることです。 したがって、background-filterの信頼できるフォールバックを探している場合、これは機能するはずです。

これがその方法です。

視差背景画像でセクションを追加

まず、作成したセクションの下に新しい通常のセクションを作成します。

次に、セクションに1列の行を追加します。

CSSメソッドを使用して、視差効果のある背景画像をセクションに与えます。

• 視差効果を使用する：はい
• 視差法：CSS

前のテキストモジュールと同じコンテンツの追加

次に、上記の最初のセクション/例からテキストモジュールをコピーして、新しいセクションの行に貼り付けます。

列の設定

次に、重複するテキストモジュールを含む列の設定を開き、次のようにパディングを更新します。

• パディング：上10％、下10％、左10％、右10％

[詳細設定]タブで、オーバーフローの可視性を次のように更新します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

テキストモジュールでぼやけた背景画像レイヤーを追加する

コンテンツとセクションの背景視差画像が配置されたので、コンテンツの背後にあるつや消しの背景を構成する2つのテキストモジュール（またはレイヤー）の最初の部分を追加する必要があります。

まず、ぼやけた画像レイヤーとして機能するテキストモジュールを追加します。

先に進み、既存のテキストモジュールの下に新しいテキストモジュールを追加します。

テキストモジュールを、テキストコンテンツを含むテキストモジュールの上に移動します。

次に、本体の内容を取り出して、空のままにします。 このモジュールは、背景画像にのみ必要です。

次に、同じCSS視差効果を使用して、同じ背景画像をテキストモジュールに追加します。

• 視差効果を使用する：はい
• 視差法：CSS

背景画像に同じCSS視差効果を使用しているため、セクションの背景の同じ固定位置に同じ画像が表示されるため、画像の背景に気付くことはありません。

[デザイン]タブで、次のフィルターをテキストモジュールに追加します。

• ぼかし：10px

これで、視差の背景画像のぼやけたバージョンができました。

次に、テキストモジュールに絶対位置を指定します。

• 位置：絶対

モジュールが絶対位置にあるので、モジュールが柱の幅と高さ全体に広がるようにサイズのスタイルを更新できます。

• 幅：100％
• 高さ：100％

これでぼやけた画像が配置され、すりガラス効果が有効になっていることがわかります。

別のテキストモジュールでぼやけた画像オーバーレイを追加する

次のステップは、ぼやけた画像のテキストモジュールの上に別のテキストモジュールを追加して、デザインを完成させるためのライトオーバーレイとして機能させることです。

オーバーレイを作成するには、ぼやけた画像のテキストモジュールを複製します。

複製テキストモジュールの設定を開き、背景画像を削除します。

次に、次の背景色を追加します。

• 背景色：rgba（255,255,255,0.5）

[デザイン]タブで、ぼかしフィルターを0pxに戻します。

次に、最終結果を確認します。

方法3：実際の画像サイズとレイヤードモジュールを使用してすりガラスの背景を作成する

つや消しの背景での視差効果はかっこいいですが、作成されたつや消しの背景での視差効果に限定したくない場合があります。 同じ効果は、実際のサイズの背景画像を使用して行うことができます。

この最後の方法では、実際のサイズの画像を使用して、列レベルでつや消しの背景デザインを作成します。 このプロセスは、上記の方法2と同様です。 利点は、この方法を使用して、Divi行の複数の列につや消しの背景を作成できることです。

前のセクションを複製

デザインをジャンプスタートするには、2番目の例を含む2番目のセクションを複製します。

セクションの背景を更新

セクション設定を開き、背景画像を削除して、次の背景色を追加します。

• 背景色：＃33345b

列の背景とパディングを更新する

次に、列の設定を開き、前の例で使用したものと同じ背景画像を追加します。 今回のみ、背景画像のサイズが実際のサイズに設定されていることを確認してください。

• 背景画像：実際のサイズ

次に、次のように新しいパディングで列設定を更新します。

• パディング：上10％、下10％、左15％、右15％

ぼやけた画像のテキストモジュール画像を更新する

次に、ぼかし画像テキストモジュールの設定を開き、列の背景に使用したものと同じ画像を追加して、背景画像のサイズを実際のサイズに設定します。

• 視差効果を使用する：いいえ
• 背景画像サイズ：実際のサイズ

ぼやけた画像とオーバーレイテキストモジュールのサイズと位置の場所を変更する

背景のぼかし画像テキストモジュールとオーバーレイテキストモジュールの周囲に必要な間隔を作成するには、複数選択を使用して両方のモジュールを選択し、次のようにサイズ設定オプションを更新します。

• 幅：80％
• 高さ：80％

次に、絶対位置の位置を中央に更新します。

• 場所：中央

これが最終結果です。

微調整で複数の列レイアウトを作成する

2列のレイアウトの列を複製することもできます。 つや消しの背景がコンテンツの背後に配置されるように、見出しのテキストサイズと列のパディングを調整する必要があります。 また、必要に応じて、列に使用される背景画像とぼかし画像テキストモジュールを切り替えることができます。

これは2列のレイアウトの例です。

最終結果

これがすべての例の最終結果です。

最終的な考え

このチュートリアルでは、Diviでつや消しの背景デザインを作成するための3つの方法を示しました。 あなたの何人かは最初にこの種のもののためにフォトショップで画像をカスタマイズする方が簡単だと思うかもしれません。 しかし、Diviでは、それは必要ありません。 最初の方法は、backdrop-filter CSSプロパティを利用し、はるかに簡単で最も強力なソリューションです。 ただし、このプロパティがすべてのブラウザで採用されるまでは、このチュートリアルでDiviビルダーを使用する他の2つの方法を使用できます。 全体として、つや消しの背景効果は本当に素晴らしいように見えます。

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

乾杯！