background-clipを使用してDiviでCSSテキストの背景をデザインする方法

CSSを使用してテキストの背景デザインを作成することは、Webサイトに魅力的なデザイン要素を追加するための優れた方法です。 これらのカスタムテキスト背景を作成するための鍵は、テキスト値でbackground-clipCSSプロパティを使用することです。 この方法は最近人気があり、ブラウザでサポートされているため、Diviでの使用方法を紹介します。 これにより、Diviの他のすべてのすばらしいデザイン機能に加えて、テキスト要素（H1、H2、pなど）を対象とするデザインの追加レイヤーが開きます。

始めましょう。

スニークピーク

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

これは、background-clipを使用して見出しテキストに追加された線形グラデーションの背景の例です。

これは、見出しテキストに追加された画像の背景と、background-clipを使用して段落テキストに追加された線形グラデーションの背景の例です。

そして、これもこの概念を示すコーデックです。

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

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

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

無料でダウンロード

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

ダウンロード

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

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

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

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

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

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

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

始めるために必要なもの

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

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

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

テキストで背景クリップを使用する方法

Diviで例を作成する前に、CSSでカスタムテキストの背景を引き出すために必要なCSSコードについて理解を深めましょう。

このようなH2見出し要素があるとしましょう。

まず、使用する背景を確立する必要があります。 この例では、 linear-gradientを使用してh2要素にグラデーションの背景を追加します。

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);


}

次に、 background-clip：textと必要な「-webkit」プレフィックスバージョンを追加して、テキストの背後にのみ要素の背景を表示します。

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;

}

次に、-webkit-text-fill-color：transparentを追加して、テキストの色をオーバーライドし、透明にします。

