Elementorの画像ウィジェットの使い方

Elementorの画像ウィジェットの使い方

今回はElementorの画像ウィジェットの使い方を説明していきます。

画像ウィジェットは、ElementorでWEBページを作成する時に欠かせないウィジェットです。しっかり理解していきましょう!

この記事は『Elementor Proの使い方』のコースを元に作っています。
動画でみたい方は是非このコースをチェックしてみてください。
TOFUラボに参加することによって無料で見ることもできます。

画像ウィジェットの挿入

画像ウィジェットの挿入

まずは、基本である画像ウィジェットの挿入です。この動作はどのElementorウィジェットを使用する時も変わらず、ドラック&ドロップで行います。

画像ウィジェットを挿入すると画像の様に山のようなプレイスホルダーの画像が出てきます。
左側に表示されている編集画面にもプレイスホルダーの画像が表示されているのでそこをクリックしてください。

画像ウィジェットの挿入で画像の選択

そうすると、画像の様にメディアを挿入できる画面になるので表示させたい画像を選んでください。
そうすれば、プレイスホルダーの画像が表示されていた部分に選択した画像が表示されるようになります。

これが、画像ウィジェットの基本である画像の挿入です。

コンテンツタブでの編集

画像ウィジェットのコンテンツタブでの編集

画像が表示されたので、コンテンツタブでの編集の説明をしていきます。

コンテンツタブでは『画像サイズ』・『配置』・『キャプション』・『リンク』のそれぞれで編集が可能となります。

画像サイズ

画像サイズ

画像サイズの編集では、画像の様に様々な画像サイズが選択できます。
が、ここで選択できる画像のサイズは必ずしも表示されている画像のサイズではなく、ロードされる画像のサイズとなります。

基本的に表示される画像のサイズは、カラムの枠以上に大きくはなりません。
なので、画像の様に小さく表示させることは可能でもカラム枠以上のサイズを選択しても枠以上に大きくは表示されません。

Elementorで設定を変更すれば、画像サイズに基づくサイズで表示させることはできるのですが、今後そういった設定の説明をまたしていきます。

配置

配置はカラム枠内での配置を変更する編集です。
なので、カラム枠一杯な画像サイズだと配置で画像の表示場所を変更することができません。

なので、画像の様にカラム枠に対して小さい画像を表示させてスペースを作っておきましょう。

スペースさえあれば、画像の様に配置で『左』・『中央』・『右』とそれぞれ配置場所を選択すると画像が選ばれた配置場所に移動します。
(画像では『右』を選択)

キャプション

キャプションは表示されている画像に『見出し』を付ける機能です。

キャプションには2種類用意されており『カスタムキャプション』・『Attachment Caption』です。

カスタムキャプションは選択すると、画像のようにキャプションの下にカスタムキャプションという選択肢が表示され『画像のキャプションを入力』とある欄に見出しを入力することができます。

今回は画像の様にテストと入力しているので、表示画像の下にテストと見出しが入力されています。

Attachment Captionは画像ようなElementorの画面で入力するものではなく、画面左の『画像を編集』部分の表示されている画像をクリックして移動する、メディアを挿入の画面で編集するCaptionです。

画像ではすでにケーキの画像が選択されており、右側にキャプションの欄があります。
Attachment Captionはここのキャプション欄に入力された見出しを表示させる機能です。

今回は、メディアキャプションと入力したのでそのまま『メディアの挿入』をクリックすれば見出しが挿入された画像が表示されます。

入力した画面が通常のElementor編集画面ではないので、Attachment Captionで入力したCaptionはメディアの挿入画面でしか編集ができない仕様となってます。

リンク

コンテンツタブ最後の説明はリンクです。

リンクとは画像をクリックしたときに起こることを設定していく項目です。
選択できる項目には『メディアファイル』・『カスタムURL』の2種類があります。

なので、このリンクで設定する項目は画像をクリックしたときにメディアファイルが起動するのか、カスタムURLが起動するのかを選択するということです。

その内のメディアファイルでは、選択すると『Light Box』というオプションが表示されます。

画像のようにLight Boxにも2種類の選択肢があり、『はい』・『いいえ』で選択できます。

