fbpx

Elementor Pro『Gallery』ウィジェットの使い方

Gallery』ウィジェットは、フォトギャラリーをサイトに表示させる機能を持っていて、こちらはElementor Proのウィジェットになりますが、Elementorの一般ウィジェット『ベーシックギャラリー』よりも更に機能の充実したウィジェットです。

この記事ではElementor Pro『Gallery』ウィジェットの使い方を詳しく説明していきます。
もし、Elementorの無料版のみを使用している方は【Elementor一般『ベーシックギャラリー』ウィジェットの使い方】の記事がありますのでそちらをご覧ください。

Elementorのことをもっと学びたい人は、どうぞElementorの使い方完全ガイドを見てください。
様々なElementorに関する情報がまとめられています。

Galleryウィジェットの挿入

Galleryウィジェットの挿入

『Gallery』ウィジェットをドッラグ&ドロップでカラムに挿入します。

Galleryウィジェット挿入後の表示画面

こちらは『Gallery』ウィジェット挿入後の表示画面です。

コンテンツタブ・設定

コンテンツタブ・設定

タイプ

タイプ・Single / Multipleの説明

『タイプ』はフォトギャラリーの表示タイプを以下の2つのオプションより選択します。

  • Single
  • Multiple

上記のどちらを選ぶかで編集タブの使用も大きく変わってくる為、以下『Single』と『Multiple』で大きくセクションを分けて説明をしていきます。

タイプ・Single

画像の選択

まずは画像の選択をします。
『画像が選択されていません』の下の『+』をクリックします。

メディアライブラリーで画像の選択

『メディアライブラリ』から画像を選択、または『ファイルをアップロード』で画像をアップロードをし画像を挿入します。

画像挿入後の表示画面

するとこの様に選択した分の画像が画面に表示されます。

Order By

『Oeder By』は以下の2つのオプションがあります

  • デフォルト
  • ランダム

デフォルト

Oeder By・デフォルトの説明

『デフォルト』は、メディアライブラリにて選択された画像の順に画像が配置されます。
その並び順をどの様に変更するのかを以下で説明します。

画像の配置を変更する方法・編集タブ内の画像をクリック

エディター内の画像一覧をクリックします。

メディアライブラリー内で画像をドラッグ&ドロップし、画像の配置を変更

するとこの様に『ギャラリーを編集』の画面だでますので、画像をドラッグ&ドロップで好きに配置換えをすることが可能です。
試しにこちらのサンプルでは、『青い海』の画像を『レモン』の画像と『ベル』の画像の間に配置してみます。

画像配置変更後

こちらは画像の配置を変更した後の表示画面です。

ギャラリーを挿入をクリック

配置換えが終了したら左下の『ギャラリーを挿入』をクリックします。

編集画面

するとこの様に、画像の配置が編集画面でも変更されます。

ランダム

ランダムの説明

『ランダム』は文字どおり、自分の意思とは関係なく画像がランダムに配置されます。

Lazy Load

Lazy Loadの説明

『Lazy Load』とは一体何かと言うと、Galleryが挿入されたページをロードした時に、Galleryの画像が表示されていない時にだけ画像をロードさせる仕組みです。

デフォルトでLazy Loadは『はい』に設定されていますが、仮にこちらを『いいえ』に設定するとGalleryの画像が表示されていなくても画像はロードされるのでページ自体が重くなります。

こちらは設定を『はい』にしておくことをオススメします。

レイアウト / Grid

『レイアウト』では、画像のレイアウトを以下より選択します。

  • Grid(デフォルト)
  • 均等割付
  • Masonry
レイアウト・Gridの表示画面

こちらは『Grid』を選択した時の表示画面です。
画像は全て同じサイズで統一されます。

カラム

カラムの説明

『カラム』では画像のカラム数の変更ができます。
上記サンプルはカラム数を『5』にした時の表示画面です。
※デフォルトは『4』に設定されています。

Aspect Ratio

Aspect Ratioの説明

『Aspect Ratio』は以下より画像の縦横比率(横:縦)を選択することができます。

  • 1:1
  • 3:2(デフォルト)
  • 4:3
  • 9:16
  • 16:9
  • 21:9
Aspect Ratioを9:16に変更した時の表示画面

こちらはAspect Ratioを『9:16』に設定した時の表示画面です。

