WordPressのテーマビルダープラグイン「Elementor」のファンブログ

Elementorの画像 の取り扱いについての話

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
elementor-pict-thumbnail

Elementorの画像 の取り扱いについて

Elementorの画像 とは、画像ウィジェットや、画像ボックスなどの、画像に関連するお話をして行きたいと思います。サイズや、トリミング、長方形の画像を真丸に表示させたり、色々な形に出来ます!

おじさん
おじさん
需要なさそう・・・

えっ・・・そんな・・・意外と使えるんですよー。まずは作例をご覧下さい!

sample-image-f

いかがですか?画像は全て同じ画像を使い、Elementor上で変形させて表示しています。

ふ〜ん
おばさん
おばさん

リアクション薄っ?!アイデア次第では面白い表現出来ると思うんですよね。という訳で、知っとくといつか役に立つ画像変形技について解説していきたいと思います。

画像サイズのお話

画像に関連するウィジェットにはサイズを設定する項目がいくつかあります。コンテンツにある「画像サイズ」、スタイルにwある「幅」「幅の上限」「高さ」です。それぞれどんな役割があるのか、見て行きましょう!

画像サイズとは?

コンテンツタブの中にある画像サイズですが、トリミング(切り取り)と理解すると分かりやすいと思います。

pict-size01

プルダウンの中には、プリセット(もともとの設定)がいくつか用意されいますが、ここではカスタムを説明します。Elementor上にも書いてある様に、カスタムは画像のトリミング機能の様なもので、画像を好きなサイズにすることができます。

作例のきつねの元画像サイズは1920×1080です。これを色々な設定で見てみましょう!

画像サイズをカスタムに設定して、幅を500、高さを空欄にしてみます。

pict-size02

すると、幅は500pxになり、高さは勝手に縮まります。どちらかを空欄にした場合、元画像の縦横比率に従います。つまり計算すると・・・約282px程度でしょうか?

おばさん
おばさん
何訳分からないこと言ってるのよ!

ですね、ちょっとややこしいですね。ここで知っておきたいことは、片方だけの設定時はトリミングではなく、幅に合わせた画像の縮小になります。

次に、幅500px、高さを100pxにした場合はどうなるのか?

pict-size03

今後はトリミングされました。元画像の中心を起点として切り取られました。この切り取る起点は中心以外にはできません。

おばさん
おばさん
まだ、画像サイズの話?

あーなんかごめんなさい・・・もう終わりますよー。

という訳で、この画像サイズのカスタムを使うことで、画像を好きなサイズすることが出来るんです。

だとすると、スタイルにある幅とか高さはなんなんだね?
おじさん
おじさん

おじさんっ!今年1の名質問ですよーーー気になりますよね?よね?という訳で、今度はスタイルタブにある「幅」を見てみましょー。

 

「幅」とは?

トリミングと違い、拡大・縮小と覚えると分かりやすいかもしれません。まずはこちらをご覧下さい。

pict-size04

画像サイズで設定しただけの上の画像に対し、スタイルタブにある「幅」と「幅の上限」を100%にしてみました。

おじさん
おじさん
100%なのに大きくなっている。計算的には200%になるはずでは?

ZZZ…
おばさん
おばさん

おじさん冴えてますね!お、おばさん・・・寝ちゃいましたね。風邪ひかない様にしないと・・・

そうなんですね、100%なのにサイズは2倍!実はここで言う100%というのは、「カラムに対して100%にする」という意味となります。つまりカラム幅が1000pxなので、その100%である1000pxに引き伸ばされたことになります。

引き伸ばす?というと画像自体が大きくなる訳ではないのね?
おじさん
おじさん

おっしゃる通りです。元の画像は1920px×1080pxに変わりはなく、最初の画像サイズの500px×100pxにトリミング、その画像を1000px×200pxにしたということになります。つまり、元の画像より荒く表示されてしまう事に注意しましょう!

スタイルの幅での画像サイズの注意点

おさらいにもなりますが、元々100px×100pxの小さい画像を、スタイルの幅で無理やり大きくすると・・・

pict-size05

荒れます。

ので、元画像のサイズより大幅に大きくしない事をおすすめします。とは言え、必要以上のサイズの画像を使うと、ファイルが重たくなり表示速度に影響が出ますので、注意しましょう!

「高さ」も同じ発想ですが・・・要注意

pict-size06

高さだけを200pxに設定した場合、幅は指定無しのため、元画像比率に合わせて幅も拡大します。ここまでは先ほどの幅と変わらないのですが・・・

幅も合わせて設定すると・・・

pict-size07

強制的に幅と高さが設定されるため、びよ〜んと伸びた画像となってしまいます。

おじさん
おじさん
あらら・・・これは注意が必要ですな・・・。

そうなんですね!

スタイルで画像サイズをコントロールする際は、特に注意です。

Elementorの画像 サイズのまとめ

もうまとめ?丸くしたり、変な形にする方法おしえなさいよ!!!
おばさん