(↑Pinterestでシェアお願いします!)

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

執筆者 | 更新日 2020年02月10日 | Elementorの使い方 | コメント0件

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

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

【限定】Elementorの使い方を動画で網羅的に学びませんか?こちらから無料でコースを受講できます。

コンテンツの画像の設定

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

画像の選択

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」というサイズも選択できます。

配置

Elementorの画像ウィジェットで画像の配置を変更する

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

キャプション

  • なし
  • 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つから選択できます。

文字色

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

背景色

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

書体

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

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

テキストシャドウ

  • ぼかし
  • 水平
  • 垂直

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

スペース

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

Elementorの使い方を動画レクチャーで網羅的に学びませんか?
 

無料でオンラインコースを受講できます。

・Elementorのウィジェットの使い方

・ランディングページの作り方

・テンプレートの使い方

 

以下のボタンから、無料でオンラインコースに登録し、今すぐアクセスしてください。

0コメント

コメントを提出

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

Elementorの使い方

無料でElementorの使い方を網羅的に学びませんか?
 

基本的なウィジェットの使い方から、ページを作成する方法までカバーしています。デザイン性の高いランディングページの作成を考えている方にオススメです。 下のボタンから無料で受講できます。

かっこいいLP作りたくないですか?

Elementorの使い方を"無料"で学びませんか?

プロのようなランディングページが作れるElementorの使い方が無料で受講できます。