レイアウト / 均等割付

レイアウト・均等割付の表示画面

『均等割付』は、画像の縦幅が横一列で統一されます。
縦長の画像もすっぽりと画面に収まる分、画像は少し小さくなります。
また、3列で表示されていますが全てが同じ縦幅になるとは限りません。

Row Height

Row Heightの説明

『Row Height』はカーソルを左右にスライドすることにより、さらにGalleryのレイアウトを変更することができます。
デフォルトは『200』の値に設定されていますが、それよりも値を大きくするにつれて画像も大きくなり、1列に配置される画像の数も少なくなります。
上記はスペースの値を『390』にした時の表示画面です。
また、スペースの値を小さくすると画像は小さくなり、従って1列に配置される画像の数も多くなります。

レイアウト / Masonry

レイアウト・Masonryの説明

『Masonry』は画像の横幅が全て統一されて表示されます。

カラム

『カラム』ではカラム数を変更することができます。
※デフォルトは『3』に設定されています。
さらに詳しくは、レイアウト / Gridの『カラム』のセクションをご覧ください。

スペース

スペースの説明

『スペース』は、画像と画像の間のスペースをカーソルを左右にスライドさせることにより、拡張、縮小することが可能です。
上記はスペースの値を『100』(最大値)にした時の表示画面です。
※デフォルトは『10』の値に設定されています。

リンク

リンクの説明

『リンク』は以下のオプションが選択できます。

  • なし
  • メディアファイル(デフォルト)
  • カスタムURL

メディアファイル

メディアファイルを選択し、画像をクリックした後の表示画面

『メディアファイル』を選択し、画像をクリックすると上記画像の様な表示画面になります。
ここで言うメディアファイルとは、Lightboxでの表示形式になります。
左右に他の画像に移動する矢印も表示されます。
※メディアファイルはデフォルト設定です。

カスタムURL

『カスタムURL』にすると、編集タブ内にURLを入力するテキストバーが表示されますので飛ばしたいリンク先を入力し、画像をクリックすればそのリンク先を表示させることができます。

画像サイズ

画像サイズの説明

『画像サイズ』は以下より選択ができます。

  • Thumbnail-150×150
  • Medium-300×300(デフォルト)
  • Medium Large -768×0
  • Large-1024×1024
  • 1536×1536-1536×1536
  • 2048×2048-2048×2048
  • フル
  • カスタム
画像サイズをThumbnail-150×150にした時の表示画面

上記は画像サイズを『Thumbnail-150×150』に設定した時の表示画面です。
画像がぼやけてしまいました。
それは、画像の枠のサイズに対して画像が小さいため、画像が枠のサイズに合わせて引き伸ばされているため画質が粗くなってしまいました。

この、『レイアウト / Grid』で『カラム / 4』の設定では、Thumbnail以上のサイズでは画質に問題はありません。
だからと言って画像を大きくしすぎると今度は画像が重くなりページがロードしにくくなるため、画像の枠に対して適正な画像サイズを選ぶことが重要です。

タイプ・Multiple

タイプ・Multipleにした時の表示画面

タイプを『Multiple』に設定すると上記の様な画面表示になります。

Galleries

GalleriesのNew Galleryをクリック

まずは画像の選択をします。
『Galleries』の『New Gallery』をクリックします。
すると以下の様に編集タブが開きます。

タイトル

タイトルの説明

『タイトル』ではデフォルトで『New Gallery』と書いてありますが、好きなタイトルに変更することが可能です。

画像選択

『画像が選択されていません』と書いてある下に『+』ボタンがありますので、そちらをクリックすると画像の選択ができます。
詳しくは上記セクションの『タイプ・Single』をご覧ください。

ギャラリーに画像挿入後の表示画面

こちらは画像挿入後の表示画面です。
※こちらのサンプルでは、タイトルを『ギャラリー①』と変更し、画像はSingleで説明に用いたものと同じ画像を選択しています。

項目を追加

新しいギャラリーの項目の追加の仕方

『項目を追加』をクリックします。

項目追加後の編集タブの表示画面

すると編集タブにもう一つ新しく『New Gallery』の項目ができますので、タイトルを変更し、新たに画像を挿入します。
※項目は幾つでも追加可能です。

新しい項目に画像を追加後の表示画面

