コード書かないで無料のツールだけでウェブサイト作成実演ウェビナー!

開催: 5月9日
締め切り: 5月7日 17時

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

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

Web上でわかりやすく情報を提供するのに画像はなくてはなりませんよね。
Elementorの基本ウィジェットの1つ『画像』ウィジェットは、名前の通り画像を編集するウィジェットです。
画像ウィジェットに限らず、Elementorには画像編集が組み込まれたウィジェットがたくさん存在し、それらの画像の編集の仕方はほとんど同じです。
こちらの記事では『画像』ウィジェットについて詳しく説明していきます。

画像ウィジェットの挿入

画像ウィジェットの挿入

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

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

すると、このような画面表示になります。

コンテンツタブの編集

コンテンツタブの編集

画像の選択

画像の選択の説明

画像の選択をします。
上記画面の『画像選択』の下のボックス(画像)をクリックします。

メディアライブラリ

メディアライブラリ

するとこの様に『メディアを挿入』の『メディアライブラリ』の画面が表示されます。

メディアライブラリは、すでに自分でアップロード済みの画像が保管されている場所です。
ここから画像を選択する場合は、

  1. 挿入したい画像を選択します。
  2. 画面右下の『メディアを挿入』をクリックします。
画像挿入後の表示画面

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

ファイルをアップロード

『ファイルをアップロード』の説明

新しい画像を使用したい場合、またはまだ画像がメディアライブラリに無い場合は『ファイルをアップロード』での操作が必要です。

  1. 画面左上の『ファイルをアップロード』をクリックします。
  2. ファイルを画面上にドロップ、または『ファイルを選択』をクリックすると表示されるファインダーの中からファイルを選択します。
  3. 『メディアを挿入』をクリックします。

画像サイズ

画像サイズの説明

『画像サイズ』は画面上に表示される画像の大きさではなく、ロードする画像の大きさを選択します。

  • Thumbnail – 150×150
  • Medium – 300×300
  • Medium – 768×0
  • Large – 1024×1024
  • 1536×1536 – 1536×1536
  • 2048×2048 – 2048×2048
  • フル
  • カスタム

以上8つのオプションから選択することが可能です。
尚、デフォルトは『Large- 1024×1024』に設定されています。

画像サイズをMedium-300×300に設定した時の表示画面

例えば、画像サイズを『Medium – 300×300』に変更すると上記画像の様に表示の画像が小さくなりました。

画像サイズを1536×1536に設定した時の表示画面

そして画像サイズをデフォルトの『Large』よりも大きくしてみます。
すると画面上のサイズは変更しません。
なぜなら、このカラムの枠の横幅よりも画像は大きくならないからです。

配置

配置の説明


『配置』は画像の位置をカラム内の

  • 中央

に配置を変更することができます。

しかし、上記画像の様にすでにカラム幅いっぱいに画像が表示されている場合は『配置』せ何を操作しても変更することはありません。

配置を『左』に設定した時の表示画面


こちらは配置を『左』に設定した時の表示画面です。

中央

配置を『中央』に設定した時の表示画面

こちらは配置を『中央』に設定した時の表示画面です。

配置を『右』に設定した時の表示画面

こちらは配置を『右』に設定した時の表示画面です。

キャプション

キャプションの説明

『キャプション』では、画像の真下に添える文章の編集をすることができます。
※デフォルトでは『なし』に設定されており、他に

  • 添付ファイルのキャプション
  • カスタムキャプション

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

カスタムキャプション

カスタムキャプションの説明

『キャプション』を『カスタムキャプション』を選択すると、編集タブの中の『カスタムキャプション』の編集セクションが表示されます。
『カスタムキャプション』の右のテキストバーに入力をするとキャプションが表示されます。

添付ファイルのキャプション

添付ファイルキャプションの説明

『添付ファイルのキャプション』を選択すると、画面上・編集タブ共に変化は起きません。
なぜならこちらの設定は、Elemeontorの編集画面ではない別の部分の編集が反映されるからです。

『画像の選択』の画像をクリックします。

メディアライブラリのキャプション設定

メディアライブラリの画面の右側の『添付ファイルの詳細』にある『キャプション』の記入欄があります。
そこにテキストを入力し、『メディアを挿入』をクリックします。

メディアライブラリでキャプション挿入後の表示画面

するとこの様に編集画面に自動的に戻り、画像下にメディアライブラリで記入したキャプションが編集画面に反映されます。

Elementormの編集画面から直接キャプションを変更したい時は『カスタムキャプション』を選択しましょう。

リンク

リンクの説明

