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

Elementorの画像ウィジェットでできること

画像のウィジェットでは、画像を追加することができます。単に画像を追加するだけでなく、画像にキャプションを付けたり、シャドウを付けたり、アニメーションを付けたりと、高度な設定をすることができます。しかも、Elementorは基本的にCSSやHTMLのコードを使わないので、簡単に設定が可能です。それでは、実際にElementorの画像ウィジェットの使い方をご紹介していきます。

コンテンツの画像の設定

まずは、「コンテンツ」の設定項目を確認していきましょう。

画像の選択

ここで、使用する画像をWordPressのライブラリから選択します。

画像サイズ

1. Thumbnail – 150 × 150
2. Medium – 300 × 300
3. Medium Large – 760 × 0
4. Large – 1024 × 1024
5. フル
6. カスタム

画像サイズの項目では、上記の6つの選択肢があります。用途に合わせて、サイズを変更してみてください。ちなみに、使用しているテーマによっては、オリジナルの大きさも用意されている場合があります。例えば、Twentyseventeenという無料のテーマを使っているのであれば、「Twentyseventeenfeatured-image – 2000 × 1200」と「Twentyseventeenfeatured-avatar – 100 × 100」というサイズも選択できます。

配置

「配置」の項目では、画像を左に寄せるのか、中心に置くのか、右に寄せるのかを決めることができます。

キャプション

• なし
• Attachment Caption
• Custom Caption

「キャプション」では、画像の下に表示させるキャプションの設定ができます。「Attachment Caption」を選択すると、画像に付いているキャプションが自動的に表示されます。一方、「Custom Caption」を選択すると、自分でキャプションを追加することができます。

Custom Caption

「Custom Caption」を選んだら、下に「Custom Caption」が表示されますので、その欄に画像の説明などを追加しましょう。画像の下にその入力したテキストが表示されます。キャプションを記入します。

リンク

• なし
• メディアURL
• カスタム URL

「リンク先」の項目では、画像のリンクを追加することができます。「メディアURL」にすると、画像がポップアップのようにして表示されるようになります。「カスタム URL」にすると、画像をクリックしたら、別のページに飛ばすことができます。例えば、何かの商品画像を載せておいて、商品ページに飛ばしたい場合は、その商品ページのリンクを挿入します。

スタイルの画像の設定

ここからは、スタイルの設定項目についてご紹介していきます。

幅

ここでは、画像の縦幅を設定できます。

最大幅

これは、「幅」と似ていますが、ウィジェットそのものの幅を調節します。なので、ここの幅を小さくすると、「幅」でいくら大きく設定しても、一定数以上は大きくなりません。

透明度

画像の透明度を変更したいときに使いましょう。

CSSフィルタ

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

画像にフィルタをかけたい場合に使用しましょう。

トランジション所要時間

これは、「ホバー」で設定できます。ボバー時（マウスカーソルを画像に置いた時）のトランジションにかかる時間を設定できます。トランジションの効果は「ホバー時のアニメーション」で設定できます。

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

これも、「ホバー」で設定できる項目です。ドロップダウンメニューから好きなアニメーションを選択しましょう。

ボーダータイプ

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

画像にボーダーをつけたいのであれば、ドロップダウンメニューから好きなボーダーのタイプを選択しましょう。上記の6タイプが用意されています。

幅

「幅」は、「ボーダータイプ」で「なし」以外を選ぶと表示されます。ボーダーの幅を調節できます。「値をまとめてリンク」という鎖のアイコンをクリックすれば、4辺のボーダーの幅を別々に調節することができます。

色

これも、「ボーダータイプ」でボーダーを選択した場合に限り、表示されます。ボーダーの色を設定できます。16進数のカラーコードを入力できるので、ブランドカラーがあれば、そのコードを入力すると良いですね。

ボーダー丸み

• 上
• 右
• 下
• 左

ボーダーありでも、無しでも、画像の丸みを設定できます。通常は四つ角の丸みを均等に設定すると思いますが、「値をまとめてリンク」をクリックして、4つを別々に設定できます。

ボックスシャドウ

• 色
• 水平
• 垂直
• ぼかし
• 拡大

ボックスシャドウでは、画像に影をつけることができます。

スタイルのキャプションの設定

配置

• 左
• 中央
• 右
• 均等割付

キャプションの位置を上記の4つから選択できます。

文字色

キャプションの色を設定できます。

背景色

背景色は、この画像のように、キャプションの背景の色を設定できます。

書体

• フォント
• サイズ
• 太さ
• 変換
• スタイル
• 装飾
• 行の高さ
• 字間

「書体」では、キャプションのフォントの設定を行います。

テキストシャドウ

• 色
• ぼかし
• 水平
• 垂直

テキストシャドウでは、キャプションの影（色とぼかし、水平、垂直）が設定できます。

スペース

ここでは、画像とキャプションのスペースを設定できます。