こちらは新たに設けた項目のタイトルを『ギャラリー②』とし、新たに別の画像を挿入した時のサンプル画像です。

表示全体がどの様になるのかをプレビューで見てみましょう。

こちらはプレビューの画面です。
画面を下にスクロールすると、『ギャラリー①』と『ギャラリー②』で選択した全ての画像が連なって全て表示されています。
それは画面上部を見ていただければお分かりいただけると思いますが、

『すべて』『ギャラリー①』『ギャラリー②』
と表示がされており、『すべて』がアクティブになっているので選択した画像全てが表示されたという訳です。

こちらの動画は『ギャラリー①』を選択した時の表示画面です。
『ギャラリー①』で選択した画像のみが表示されているのがお分かりいただけると思います。
※尚『ギャラリー②』をクリックすれば『ギャラリー②』で選択した画像のみが表示されます。
こちらの動画での説明は割愛します。

Filter Bar

コンテンツタブ・Filter Bar

タイプの『Multiple』を選択時のみ、コンテンツタブには新たに『Filter Bar』という編集タブが設けられます。

All Filter

All Filterを『いいえ』に設定した時の表示画面

『All Filter』を『いいえ』にすると、画面上部に表示されていた『すべて』の表示項目が無くなります。
※デフォルトは『はい』に設定されています。

All Filter Label

All Filter Labelの変更

『All Filter Label』は、上記セクションの『All Filter』が『はい』に設定されている時のみ表示される設定です。
All Filterに当たる部分、デフォルトでは『すべて』の名称の変更が可能です。

Pointer

Pointerのオプション

『Pointer』は、画像上部の『すべて』『ギャラリー①』『ギャラリー②』の内のどれがアクティブになっているかを指しているもののことです。
以下のいくつかの中からPointerのバリエーションを選択することができます。

  • なし
  • Underline
  • Overline
  • Double Line
  • フレーム付き
  • 背景
  • テキスト
Pointerの『背景』を選択した時の表示画面

こちらはPointerで『背景』を選択した時の表示画面です。

アニメーション

アニメーションのオプション

『アニメーション』はFilter Barにマウスオーバーした時にそのFilter Barが動きます。
デフォルトは『Fade』に設定されています。
アニメーションを付けたくない場合は『None』を選択してください。

こちらはアニメーションの『Sweep Up』を選択した時のサンプル動画です。

アニメーションはPointerをどれに選択しているかによっても見え方は異なってくる為、ご自身で色々な組み合わせを試されることをおすすめします。

コンテンツタブ・Overlay

コンテンツタブ・Overlay

こちらのOverlayにつきましては、【Elementor Pro『Media Carousel』ウィジェットの使い方】の記事の『コンテンツタブ・追加オプション』のセクション内の『Overlay』について説明をしている部分を参考にしてください。

スタイルタブ・画像

スタイルタブ・画像

ボーダー色

ボーダー色の説明

『ボーダー』とは、画像を囲む枠線のことです。
『ボーダー色』では文字どおり、ボーダーの色をカラーピッカーより自由に変更することが可能です。

ボーダー幅

ボーダー幅の説明

『ボーダー幅』のカーソルを右にスライドさせることにより、ボーダーの太さを変更することが可能です。
※デフォルトは『0』の値に設定されており、ボーダーはない状態です。
尚、ボーダーをつけるには、ボーダー幅の変更に加え、ボーダー色の変更どちらもしないとボーダーはつきませんのでご注意ください。

ボーダーの丸み

ボーダーの丸みの説明

『ボーダーの丸み』ではカーソルを右にスライドさせることにより画像の角に丸みをつけることが可能です。
上記画像はボーダーの丸みの値を『100』(最大値)に設定した時の表示画面です。
※デフォルトは『0』の値に設定されています。

ボーダーの丸みと各種設定により画像を正円にする方法


例えばこの様に、画像サイズを正方形にし、レイアウトやカラム数の設定次第では画像を正円にすることも可能です。
また、ボーダー(枠線)をつけないで画像だけに丸みをもたせることも可能です。

CSSフィルタ

『CSSフィルタ』につきましては、【Elementor『画像ボックス』ウィジェットの使い方】の記事の『スタイルの編集』のセクション内で『CSSフィルタ』の通常時とマウスオーバー時の設定両方が詳しく記載されていますのでそちらを参考にしてください。