ここで『はい』を選択して、プレビューをクリックしてみましょう。
そして表示されている画像をクリックしてください。

そうすると、画像のようにクリックされた画像のポップアップが表示されます。
これが、Light Boxと呼ばれている機能です。

ここでは、右上にあるアイコンから『ズーム』などの機能をページを見ている人が使用することができます。

『いいえ』を選択すると、画像のポップアップは立ち上がりますが『はい』の時に表示されていた機能が表示されなくなります。

リンクで『カスタムURL』を選択すると、その名の通りURLを入力する欄が表示されます。
ここに、画像をクリックしたときに飛ばしたい先のページURLを入力したり見て欲しい画像のURLを入力して画像を表示させることもできます。

さらに、画像の様にリンクの設定をクリックすると画像をクリックして表示させたいリンク先を「新しいウィンドウ』で開くことや、リンク先をNofollowにすることができます。

ここまでが、画像ウィジェットのコンテンツタブの説明となります。

スタイルタブでの編集

次にスタイルタブの編集の説明に入ります。

スタイルタブには『幅』・『幅の上限』・『高さ』など基本的にスタイルを編集できる内容がそろっています。

幅はそのままの意味で、画像の幅を変更します。

バーでスライドしていただいても良いですし、%・Pixel・VWで数値を入力することで設定することができます。
(VWはあまり聞きなれないかもしれませんが、画面幅の何%で表示するのかを設定できる値です)

幅の上限

幅の上限は、実際に上記の『幅』で変更することができる上限の設定となります。
幅の上限も%・Pixel・VWでの数値で設定することが出来ますが、Pixelでセットするのがおすすめです。

何故かというと例えば、幅を30%でセットしていると幅の上限を%でセットすることなくすでに30%の幅で設定されているからです。
同じ事を両方で繰り返してしまうので意味をなさないのです。

なので、幅の上限の有効的な使い方の例として、幅は80%に設定しておいて幅の上限を300Pixelに設定します。
このような設定であれば、幅で設定した値が幅の上限以上になれば必ず300Pixelとなりますし、上限以内であれば設定した%表示が可能となります。

高さ

高さはそのまま、画像の高さを変更できる項目です。

ただ、オプションとしてObject Fitという項目があり『塗りつぶし』・『カバー』・『含む』と選択できます。


塗りつぶしはそのままデフォルト設定となっているので初期状態からの変化は選択してもありません。

カバーは縦一杯に画像を表示させ、横はトリムで切っています。

含むはその高さ内に、必ずすべて写真を表示させます。

不透明度

不透明度は時の通り、画像を不透明にできる設定。
設定数値1が完全な透明でそこからどんどん不透明に画像を編集することができます。

CSSフィルタ

このCSSフィルタは画像自体に直接編集することができます。

例えば、ぼかしであれば画像をぼかすことができますし、明るさやコントラストをブラウザ上で編集することができてします機能です。

ボーダータイプ

ボーダータイプは画像の様に、画像の枠を設定できる機能です。
どのようなボーダーを入れれるのかは直線・二本線など言葉から想像できるかと思います。

さらに、ボーダータイプの『幅』・『色』・『枠線の丸み』などを編集する事もできます。

幅や色はそのまま枠線の太さを変更したり、枠線の色を変更したりします。
ここで面白い機能が枠線の丸みです。

ここを設定することによって、画像の様に枠線の角が丸くなっていきます。
画像の角を丸くするだけで、印象が変わるので非常に使える機能かと思います。

ボックスシャドウ

ボックスシャドウは画像の様に表示している画像に影を付けることができる機能です。
その中でも影の色を変更したり、水平・垂直に影を伸ばしたり、影をぼかしたり、スプレットで影を広げたりすることが可能です。

今回解説していないマウスオーバーなどは別の機会に詳しく解説していきます。

これで画像ウィジェットの説明を終わります。
このウィジェットはかなりクリエイティブな編集が可能なので是非色々と試してみてください。

目次

そのElementorの質問
実際に使ってる人に聞いてみませんか?

TOFUラボはElementorを使う人が集まるサロンです。
メンバーは130人を超えます。