WordPressで画像をオーバーレイする方法

公開: 2021-07-15

あなたがあなたのウェブサイトを傑出したものにすることに熱心であるならば、あなたはそれを美化するためにいつもあなたのお尻を動かします。あなたのサイトをミューズにする方法は何百万もありますが、そのうちの1つが今日の投稿で言及されます：画像のオーバーレイ。

目次を隠す

1.オーバーレイとは何ですか？
2.ワードプレスで画像をオーバーレイする方法
1. 2.1。方法1：グーテンベルクのカバーブロックを使用する
2. 2.2。方法2：CSSを使用する
3.評決

それが何であるかまだ疑問に思っていますか？ゆっくりと、あなたを連れ出しましょう！

オーバーレイとは何ですか？

ご覧のとおり、見出しとしてテキストとオーバーレイを含む画像を使用しました。これは、単純なテキスト見出しを書くこととは大きな違いをもたらしました。通常に比べてずっとスタイリッシュで魅力的に見えますよね？

さらに重要なことに、画像のオーバーレイは、背景画像を表示したままテキストを強調表示するのに役立ちます。テキスト付きの画像を追加し、そのような投稿/ページに簡単にオーバーレイして、さまざまな目的に使用できます。この投稿では、簡単な手順でそれを行う方法を紹介します。

まだ興奮しましたか？始めましょう！

WordPressで画像をオーバーレイする方法

WordPressで画像をオーバーレイする方法は2つあります。Gutenbergのカバーブロックを使用する方法とCSSを使用する方法です。グーテンベルクを使用すると、空のシートからでもオーバーレイ付きの画像を含む投稿/ページを作成できますが、CSSを使用すると、作成済みの投稿/ページの画像をすばやくカスタマイズできます。

これらの2つの方法はどちらもいくつかの点で使いやすいので、それらを1つずつ使用する方法を示します。

方法1：グーテンベルクのカバーブロックを使用する

グーテンベルクのページエディタに移動します。

ステップ1：カバーブロックを使用して画像を挿入します。

[ブロックの追加]をクリックして、ブロックタイプを[カバー]として選択します。

次に、そのカバーブロックに表示する背景画像を選択します。画像をアップロードするか、ライブラリから画像を選択できます。

必要に応じて、前に追加した画像をカバー画像に変更することもできます。画像をクリックし、[ブロックスタイルまたはタイプの変更]を選択して、[カバー]を選択します。

私の場合、このビーニーを背景として選択し、それにランダムなテキストを書き込みます。

また、以下の設定で画像の幅を設定できます。中央に揃えます。

これで、カバーブロックに背景画像とテキストを追加する準備が整いました。デフォルトでは、Coverブロックにはすでに黒色のオーバーレイがあるため、次のパートで編集する方法を説明します。

ステップ2：カバーブロックオーバーレイをカスタマイズする

次に、ブロック設定に進んでオーバーレイを作成します。

ブロックをクリックし、[オプション]ボタン（3つの点線のボタンとして表示）をクリックし、[その他の設定を表示]を選択します。

これで、画面の右側にブロック設定メニューが表示されます。 [オーバーレイ]セクションに移動します。

カバー画像をオーバーレイするためのソリッドとグラデーションの2つのカラーオプションがあります。

これらのオプションの両方を試してみます。まず、単色オーバーレイを試してみましょう。

単色オーバーレイ

今、あなたはできる：

提案されたメニューから色を選択します。
カスタムカラーを選択します。パレットで色を選択するか、カラーコードを挿入できます。カスタムカラーは以下のように表示されます。

オーバーレイに甘いピンク色を選びました。さらに、オーバーレイの不透明度（透明度レベル）を変更することもできます。

30〜60％の不透明度が適切な値です。不透明度を推奨レートより下または上に設定すると、オーバーレイがほとんど見えなくなったり、太すぎて背景が見えなくなったりする可能性があります。不透明度はデフォルトで50％のままにします。

すべてここに設定されています！このようにして、カバー画像に単色のオーバーレイを簡単に追加できます。

それでは、グラデーションカラーオプションに移りましょう。

グラデーションカラーオーバーレイ

上記のように、グラデーションカラーは少なくとも2つの選択されたカラーのスキームです。または簡単に言うと、オーバーレイの色はそれぞれ、最初に選択した色から2番目に選択した色に徐々に変化します（以下同様）。

グラデーションオーバーレイを作成して理解を深める方法を見てみましょう。

まず、カラーモードをソリッドからグラデーションに変更しました。また、提案メニューからグラデーションカラーセットを選びました。これはそれがどのように見えるかです：

ご覧のとおり、オーバーレイは3つのコントロールポイントで構成されています。それぞれに単色があり、これらのコントロールポイントを移動して、オーバーレイの配色を調整できます。

グラデーションカラーを選択したときのデフォルトの配色はバランスが取れています。私はそれを少し調整しようとします、そしてこれはそれがどのように変わるかです：

あなたがすることができるもう一つの調整は、配色のタイプです。 リニアタイプとラジアルタイプからお選びいただけます。 リニアタイプでは、オーバーレイの方向を選択することもできます。

そのグラデーションカラーオプションを習得するには、より芸術的な感覚が必要です。また、オーバーレイに最適な組み合わせを作成するために色を組み合わせて組み合わせる方法も学ぶ必要があります。

方法2：CSSを使用する

クラシックエディタを使用して画像にオーバーレイを追加する場合は、CSSを使用する必要があります。 CSSを追加する必要があります。 [外観]> [カスタマイズ]> [追加のCSS]に移動します。

グラデーションオーバーレイの場合

グラデーションオーバーレイ用に次のコードを追加します。

 .background-gradient {
    位置：相対;
}
.background-gradient :: before {
    コンテンツ： '';
    背景：linear-gradient（135deg、＃0693e3、＃9b51e0）;
    位置：絶対;
    上：0;
    左：0;
    下：0;
    右：0;
    z-index：1;
    不透明度：.5;
}

ソリッドオーバーレイの場合：

ソリッドオーバーレイ用に次のコードを追加します。

 .background-不透明度{
    位置：相対;
}
.background-opacity：before {
    コンテンツ： '';
    位置：絶対;
    上：0;
    左：0;
    下：0;
    右：0;
    z-index：1;
    不透明度：.5;
    背景色：＃000;
}

注：このコードは、画像上のテキストではなく、オーバーレイのみを追加するのに役立ちます。

さまざまな種類のオーバーレイを使用して多くの画像を追加する場合は、両方を追加できます。 ソリッドやグラデーションカラーなどのオーバーレイを定義するには、テキストエディタに行くとあなたがオーバーレイしたい画像にクラスを追加します。

実線： <div class="background-opacity"> … </div>
グラデーション： <div class="background-gradient is-style-default"> … </div>

例えば：

それが私がそれを成し遂げる方法です！

評決

画像にオーバーレイを追加すると、投稿やページを装飾し、訪問者の印象を良くするのに役立ちます。完璧なオーバーレイを作成する方法を掘り下げる価値があるので、すぐに作業を開始することを強くお勧めします。スライダー、ポップアップバナー、ビデオの背景などを使用して、Webサイトをより魅力的にすることもできます。私の説明が十分に明確であることを願っています。質問やコメントがあれば、以下に残してください。さよなら！