ホバー時のアニメーション

ホバー時のアニメーションのオプション

『ホバー時のアニメーション』画像にマウスオーバーした時に画像が動く機能です。
以下のオプションより選択が可能です。

  • None(デフォルト)
  • Zoom In
  • Zoom Out
  • Move Left
  • Move Right
  • Move Up
  • Move Down

こちらはホバー時のアニメーションを『Move Left』に設定した時のサンプル動画です。
マウスオーバーした時に画像がチラッと左に動くのが見ていただけます。

アニメーションの継続時間(ms)

『アニメーションの継続時間』はアニメーションがスタートしてから止まるまでの時間の設定になります。
msというのはマイクロセカンドで1000ms=1秒になります。
※デフォルトは『800ms』に設定されています。

スタイルタブ・Overlay

スタイルタブ・Overlayの説明

Overlay

『Overlay』は画像にかかる幕の様なものです。

  • クラシック(デフォルト)
  • グラデーション

の2つのオプションがあります。

クラシック

Overlay・クラシックの説明


『クラシック』を選択すると、編集タブには『色』の設定のみが表示されます。
カラーピッカーより自由に色み、透明度などの変更が可能です。

クラシック・色の説明

例えば上記画像の様に『通常』の状態で色を変更してしまうと、この様に全ての画像が最初から全て同じ色のOverlayがかかります。

ホバー時の色の変更(クラシック)

例えば『普通』時は特にOverlayの色を入れずに、『ホバー』時の色を上記画像の様に別の色に設定すれば、画像がマウスオーバーした際にこの様に設定した色が入ります。

グラデーション

Overlay・グラデーションの説明

『グラデーション』は、『クラシック』が単色のみの設定に対し、グラデーションのOverlayを入れることができます。
グラデーションのタイプや角度なども変更できますので、興味のある方はご自身で色々いじって試してみてください。

ボタンモード

ボタンモードの説明

『ボタンモード』とは、フォトショップで言う『ブレンドモード』のことです。
これは画像にエフェクトをかけることができるオプションです。

ボタンモードを『Color Burn』に設定した時の表示画面(ホバー時)


こちらは『Color Burn』を選択した時の表示画面です。

ボタンモードを『Luminosity』に設定した時の表示画面

またこちらは、『Luminosity』を選択した時の表示画面です。

この様に様々なエフェクトがありますので色々試してみてください。

ホバー時のアニメーション

ホバー時のアニメーションのオプション

こちらの『ホバー時のアニメーションは』、Overlayにアニメーションをつけることができます。

こちらはOverlayのホバーアニメーションを『Zoom In』に設定した時のサンプル動画です。

アニメーションの継続時間(ms)

アニメーションの継続時間については『スタイルタブ・画像』の『アニメーションの継続時間』で説明した通りですのでそちらを参考にしてください。

スタイルタブ・コンテンツ

スタイルタブ・コンテンツ

配置

配置の説明

『配置』では、画像の上に表示されている文字(タイトルやキャプション等)の配置を

  • 中央(デフォルト)

に設定することができます。
尚上記画像は配置を『左』にした時の表示画面です。

Vertical Position

Vertical Positionの説明

『Vertical Position』は画像の上に表示されている文字(タイトルやキャプション等)の配置の縦のラインの設定です。

  • 中央(デフォルト)

から選択します。

尚上記画像はVertical Positionを『下』にした時の表示画面です。

パディング

パディングの説明

『パディング』では、カーソルを左右にスライドさせることにより、文字の更に微妙な配置を変更することができます。

タイトル

タイトルとは

『タイトル』は、画像のタイトルのことです。
コンテンツタブの『Overlay』で画像のタイトル表示させる設定にしている時のみ編集が可能です。

カラーピッカーより自由にタイトルの文字色の変更が可能です。

書体

『書体』につきましては【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらをご覧ください。

スペース

スペースの説明

『スペース』は、タイトルと説明の間のスペースをカーソルをスライドさせることにより拡張することができます。

説明

説明とは

『説明』は、画像の説明のことです。
コンテンツタブの『Overlay』で画像の説明表示させる設定にしている時のみ編集が可能です。

カラーピッカーより自由に説明の文字色の変更が可能です。

書体

『書体』につきましては【Elementorの『テキストエディター』ウィジェットの使い方】の記事で詳しく説明をしていますのでそちらをご覧ください。