『リンク』では、この画像をクリックした時に何が起こるのかを設定します。
デフォルトではリンクは『なし』に設定されています。
それ以外に以下の2つのオプションがあります。

  • メディアファイル
  • カスタ URL

メディアファイル

Ligntboxの説明

『メディアファイル』は、画像をクリックするとメディアファイルにリンクします。
リンクを『メディアファイル』に選択すると、リンクの下に新たに『Lightbox』という編集セクションが表示されます。
※設定は『デフォルト』になっています。

Lightboxとは

プレビュー画面の行き方

『Lightbox』とは何なのかを説明するために、サイトのプレビュー画面で説明をします。
プレビュー画面に行くには、編集タブに一番下の『公開』ボタンの左にある『目』のマークをクリックし、出てきたボックスの中の『プレビュー』をクリックします。

サイトプレビューで画像をクリック

するとこの様にサイトのプレビュー画面に切り替わりますので、画像をクリックします。

Lightboxの表示

するとこの様に綺麗な画像のポップアップが表示されます。
この表示方法が『Lightbox』です。

尚、『Lightbox』の設定を『デフォルト』と『はい』にした時にLightboxは表示されます。

Lightboxを『いいえ』にした時に画像をクリックした時に表示される画面

こちらは『Ligntbox』を『いいえ』に設定した時のサイトプレビュー画面です。
この様に、画面いっぱいに写真が表示されます。
こちらは画像の『ファイル』にリンクが飛び、閲覧しているサイトと同じタブで表示がされます。

画像リンクをファイル形式で表示させる場合、新しいタブでファイルを開く方法もあります。
そちらは以下のセクションで説明する『カスタムURL』での設定になります。
新しいタブでファイル形式の画像を表示させる方法』をご覧ください。

カスタムURL

カスタムURLの説明

リンクを『カスタムURL』に設定すると、編集タブにはURLを入力するテキストバーが表示されます。
そちらに、この画像をクリックしたらリンクさせたいURLを記入します。

新しいタブでファイル形式の画像を表示させる方法
  1. 表示させたい画像ファイルの URLをテキストバーに入力します。
  2. テキストバーの右側の歯車マークをクリックします。
新しいウィンドウで開くにチェック

すると、

  • 新しいウィンドウで開く
  • Nofollowを追加

のオプション選択が表示されますので、『新しいウィンドウで開く』に✔️チェックをつけます。

スタイルタブの編集

スタイルタブの編集

幅の説明

『幅』では、カーソルを左にスライドさせることにより画像の幅を狭めることができます。
ここでいう『幅の値』は、カラムの幅に対しての画像の幅の値を何%に設定するかということです。
※デフォルトでは100%に設定されています。

幅の値を50%にした時の表示画面

こちらは幅の値を『50%』にした時の表示画面です。
画像の横幅がカラムの幅の50%に合わせて表示されているのがお分りいただけると思います。

px(ピクセル)

幅の値をPXにした時

『px』とは『ピクセル』のことです。
デフォルトは『%』で設定されていますが、値は『px』または『vw』にも変更することが可能です。
上記画像は画像の値を『300px』に変更した時の表示画面です。

vw

幅の値をVWにした時

『vw』という値は画面の幅の何%で表示するかということです。
上記画面では画像の値を『10vw』に設定した時の表示画面です。
ここで勘違いしてはいけないのは、カラムの幅ではなく、『画面の幅』です。

VWの詳しい説明

こちらのサンプルでは1つのセクションに2つのカラムを挿入しています。
画面幅というのは2つのカラムの左端から右端までの幅のことで、その値は『100 vw』になります。
ですので、この『幅』の調整でいくら100vwにしても、画像幅が動くのは1〜49vw(1つのカラムの最大の幅が49vw)です。

こちらの値に関して、好きなものを選択していただいて構いませんが、『%』または『px』での設定が分りやすいのでおすすめです。

幅の上限

幅の上限の説明

『幅の上限』では、値をまず『px』で設定することをおすすめします。

幅・幅の上限共に%の値にした時

なぜなら、前セクションの『幅』も『幅の上限』の値も『%』に設定していると、同じ設定を2箇所でやってしまうことになるので意味がありません。

幅の値が%なら幅の上限はPXにする

例えば上記画面のように

  • 幅:80%
  • 幅の上限:400px

で設定をすると、
例えば表示される端末(スマホ・タブレット・デスクトップ等)で画面サイズが変わるように、幅は80%で設定されているので各端末の画面幅80%で表示されます。
ですがここで幅の上限をあらかじめ『400px』などと決めておくと、画面幅が400px以下の時は『幅の設定80%』で表示されますが、画面幅が400pxを超える端末で表示される時に、『上限:400px』なので画像サイズが400pxが最大の表示となります。