h2 {
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

次に、線形グラデーションをよりブラウザーに適したものにするために必要なブラウザープレフィックスを追加します。

h2 {
  background: -webkit-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: -moz-linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background: linear-gradient(to right, #1613bd 0%, #d915b5 50%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ご覧のとおり、この例では3色を使用してグラデーションを作成していますが、必要な数だけ簡単に追加できます。

それが本当にすべてです。 もちろん、線形グラデーション関数を使用して、必要なグラデーションの背景のタイプを設計する方法をよりよく理解するのに役立ちます。

詳細については、線形勾配関数に関するドキュメントを確認してください。 このCSSテキストグラデーションジェネレーターを調べて、いくつかの楽しいオプションを調べることもできます。

また、グラデーションを使用したくない場合は、実際の画像の背景を使用できます。 コードは次のようになります。

h2 {
  background: center / cover url("add image URL");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

CSSについての理解が深まったので、チュートリアルに飛び込みましょう。

Diviでbackground-clipを使用してテキストの背景をデザインする

パート1：背景クリップを使用してグラデーションの背景をH1見出しに追加する

最初の例では、H1見出しにグラデーションの背景を追加します。

セクション、行、および列

まず、セクションの設定を開き、背景色を追加します。

• 背景色：＃153243

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

H1見出しのテキストモジュール

H1見出しを追加するには、行の列に新しいテキストモジュールを追加します。

テキスト設定を開き、本文コンテンツのテキストタブの下に次のH2見出しHTMLを貼り付けます。

<h1>Creating CSS Text Backgrounds in Divi</h1>

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

• 見出しフォント：Montserrat
• 見出しフォントの太さ：太字
• 見出しフォントスタイル：TT
• 見出しテキストの配置：中央
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：100px（デスクトップ）、55px（タブレット）、28px（電話）
• 見出し線の高さ：1.2em

注：見出しのテキストの色はカスタムCSSによって上書きされますが、万が一の場合に備えて、フォールバックとして選択しておくと便利です。

[詳細設定]タブで、次のCSSクラスを追加します。

• CSSクラス：text-background-clip

このクラスは、後でカスタムCSSコードのセレクターとして使用します。

CSSコード

H1にグラデーションの背景を与えるCSSコードを追加するには、テキストモジュールの下に新しいコードモジュールを追加します。

次に、次のCSSを[コード]ボックス内に貼り付けて、コードが必要なスタイルタグでラップされていることを確認します。

.text-background-clip h1 {
  background: -webkit-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: -moz-linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background: linear-gradient(to right, #e8d33f, #06D6A0, #e8d33f);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

注：次の例では、この同じコードモジュールに戻ってCSSを追加します。

結果

結果は次のとおりです。 ご覧のとおり、グラデーションの背景はクリップされているため、H1見出し要素を通してのみ表示されます。

パート1：background-clipを使用してH2見出しに画像の背景を追加する

テキストの背景のスタイルを設定するために、グラデーションの背景に限定されません。 テキストの背景を背景画像でスタイル設定することもできます。

この次の例では、同じ方法（「background-clip」を使用）を使用して、H2見出しに画像の背景を追加します。

セクション、行、および列

まず、最初の例の既存のセクションの下に新しい通常のセクションを作成します。

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

セクション設定を開き、セクションに暗い背景画像を追加します。

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

複製テキストモジュールのテキスト設定を開き、HTMLを更新してH1見出しをH2見出しに変更します。

<h2>Creating CSS Text Backgrounds in Divi</h2>

[デザイン]タブで、[H1]タブを右クリックし、見出しテキストの[H1スタイル]をコピーします。 次に、[H2]タブを右クリックし、見出しテキストの[H1スタイル]を貼り付けて、H2見出しが同じスタイルになるようにします。

CSSコード

H2に画像の背景を与える必要があるCSSコードを追加するには、前に作成した既存のコードモジュールを開き、最初のCSSスニペットの下に次のCSSを貼り付けます。

.text-background-clip h2 {
  background: center / cover url("https://jason.sandbox.etdevs.com/design/wp-content/uploads/sites/4/2021/04/gradient-background-img.jpg");
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;  
}

これにより、H2要素の背後に背景画像が追加されます。 背景CSSの省略形には、背景位置の「中央」、背景サイズの「カバー」、および実際の画像のURLが含まれます。

自分のサイトで画像のURLを見つけるには、WordPressメディアギャラリーを簡単に開いて画像を選択し、ファイルのURLをコピーします。

結果

パート3：background-clipを使用して段落テキストにグラデーションの背景を追加する

最後の例では、 background-clipを使用して、段落テキストにグラデーションの背景を追加します。 プロセスは同じです。 唯一の違いは、段落テキストのpタグをターゲットとするCSSコードです。

テキストモジュールを追加

パート2で設計したのと同じセクションで、前のテキストモジュールの下に新しいテキストモジュールを追加します。

次の段落テキストHTMLで本文の内容を更新します。

<p>Cras luctus ornare est, sed pharetra mauris vestibulum in. In nulla sem. Consectetur et tristique non, pulvinar pretium ante. Cras aliquam risus ullamcorper odio interdum facilisis. Vestibulum vitae augue tempor, commodo sapien ut, condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras luctus ornare est, sed pharetra mauris vestibulum in.</p>

注：これはカスタムCSSコードでターゲットとするセレクターになるため、テキストがpタグでラップされていることを確認してください。

[デザイン]タブで、次のテキストスタイルを更新します。

• テキストテキストの色：#ffffff
• テキストテキストサイズ：16px
• テキスト行の高さ：2em
• 最大幅：500px
• モジュールの配置：中央

[詳細設定]タブで、以前に使用したものと同じCSSクラスを追加します。

• CSSクラス：text-background-clip

CSSコード

最後に、 pタグを対象とするCSSコードを貼り付け、 background-clip：textを使用してテキストにグラデーションの背景を追加します。

.text-background-clip p {
  background: -webkit-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: -moz-linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background: linear-gradient( to right,#ddd 0%,#ea7ea2 100%);
  background-clip:text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

結果

これは、段落テキストの背景デザインの結果です。

最終結果

それでは、デザインの最終結果を確認しましょう。

これは、background-clipを使用して見出しテキストに追加された線形グラデーションの背景の例です。

これは、見出しテキストに追加された画像の背景と、background-clipを使用して段落テキストに追加された線形グラデーションの背景の例です。

最終的な考え

カスタムテキストの背景をサイトに追加する機能は、便利なデザインツールになります。 あなたは、バックグラウンド・クリップとの組み合わせで、背景CSSプロパティを使用する方法をよりよく理解取得する場合と、：テキストを、可能性は無限大です。 独自のCSSの作成について少しサポートが必要な場合は、このCSSテキストグラデーションジェネレーターを調べて、プロセスをすぐに開始することもできます。

また、すべてのカスタムCSSを使用せずに同様の効果が必要な場合は、Diviのブレンドモードオプションを使用してグラデーションテキストの色を適用する方法を確認してください。

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

乾杯！