ウィジェットマニュアル「画像」
ページ内に簡単に画像を表示させられます。ただ、表示するのではなく、様々な表現が出来、サイト訪問者へ大きなインパクトを与えたり、目に付くワンポイントとして配置する事も出来ます。
【コンテンツ】（無料版・PRO版共通）
①画像の選択
このエリアをクリックすると、メディア一覧が表示されます。既にアップロードしている画像であれば選択して「メディアの挿入」をクリックするだけ。まだアップロードしていなければ、右上の「ファイルをアップロード」から画像をアップロードするだけです。
②画像サイズ
見た目のサイズというよりは、画像ファイル自体のサイズを意味します。例えば本当は幅100pxで表示させれば良い部分に、幅1000pxの画像を入れ（後ほどご紹介するスタイル）縮小すると、ブラウザ読み込み時に幅1000pxの画像として読み込み、重くなる要因になります。それを防ぐ為、ここで画像サイズを設定する事で、無駄な読み込みを軽減してくれます。カスタムを選択した場合、幅と縦をそれぞれ数値設定出来ます。
（注意）表示させたいサイズより少し余裕を持った設定にしよう。
例えば、カスタムで100×100に設定し、表示サイズを幅120pxにした場合、少しぼやけた表示になってしまいます。
なので、150×150で設定しなおし、同じく幅120pxにする事で、綺麗になります。
③配置
ウィジェットエリアに対し、右寄せ・左寄せ・中央と配置する事が出来ます。
④キャプション
キャプションとは？から簡単に説明します。画像に対し、説明を加える事が出来る機能となります。
こんな感じに、画像の下に文字列を表示させる事が出来ます。もともとWordPressのメディアで画像アップロードする際、指定する項目があり、そこで設定も可能です。
キャプションのメリットしては、見るユーザーに分かりやすくなる点と、Googleに対し、何の画像かを説明する事でSEO効果があるとかないとかです。全ての画像に対しキャプションを入れるのは大変なので、「これは！」という画像だけに入れるのでも良いかと思います。
で、Elementorでのキャプション機能ですが、選択項目は２つ
Attachment Caption：
ワードプレスへアップロード時に設定したキャプションを表示させる場合はこれを選択します。
Custom Caption：
ここで（Elementor上で）直接設定する場合にはこれを選択します。
⑤リンク
画像へリンクを入れたり、ライトボックス表示事が出来ます。
メディアファイル：
画像をクリックした場合に下の画像の様にライトボックスとして画像を表示する機能です。
カスタムURL：
画像にリンクを入れる場合に選択します。リンクには更に「新しいウィンドウで開く」と、「Nofollow を追加」を設定出来ます。（※Nofollowについては、長くなってしまいますので割愛しますが、設定しなくても大きな問題ではないと思います）
【コンテンツ】PRO版機能
PRO機能／ダイナミック
画像ウィジェットだけではないのですが、PRO版では他のコンテンツデータを読み込める機能「ダイナミック」機能があります。（詳しくは下記の記事をご参照下さい。）
ざっくり説明すると、ダイナミックをクリックすると、どのデータを読み込むかを設定出来ます。例えば、投稿（記事）のテンプレートデザインを作成している際に、アイキャッチ画像を表示させる場所としてダイナミックで設定する事で、記事を開いた際にその設定箇所へアイキャッチ画像が表示させる事が出来ます。
【スタイル】（無料版・PRO版共通）
①幅
ウィジェット枠（水色の枠線）に対し、画像の幅を設定します。設定出来る単位は％・px（ピクセル）・vwの３種です。あくまで優先される幅はセクション（一番外側の水色の太線）になります。例えば、セクション幅を500pxに設定した場合、1000pxに設定しても500px以上にはなりません。
②最大幅（%）
先ほどセクション幅やウィジェット幅の範囲に対して説明しましたが、この最大幅を設定した場合、この最大幅がMAXとなります。
上の３つの画像をご覧頂くと少しは分かりやすいかと思います。幅は100%にも関わらず、最大幅を50%、20%と制限すると変化します。言葉で３つ目の画像を説明すると「画像ウィジェットに対し、最大幅20%の中で、幅100%で表示する」という意味になります。
③普通・ホバー
これは何度も出て来ているので、大丈夫かと思いますが、「普通」は画像ウィジェット内にマウス（ポインター）が入っていない状態の設定を示します。「ホバー」は画像ウィジェットにマウス（ポインター）が入った状態の設定を示します。（以下④と⑤の設定に反映されます）
④透明度
画像の透明度を設定出来ます。最大値が1、最小値が0.1です。小数点第２位までは設定出来ますが、ほぼ見た目で判断できません。
⑤CSSフィルタ
ぼかし・明るさ・コントラスト・彩度・Hueが設定可能です。特にホバー時との差（変化）の為に個人的には良く使います。
⑥ボーダータイプ
画像ファイルの外周に対し、枠線を設定出来ます。その線の種類を選択出来ます。
直線・２本線・点線・破線・溝から選択出来ます。サンプル画像は「溝」です。
ボーダータイプを選択すると、自動的に枠線幅の設定が表示され、太さ等が上下左右個別に設定可能です。また、枠線の色も設定する事が出来ます。
⑦ボーダーの丸み
画像ファイルの角に丸みをつける事が出来ます。上の画像は丸み０の時です。少し丸みを付けてみましょう。
アイコンっぽく四隅が丸みをおびたのが分かりますか？さらに数値を大きくしてみましょう。
画像サイズのある一定を超えると完全に丸になりました。（画像自体のタテヨコ比によっては丸くならない場合があります）さらにリンクアイコンを切り、一部の辺だけの数値を変えてみます。
不規則な変形も可能となります。画像にアクセントが欲しい時は便利なので、この様な機能は覚えておきたいですね。
⑧ボックスシャドウ
画像ファイルに対し、影を付ける事が出来ます。ただし、透過処理していない画像は画像ファイルの形のまま影が着くので注意です。
（上のサンプル画像は背景透過処理をしたPNGファイルを使用しています）
影の色・影を落とす場所設定（水平方向・垂直方向）・ぼかし・拡大が設定出来ます。
ちなみに、影をやっぱやめたい！時は、赤枠のアイコンをクリックする事で効果をOFFに出来ます。再度、やっぱ影を付けたい場合は最後の設定に戻れます。
【詳細】（無料版・PRO版共通）
①詳細
マージン・パディング・Z-index・CSS ID・CSS クラスが設定出来ます。（CSS関連はここでは割愛させて頂きます）
＜そもそもマージンとパディングって何？＞
例えば、写真や文章（ウィジェット）に対し、赤い線画＝枠線を境とした外側の余白と内側の余白をそれぞれマージンとパディングと言います。
例えばマージンを上下左右に100px余白を設定しみると・・・
緑の部分（＝つまりはウィジェットの外側）が100px余白が出来ました。次にパディングを上下左右100px世世余白を設定してみると・・・
今度は黒の部分（＝つまりはウィジェット内側）が100px余白が出来ます。マージンとパディングはデザインに大きく影響しますので、慣れておく事をおすすめします。また、このマージンとパディングはスマートフォンデザイン、タブレットデザインと個々に設定が可能です。
＜Z-Indexの解説＞
ウィジェットなどの表示の優先順位を設定する項目です。
例えば、上の図の様に、Z-indexが１と２に設定された２つのウィジェットがあるとします。これをマージンなどで調整して重ねた場合どの様になるかみてみましょう。
Z-indexが大きい２のウィジェットが上に表示されました。０が一番下になり、設定数字の大きい順に手前に表示されます。ちなみに初期値は空欄となっており、この場合、下にあるウィジェットが上になるようです。サイト制作の上でレイヤー感は見栄えが良くなると思いますので、マージンやパディングと合わせて慣れておくと良いかもしれません！
②詳細＞Motion Effect（一部PRO版のみあり）
ウィジェット（テキストや画像）が表示される際にアニメーション（動き）を付ける事が出来ます。また、PRO版ではスクロールに合わせて動きをつけられる「Scrolling Effects」とポインタ（マウス）の動きに合わせて動きをつけられる「Mouse Effects」が設定出来ます。
下記はアニメーションを選択すると表示される項目です。
・アニメーションの継続時間：動きの時間を「遅い」「普通」「速い」の３段階で設定出来ます。
・アニメーションの遅延 (ms)：動きの開始時間を遅らせる事が出来ます。単位がms＝1000分の1秒で設定出来ます。ちなみに1000msは1秒なので、60000msは1分となります。さすがに1分はスルーされますね・・・（汗）
③背景
＜普通・ホバー＞
「普通」は画面に表示する際の背景に対し、「ホバー」はカーソルがそのウィジェット範囲に入った時（カーソルがのっている状態）の背景となり、それぞれ背景を設定する事が出来ます。例えば、ボタンなどで良く見かけるのですが、マウスをボタンに乗せると色が変わったりするやつを想像して下さい。
＜クラシック＞
単色カラーの背景、または画像を設定出来ます。
・色：カラーパレットまたはHTMLカラーコードなどを使用して色を設定出来ます。また、透明度もスライダーで調節する事が出来ます。
・画像：画像を背景に指定する事が出来ます。ただし、画像を設定した場合は、色の設定は無効となります。
・位置：（画像を選択すると設定出来る項目）どこを起点に背景を設置するかを指定出来ます。
・添付：「デフォルト」「スクロール」「固定」の３種から選べます。
※スクロール（視差効果）はそのままでは機能しないみたいです。
※固定はデスクトップ上でのみ動作します。
・繰り返し：背景画像を連続して表示するか、しないかを選択出来ます。
・サイズ：背景画像の全体が見える様に縮小して配置するか、拡大して背景対象範囲をカバーするかなど設定出来ます。
＜グラデーション＞
２色を使ったグラデーション背景を設定出来ます。
・色：１色目の色を設定出来ます。
・場所：１色目の範囲割合を設定します。
・２つ目の色：２色目の色を設定出来ます。
・場所：２色目の範囲割合を設定します。
・タイプ：「線状」と「放射状」を選択出来ます。
（線状の場合）境界線の角度が設定出来ます。
（放射状の場合）放射の中心点の位置を選択する事が出来ます。
④ボーダー
ウィジェットエリアに枠線を付ける事が出来ます。
＜普通・ホバー＞
カーソルがウィジェット範囲に入ると枠線のデザインを変える事が出来る「ホバー」（普通）通常表示時の枠線設定に対し、（ホバー）カーソルがウィジェット範囲に入った場合、枠線のデザインが変わります。
＜ボーダータイプ＞
枠線のタイプを選べます。二重線や破線などがあります。
※以下は、ボーダータイプを選択した時のみ項目が表示されます。
・幅：枠線の太さを上下左右の枠線ごとに設定する事が出来ます。
・色：枠線の色を設定出来ます。
・ボーダーの丸み：枠の角を上下左右ごとに丸くする事が出来ます。
＜ボックスシャドー＞
ウィジェット領域に対し、影を付ける事が出来ます。注意：テキストだけに影をつけたい場合は、スタイルのテキストシャドウで設定します。この場合は、ウィジェット範囲全体に影がつきます。
⑤Custom positioning（カスタムポジショニング）
神機能として本ブログでも紹介しておりますので、下記の記事も是非ご覧下さい。
一言で言えば・・・好きなアイテム（ウィジェット）を好きな場所に設置できる機能です。ビルダー系のプラグインや、WordPress以外の簡単ホームページ作成ツールでも見かけない機能です。この機能だけでもElementorを選ぶ価値はあります！
⑥レスポンシブ
ウィジェットを閲覧デバイス（デスクトップ、タブレット、モバイル）ごとに表示するか非表示にするかを設定出来ます。注意：編集モードの際には適用されません。確認する際はプレビューモードなどで確認しましょう。
ちなみに、上の設定の場合、モバイルでの閲覧時にのみ、このウィジェットが表示され、デスクトップやタブレットで見た場合は表示されません。
⑦カスタムCSS ※PRO版のみ
CSSコードを追加する事が出来ます。その際、詳細の５と６を使うと安易に適応範囲の指定が出来ます。
まとめ
いかがでしたでしょうか？画像ウィジェットは多くの場面で使う頻度の高いウィジェットなので、ぜひマスターしたいウィジェットの１つです。この記事ではご紹介できませんでしたが、特にスマホビューの編集時等は最大幅などの設定をうまく使う事で、わざわざスマホ用の画像を設定する必要が無い事があります。
簡易的なサイトやページであれば、見出しウィジェット・テキストエディターウィジェットとこの画像ウィジェットで作成出来ると言っても過言ではありません。それほど基本となるウィジェットなので、ぜひ使いこなせるようにしてみて下さい。