高さ

高さの説明

『高さ』では、画像の高さの変更ができます。
高さでは『px』か『vw』での設定のみになり、『%』の値はありません。
編集タブの『高さ』の下に『Object Fit』とあり、

  • デフォルト
  • 塗りつぶし
  • カバー
  • 含む

の4つのオプションがあり、これらの設定との関係性によっても画像の見え方は変わってきます。
※こちらのサンプルの画像の縦の高さは370pxです。

デフォルト(塗りつぶし)

Object Fit:デフォルト・高さを500PX(最大幅)にした時の表示画面

『Object Fit』のオプション4つの内の『デフォルト』と『塗りつぶし』というのは実は同じです。
上記画面のように『高さ』の値を370PXよりも大きくすると画像の横幅は固定されたまま、高さが大きくなるので画像が縦に伸びたようになります。

高さを元の画像よりも小さくした時の表示画面

『高さ』をこのサンプル画像の370pxの値よりも小さい値にすると、上記画像のように画像の横幅はそのままに、高さだけが変更するので画像が潰れたような表示になります。

カバー

Object Fit:カバー・高さを370PX(元の画像サイズと同じ)にした時の表示画面

『カバー』に設定した時の画像の表示の変化を説明します。
上記は元の画像の高さである370pxに設定した状態です。

Object Fit:カバー・高さを500PX(最大幅)にした時の表示画面

『高さ』の値を370pxよりも大きい値にすると、上記画面のように画像の横幅も縦幅に比例して大きくなります。
しかし、『デフォルト』または『塗りつぶし』と違うのは横幅はカラム幅以上にはならないけれど、画像は伸びることなく、ズームさせたような表示になります。

含む

Object Fit:含む・高さを370PX(元の画像の高さ)にした時の表示画面

『含む』に設定した時の画像の表示の変化を説明します。
上記は元の画像の高さである370pxに設定した状態です。

Object Fit:含む・高さを500PX(最大幅)にした時の表示画面

こちらは『高さ』を『500px』にした時の表示です。
『含む』の設定は、どのような高さに設定しても、必ず画像全体がカラム内で表示されます。
元の画像がカラムの横幅にぴったりになるように表示されていたので、ここでいくら高さの値を大きくしても画像のサイズが変わることはなく、カラムの高さだけが大きくなり、カラムの上下に余白がついたような表示になりました。

不透明度 / 通常

普通時のの不透明度を0.5の値にした時の表示画面

『不透明度』ではカーソルを左にスライドすることにより、画像に透明度を追加することができます。
上記画像は不透明度の値を『0.5』に設定した状態です。
※デフォルトの値は『1』の完全に不透明な状態に設定されています。

CSSフィルタ

CSSフィルタの説明

『CSSフィルタ』では画像の色調を変更したりエフェクトをつけることができます。

  • ぼかし
  • 明るさ
  • コントラスト
  • 彩度
  • 色相

のカーソルをそれぞれ左右にスライドすることで自由に変更できます。
※デフォルトでは上記5つの全ての値は『0』に設定されています。

マウスオーバー

『マウスオーバー』とは、ポインターが何かしらのオブジェクトに触れている時のことを『マウスオーバー』と呼びます。

不透明度

マウスオーバー時の不透明度を1にした時の表示画面

『マウスオーバー』の『不透明度』の設定はポインターが画像に触れた時の画像の不透明度を設定できます

こちらのサンプルでは、

  • 通常時の不透明度:0.5
  • マウスオーバー時の不透明度:1

に設定してみます。

こちらの動画は通常時とマウスオーバー時で画像の表示が変わるのを映したものです。
通常時は半透明の画像が、ポインターが触れると画像が鮮やかにはっきり表示されるのがお分りいただけると思います。

トランジション所要時間

トランジション所要時時間の説明

『トランジションの所要時間』とは、ポインターが画像にマウスオーバーした時に、画像の変化に要する時間のことです。
デフォルトでは『0』秒に設定されており、カーソルを右にスライドすることで最大3秒までトランジションの所要時間を設定することができます。

以下の動画では『トランジションの所要時間』を『1.5』秒に設定し、マウスオーバー時に画像が1.5秒かけてゆっくり変化していく様子をご覧いただけます。

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

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

