カラム(段組)の背景画像

左のサイトは、WordPressテーマ:Astraの初心者用に作られたスターターテンプレート「クリスティーナのメイクアップスタジオ」で作成された見本ページです。

そのトップページのアイキャッチ画像の直下にある以降の画像に目が釘ずけになりました。4人の女性の画像が4列のカラム(段組)で表現されています。

普通の画像処理では、左記のような画像表現はできないと思います。即ち、4カラムの2カラム目と4カラム目の画像が他のカラムの画像より下方向に50pxずれているのです。

普通では、このようなイレギュラーな画像設定はできないと思いますが、Elementorならできるのです。今回、その驚くべき設定方法を明らかにしてみました。

画像はカラムの背景画像として設定

先ず、二段のカラム(段組み)を設置します。そして左の段組み内に内部セクションを挿入して、その段組み複製で4段の段組みを設定します。

一番左の段組み内に背景画像として最初の画像を挿入します。画像挿入は画像ウジェットで挿入するのではなくて、背景画像として挿入するのが、今回のミソと言えます。

何故そうなのかは後で分かると思いますので、ここでは理由は敢えて述べません。そして「カラムを編集」で位置として「中央の中」を選択します。これは、画像の中心と段組の中心を合わせる設定にします。

そしてサイズで「カバー」を選択します。

背景画像の角を丸くする設定

次に、「カラムを編集」の「枠線」のボーダータイプを「なし」にして、枠線の丸みを「12」に設定すると画像の4隅が直角から丸みを持った角になります。

この辺の設定が、単なる画像ウジェットによる画像挿入ではできない機能なので、敢えて背景画像として画像挿入することになるのです。

背景画像を見えるようにするには?

ここで注意する設定として背景画像を見えるようにするための処理を忘れてはなりません。

背景画像は、その上にオーバーレイしたウジェットがあって始めて表面に現れる特性があります。

一般的に上に被せるウジェットは「スペーサー」が使われます。即ち、背景画像を設置したカラム(段組み)の上に「スペーサー」を設置します。

設置した「スペーサー」の高さを400pxくらいにして背景画像を覆うようにします。

「マージン」設定で画像の縦方向のズレを表現

「カラムを編集」の最後の設定が「高度な設定」になります。

「高度な設定」のマージンを全て5pxに設定します。これは、隣接する背景画像の余白を10pxにするための設定となります。

以上で、4つの背景画像の最初の背景画像の設定処理が終わります。あとは2列目~4列目の背景画像の設定を繰り返すことで目的が達成されます。

但し、左記のマージン設定は1列目と3列目のマージン設定となります。2列目と4列目のマージン設定は次のところで記載します。

2列目及び4列目のマージン設定

左記のマージン設定は、4列の背景画像設定の内の2列目と4列目のマージン設定になります。

4つあるマージン設定の最初のマージン50は、背景画像の縦下方方向に50pxずらすことを意味します。

マージン3番目の-50は、背景画像の縦下方方向に50pxにずらすことを意味します。

このことはマージン1番目の50とマージン3番目の-50がペアとなって背景画像を段組み枠の中で下方方向に50pxずらすことになるのです。

元の写真の画像サイズは300x500pxです。

元々の画像は、横300px、縦500pxの縦長画像です。
その画像を単純に横に並べると左記のようになります。

完成画像は背景画像です。

上記の画像加工を、施した結果、完成した画像が左になります。

背景画像+モーション効果です。

前記の結果に、モーション効果を追加してみました。

その効果をもう一で見たい場合には、ブラウザの更新ボタンを押してみて下さい。