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

【 ウィジェットマニュアル】画像ウィジェット全項目解説

Share on facebook
Share on twitter
Share on pocket
Share on pinterest
eyecatch_boy

ウィジェットマニュアル「画像」

picturewidget
ページ内に簡単に画像を表示させられます。ただ、表示するのではなく、様々な表現が出来、サイト訪問者へ大きなインパクトを与えたり、目に付くワンポイントとして配置する事も出来ます。

【コンテンツ】(無料版・PRO版共通)

pw_contents

①画像の選択
このエリアをクリックすると、メディア一覧が表示されます。既にアップロードしている画像であれば選択して「メディアの挿入」をクリックするだけ。まだアップロードしていなければ、右上の「ファイルをアップロード」から画像をアップロードするだけです。
pw_contents1

②画像サイズ
見た目のサイズというよりは、画像ファイル自体のサイズを意味します。例えば本当は幅100pxで表示させれば良い部分に、幅1000pxの画像を入れ(後ほどご紹介するスタイル)縮小すると、ブラウザ読み込み時に幅1000pxの画像として読み込み、重くなる要因になります。それを防ぐ為、ここで画像サイズを設定する事で、無駄な読み込みを軽減してくれます。カスタムを選択した場合、幅と縦をそれぞれ数値設定出来ます。

(注意)表示させたいサイズより少し余裕を持った設定にしよう。
例えば、カスタムで100×100に設定し、表示サイズを幅120pxにした場合、少しぼやけた表示になってしまいます。
pw_contents2
なので、150×150で設定しなおし、同じく幅120pxにする事で、綺麗になります。
pw_contents4

③配置
ウィジェットエリアに対し、右寄せ・左寄せ・中央と配置する事が出来ます。

④キャプション
キャプションとは?から簡単に説明します。画像に対し、説明を加える事が出来る機能となります。
pw_caption
こんな感じに、画像の下に文字列を表示させる事が出来ます。もともとWordPressのメディアで画像アップロードする際、指定する項目があり、そこで設定も可能です。
ozisan_caption
キャプションのメリットしては、見るユーザーに分かりやすくなる点と、Googleに対し、何の画像かを説明する事でSEO効果があるとかないとかです。全ての画像に対しキャプションを入れるのは大変なので、「これは!」という画像だけに入れるのでも良いかと思います。

で、Elementorでのキャプション機能ですが、選択項目は2つ
pw_caption2
Attachment Caption:
ワードプレスへアップロード時に設定したキャプションを表示させる場合はこれを選択します。
Custom Caption:
ここで(Elementor上で)直接設定する場合にはこれを選択します。

⑤リンク
画像へリンクを入れたり、ライトボックス表示事が出来ます。
pw_link1
メディアファイル:
画像をクリックした場合に下の画像の様にライトボックスとして画像を表示する機能です。
pw_link2

カスタムURL:
画像にリンクを入れる場合に選択します。リンクには更に「新しいウィンドウで開く」と、「Nofollow を追加」を設定出来ます。(※Nofollowについては、長くなってしまいますので割愛しますが、設定しなくても大きな問題ではないと思います)

【コンテンツ】PRO版機能

pw_pro

PRO機能/ダイナミック
画像ウィジェットだけではないのですが、PRO版では他のコンテンツデータを読み込める機能「ダイナミック」機能があります。(詳しくは下記の記事をご参照下さい。)

ざっくり説明すると、ダイナミックをクリックすると、どのデータを読み込むかを設定出来ます。例えば、投稿(記事)のテンプレートデザインを作成している際に、アイキャッチ画像を表示させる場所としてダイナミックで設定する事で、記事を開いた際にその設定箇所へアイキャッチ画像が表示させる事が出来ます。

【スタイル】(無料版・PRO版共通)

img_style

①幅
ウィジェット枠(水色の枠線)に対し、画像の幅を設定します。設定出来る単位は%・px(ピクセル)・vwの3種です。あくまで優先される幅はセクション(一番外側の水色の太線)になります。例えば、セクション幅を500pxに設定した場合、1000pxに設定しても500px以上にはなりません。

②最大幅(%)
先ほどセクション幅やウィジェット幅の範囲に対して説明しましたが、この最大幅を設定した場合、この最大幅がMAXとなります。

haba100 haba50 haba20

上の3つの画像をご覧頂くと少しは分かりやすいかと思います。幅は100%にも関わらず、最大幅を50%、20%と制限すると変化します。言葉で3つ目の画像を説明すると「画像ウィジェットに対し、最大幅20%の中で、幅100%で表示する」という意味になります。

③普通・ホバー
これは何度も出て来ているので、大丈夫かと思いますが、「普通」は画像ウィジェット内にマウス(ポインター)が入っていない状態の設定を示します。「ホバー」は画像ウィジェットにマウス(ポインター)が入った状態の設定を示します。(以下④と⑤の設定に反映されます)

④透明度
画像の透明度を設定出来ます。最大値が1、最小値が0.1です。小数点第2位までは設定出来ますが、ほぼ見た目で判断できません。

⑤CSSフィルタ
cssfilter
ぼかし・明るさ・コントラスト・彩度・Hueが設定可能です。特にホバー時との差(変化)の為に個人的には良く使います。

⑥ボーダータイプ
画像ファイルの外周に対し、枠線を設定出来ます。その線の種類を選択出来ます。
boardertype
直線・2本線・点線・破線・溝から選択出来ます。サンプル画像は「溝」です。
imgboarder

ボーダータイプを選択すると、自動的に枠線幅の設定が表示され、太さ等が上下左右個別に設定可能です。また、枠線の色も設定する事が出来ます。
boardersetting

⑦ボーダーの丸み
boarder1
画像ファイルの角に丸みをつける事が出来ます。上の画像は丸み0の時です。少し丸みを付けてみましょう。
boarder2
アイコンっぽく四隅が丸みをおびたのが分かりますか?さらに数値を大きくしてみましょう。
boarder3
画像サイズのある一定を超えると完全に丸になりました。(画像自体のタテヨコ比によっては丸くならない場合があります)さらにリンクアイコンを切り、一部の辺だけの数値を変えてみます。
boarder4
不規則な変形も可能となります。画像にアクセントが欲しい時は