『ホバー時のアニメーション』は、ポインターが画像にマウスオーバーした時に、画像にアニメーションをつけることができます。
『ホバー時のアニメーション』はデフォルトでは『なし』に設定されていますが、『なし』の右側の▼をクリックすると上記画像のようにアニメーション一覧が表示されたボックスが開き、そこから好きなものを選択することが可能です。

こちらは『ホバー時のアニメーション』を『Wobble Skew』に設定した時の表示画面です。
アニメーションの種類はたくさんありますので、色々試し見比べてみてください。

ボーダータイプ

ボーダータイプ(枠線)の説明

『ボーダータイプ』の『ボーダー』とは、画像を囲む『枠線』のことです。
オプションは以下の6つです。

  • なし
  • 直線
  • 2本線
  • 点線
  • 破線

※デフォルトでは『なし』に設定されています。

デフォルトの状態の各枠線の表示サンプル

こちらは各画像に各ボーダーをつけた時のサンプル表示です。
※色や太さは全てデフォルトの設定です。

各ボーダータイプの見本

『幅』では、ボーダー(枠線)の幅の太さを『上 / 右 / 下 / 左』の値を変更することにより、ボーダーの幅を太くしたり、細くすることができます。

上記画像は、各ボーダーの幅の値をずべて『10』にした時のサンプルです。

幅の値を上右下左で別々にす方法

幅の値を上右下左で別々にす方法・値をまとめてリンクを解除

幅の各値を別の値にしたい時は、まず『値をまとめてリンク』をクリックし、値のリンクを解除します。

上・右・下・左の各枠線の値を変更した時のサンプル画像

するとこの様に、『上 / 右 / 下 / 左』の幅の値をそれぞれ変更することができます。

枠線の色の変更

『色』では、ボーダー(枠線)の色をカラーピッカーより自由に変更することができます。

また、色のタブ上にある『グローバルカラー』(地球のアイコン)の使用方法につきましては、
ElementorのGlobal ColorsとGlobal Fontsの使い方』の記事を参考にしてください。

枠線の丸み

枠線の丸みの説明

『枠線の丸み』では、『上 / 右 / 下 / 左』の値を変更することにより、枠線の角に丸みをつけることができます。
上記画像は各値を『30』に設定した時の表示画面です。

上・右・下・左の枠線の丸みの各値を変更した時の表示画面

例えば枠線の丸みの『値をまとめてリンク』を解除すると、上 / 右 / 下 / 左の値をそれぞれ別々の値にすることができます。
上記画像は枠線の丸みの値を

  • 上:250
  • 右:250
  • 下:0
  • 左:0

にした時のサンプルです。
この様にアレンジすることも可能です。

ボックスシャドウ

ボックスシャドウの説明

『ボックスシャドウ』では、画像の背景に影をつけることができます。
タブのペンのマークをクリックすると上記画像の様に、

  • 水平
  • 垂直
  • ぼかし
  • スプレッド

のエディターが出てきます。

『色』では、ボックスシャドウの色をカラーピッカーより自由に変更することができます。

水平

ボックスシャドウの水平の値の変更

こちらは『水平』の値を『40』にした時の表示画面です。
尚、デフォルトの値は『0』に設定されています。
カーソルを左にスライドさせ、マイナスの値にすると、ボックスシャドウは画像左側・水平に現れます。

垂直

ボックスシャドウの垂直の値の変更

こちらは『垂直』の値を『40』にした時の表示画面です。
尚、デフォルトの値は『0』に設定されています。
カーソルを左にスライドさせ、マイナスの値にすると、ボックスシャドウは画像上部・垂直に現れます。

ぼかし

ボックスシャドウのぼかしの値の変更

こちらは『ぼかし』の値を『60』にした時の表示画面です。
尚、デフォルトの値は『10』に設定されています。

ボックスシャドウのぼかしの値を0にした時

こちらは『ぼかし』の値を『0』にした時の表示画面です。
ボーダーの丸みもそのままボックスシャドウに反映されていますね。

スプレッド

ボックスシャドウのスプレッドの値の変更

こちらが『スプレッド』の値を『70』にした時の表示画面です。
ボックスシャドウが放射線状に広がっているのがお分りいただけると思います。
尚、デフォルトの値は『0』に設定されています。
カーソルを左にスライドさせ、マイナスの値にすると、ボックスシャドウは放射線状に内側に向けて小さくなります。


画像ウィジェットはElementorの基本のウィジェットに1つです。
この記事で紹介したことは、Elementorの画像が関わるウィジェットの全ての基本操作に関わる情報が書かれています。
ぜひ、Elementorの画像の編集で何かわからないことがある時は参考書代わりにこの記事をご覧くださいね!


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

目次

コメントを残す

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

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

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