WordPressのテーマビルダープラグイン「Elementor」のファンブログ

背景 攻略(後編)背景の種類と使い方

前編のおさらい

前編では、 背景 の基本操作をご紹介致しました。ウィジェットのみならず、ページ、セクション、カラムといろいろな背景があり、組み合わせる事で、様々な表現が出来る事をお伝え致しました。今回は後編という事で、更に細かい設定や、背景を使った応用的表現をご紹介していきたいと思います。

前編をまだご覧になっていない方はこちらからどうぞ!

背景オーバーレイ

 オーバーレイという言葉、わかりそうで分からない方もいるかと思います。直訳すると「重ねる」「覆う」「被せる」という意味です。つまり、背景の上に重ねたり、覆ったり、被せたり出来る背景を「背景オーバーレイ」といいます。

前編でご紹介しましたが、Elementorの階層としては、ページ背景>セクション背景>セクション背景オーバーレイ>カラム背景>カラム背景オーバーレイ>ウィジェット背景の順となります。

背景 オーバーレイの種類

まず、上にも書きましたが、背景オーバーレイが設定出来る箇所としては、セクションとカラムとなります。

背景オーバーレイに設定出来る背景タイプは、クラシック(単色カラー)と、クラシック(画像)、グラデーションの3タイプです。動画は背景オーバーレイには設定出来ません。

各種タイプの設定方法は前編と同様となりますので、忘れてしまった場合は、前編をご覧下さい。

背景 オーバーレイの透明度

背景と違い、背景オーバーレイには「透明度」という項目があります。背景オーバーレイを透明する事で下の背景が見え、背景オーバーレイを透明にしないほど、下の背景は見えなくなります。設定値は0(完全に透明)〜1(透明度なし)の間で設定出来ます。

bg_overlay

上の画像はそれぞれの透明度を実際に設定した画像です。背景が単色のイエローで、背景オーバーレイは建物の画像です。一番上は背景オーバーレイが完全に透明の状態、つまり透明度0の場合です。徐々に透明度を1に近づけると背景オーバーレイに設定された建物写真がはっきりしてくるのがわかるかと思います。

CSSフィルター

CSSによる画像へフィルタをかける事が出来ます。

おじさん
おじさん
まんまやな・・・


こちらをご覧下さい。

cssfilter_bgol

コントロール出来る項目としては「ぼかし」「明るさ」「コントラスト」「彩度」「Hue(色相)」です。背景がごちゃごちゃしていると、上に乗っかるコンテンツが見づらくなってしまったり、色が強すぎたりする場合は、CSSフィルターを使う事で、見やすくなったりもします。

特にホバーとCSSフィルターを使うと、面白い背景が出来ます(笑)

ボタンモード

これはレイヤー効果の様な働きをします。フォトショップなど画像加工ソフトを利用した事がある方だと分かりやすいかもしれません。どんな変化があるか見てみて下さい!

Elementor Pro 背景

背景にはElementor Proならではの項目があります。特にモーション(動き)に関する項目です。

Scrolling Effects(スクローリングエフェクト)

これも実際に動いているところを見て頂いた方がなんとなく分かるかもしれませんので、こちらをご覧下さい。

違いを分かりやすくする為、最初は添付を「固定」にして比較しています。次に、scrolling effectを「オン」にして、1つずつ試しています。

Vertical Scroll:スクロールに合わせ、縦位置を変化出来ます。
Horizontal Scroll:スクロールに合わせ、横位置を変化出来ます。
Transparency:透明度を変化させる事が出来ます。
Blur:ボケ感を変化させる事が出来ます。
Scale:背景画像のサイズをスクロールに合わせ、拡大縮小出来ます。

背景とコンテンツを組み合わせる事で、さらにScrolling Effectの効果はアップします!

おじさん
おじさん
ちょっとふざけすぎじゃないか・・・


す、すみません。あくまでサンプルという事で・・・(汗)

さらに、「Apply Effects On」で、モーションを実行するデバイスもデスクトップ・タブレット・モバイルとそれぞれ設定出来ます。例えば、モバイルをこの項目から削除すると、スマホから見た時はモーション効果をオフにします。

Mouse Effects(マウスエフェクト)

マウスの動きに合わせ、対象となるものを動かす事が出来ます。背景の場合は、「Mouse Track」という効果のみが使えます。マウスの動きに合わせて背景も動きます。

おじさん
おじさん
それだけ?


正直背景ではあまり使わないかと・・・というのは、薄い色やデザインの背景イメージであればまだ良いかと思いますが、写真やコントラストの強いイメージだと、正直うざいです(笑)とは言え、この効果を見た人はもっとも注目するコーナーかと思います。

まとめ

前編と後編に分け、背景についてレビューしてみました。いかがでしたでしょうか?特に背景オーバーレイはいろいろな活用方法があるかと思いますので、いろいろと試して見てはいかがでしょうか。

おそらくホームページのデザインで大きく印象を変えるのは背景かと思います。特にレイヤー感を上手に使ったサイトは見栄えもよく、プロ感が出せると思います。デザインについてはプロではないので、具体的なご提案は出来ませんが、ご自身の好きなサイトをまずは真似て見るのも良いかもしれません。

どうしてもElementorを使っていると、背景=セクションみたいな感覚になりがちですが、カラムやウィジェット、ときにページに設定してみると、意外とカッコ良くなるかもです!

関連記事

Elementor 背景 攻略(前編)背景の種類と使い方

Elementor公式サイト

この記事の関連講座

Elementorのレスポンシブモード 講座
Elementorを使うためのWordPress講座
ブログの作り方講座

author

ITKA / 加藤 誠

ITKA / 加藤 誠

Elementorを使い始めて6年目、好き過ぎてファンブログを始めて4年。Elementorを使って年間約30サイトを制作しております。主にWebマーケティング支援事業を中心とし、現在5社の顧問・コンサルティングとして携らさせて頂いております。Elementorのご相談からWeb集客のご相談はお気軽にお問い合わせ下さい。

こちらもご覧下さい

ポップアップ!

こんな感じで横スライドイン!
なんてことも出来ます。