ホバー時のアニメーション

ホバー時のアニメーションのオプション

コンテンツの『ホバー時のアニメーション』は、画像上に表示される文字(タイトル・説明)にアニメーションをつけることができます。
また、選択範囲が

  • Entrance
  • Reaction
  • Exit

と3パターンあります。
それらの違いについて、以下で説明をしていきます。

Entrance

こちらは『Entrance / Zoom Out』に設定した時のサンプル動画です。
Entranceの特徴は、通常時には特に画像上に文字は配置されず、マウスオーバーした時のみアニメーションの開始と同時に文字が表示されます。

Reaction

こちらは『Reaction / Shrink』に設定した時のサンプル動画です。
Reactionの特徴は、通常もマウスオーバー字も文字は表示されたままということです。

Exit

こちらは『Exit / Slide Out Up』に設定した時のサンプル動画です。
Exitの特徴は、通常時には画像上に文字は配置され、マウスオーバーした時にアニメーションの開始と同時に文字が消えてしまいます。

アニメーション継続時間(ms)

アニメーションの継続時間については『スタイルタブ・画像』の『アニメーションの継続時間』で説明した通りですのでそちらを参考にしてください。

Sequenced Animation

Sequenced Animationの説明

『Sequenced Animation』はデフォルトでは『いいえ』に設定されていますが、こちらを『はい』にすると、画像にタイトルと説明の両方が入っている場合、タイトルと説明が時間差で動きます。

こちらはホバー時のアニメーションを『Exit / Slide Out Left』に設定し、Sequenced Animationを『はい』に設定した時のサンプル動画です。

スタイルタブ・Filter Bar

スタイルタブ・Filter Bar

Align

Alignの説明

『Align』は画像上部のFilter Barの配置を選択します。
※デフォルトは『中央』に設定されています。

文字色 / 普通

文字色・普通時

普通時の文字色は、Filter Barがアクティブになっておらず、マウスオーバーもしていない状態の時の文字色です。
カラーピッカーより自由に文字色の変更が可能です。

文字色 / ホバー

文字色・ホバー時

ホバー時の文字色は、Filter Barにポインターがマウスオーバーしている時(アクティブの状態ではない)の文字色の設定です。

文字色 / ACTIVE

文字色・ACTIVE時

ACTIVE時の文字色は、Filter Barをクリックし、そのフィルターがアクティブになっている時の文字色の変更ができます。

Pointer Color

Pointer Colorの変更

『Pointer Color』の『Pointer』とは、フィルターにマウスーオーバーまたはアクティブな状態の時に文字を視覚的に指しているもののことです。
カラーピッカーより自由にPointerの色の変更ができます。
また、Pointerは『コンテンツタブ・Filter Bar』内の『Pointer』のエディターで数種類の中からデザインを変更することができます。

スペースの間隔

スペースの間隔の説明

『スペースの間隔』ではフィルターとフィルターの間の間隔をカーソルを左右にスライドさせることにより拡張したり縮小することができます。
上記はスペースの間隔の値を『100』(最大値)にした時の表示画面です。
※デフォルトの値は『20』に設定されています。

すき間

すき間の説明

『すき間』では、カーソルを左右にスライドさせることにより、Filter Barと一番上の画像の間のスペースを拡張しり縮小することができます。
上記はすき間の値を『100』(最大値)にした時の表示画面です。
※デフォルトの値は『20』辺りに設定されています。


Galleryウィジェットは、画像をたくさんサイトに掲載したい時にとても有効なウィジェットです。
また、Elementor Proならではの細かな設定を各所でできるので、オリジナリティを出すことができます。
整理され美しく見やすい、UI的に優れたサイト運営にぜひGalleryウィジェットを活用してみてはいかがでしょうか。

また、こちらは画像を取り扱ったウィジェットを以下にまとめてみました。

是非参考にしてくださいね!

コード書かないウェブ制作を学べるサロン『TOFUラボ』

目次

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

WordPressの最新情報が
毎週届く無料メールマガジン

DiviやElementorの情報だけでなく、脆弱性が見つかったプラグインやテーマのリストも毎週届きます。セキュリティの強化につながります。

管理人のナオミが書くメルマガ
海外でエンジニア歴10年以上
DiviとElementorに精通