Elementor を使用して WordPress で画像を表示する方法: クリエイティブな方法

画像が Web サイトの重要な要素であることは周知の事実です。ウェブサイトの視覚的な魅力だけでなく、エンゲージメントも向上します。 WordPress では、投稿やページに画像を挿入するのは非常に簡単です。 

画像を表示する 1 つの方法は、クラシック エディターにメディアを追加することです。もう 1 つの方法は、Gutenberg エディターの Image ブロックを使用することです。どちらの場合も、スタイルはテーマで事前定義されています。

ただし、Elementor を使用すると、WordPress で画像を表示する際に柔軟性が得られます。 Web サイトに画像を表示するためのさまざまなクリエイティブな方法を提供します。さらに重要なのは、各画像要素が個別にカスタマイズ可能であることです。

のような要素を使用する 画像ボックス, 画像ギャラリー, 画像マスキング
見栄えの良い画像セクションを作成できます。

少しの創造性と細部への配慮により、これらの要素を使用してあなたの Web サイトを他の Web サイトより目立たせることができます。

この記事では、Elementor を使用して WordPress で画像を表示し、Web サイトに画像を表示するための直感的でユーザーフレンドリーなインターフェイスを設計する方法を説明します。

Web コンテンツにとって画像が重要な理由

画像を見ると、人間の脳は、意識的に努力することなく、受け取った視覚情報を自動的に分析し、分類し始めます。このプロセスにより、コンテンツが覚えやすく、思い出しやすくなります。

さらに、写真は Web サイトの視覚的な魅力を高めることで、コンテンツを訪問者にとってより魅力的でキャッチーなものにすることができます。 

Web コンテンツにとって画像が重要である理由は次のとおりです。

• 簡単に注目を集めます: 画像を使用すると、訪問者の注意を引き、コンテンツに引き込むことができます。これは、製品やサービスの販売を目的とした Web サイトにとって特に重要です。
• 情報を迅速に伝える: 場合によっては、画像のほうがテキストよりも速く、効果的に情報を伝達できることがあります。たとえば、インフォグラフィックは複雑な情報をシンプルに伝えることができます。
• 単調さを打破します: 大きなテキストブロックは、読むのが退屈で単調になる可能性があります。画像は長いテキストを分割し、コンテンツへの注意を呼び戻すのに役立ちます。
• 記憶に長く残る痕跡を残します。 人間の脳は、視覚情報をテキストや言語情報よりもはるかに高速に処理し、長期間保持することができます。
• コンテンツをより共有しやすくします。 Facebook や Instagram などのソーシャル メディア プラットフォームは非常に視覚的であり、テキストだけよりも写真の方が共有しやすいことがよくあります。 Web サイトに高品質の画像を含めることで、訪問者がコンテンツをソーシャル メディアで共有する可能性が高くなります。
• ブランド認知度: 画像は、ロゴやブランドに関連するその他の視覚要素をフィーチャーすることで、ブランディングを強化するのに役立ちます。

WordPressで画像を追加する方法（基本的な方法）

WordPress で画像を表示する非常に基本的な方法は、画像をメディア ライブラリに追加し、デフォルトのスタイルで表示することです。

WordPress メディア ライブラリに画像を追加するには:

WordPress にログインし、次のサイトにアクセスします。 メディア > 新規追加をクリックし、メディア ライブラリにアップロードする画像をコンピュータから選択します。

さて、WordPress での画像の表示は、使用しているデフォルトのエディターによって異なります。

グーテンベルク編集者:

WordPressのデフォルトでは Gutenberg 別名ブロックエディターでは、画像ブロックを使用して画像を表示できます。そのためには、エディターを開き、画像を表示するために希望の位置に画像ブロックを追加します。次に、メディア ライブラリから画像をアップロードまたは選択します。

クラシックエディター:

古いクラシック エディタを使用している場合は、エディタでページまたは投稿を開き、画像を表示したい投稿/ページにマウス カーソルを置きます。その後、「メディアの追加」ボタンをクリックし、メディア ライブラリから画像を選択します。

Elementorを使用してWordPressで画像を表示する方法（高度な方法）

ビジュアルを表示するためのより高度な方法が必要な場合は、Elementor ページ ビルダーに切り替えることができます。 Elementor を使用すると、画像ウィジェットを使用して Web サイトの画像をクリエイティブに紹介できます。 

物事を次のレベルに引き上げ、ElementsKit Elementor アドオンには、最もカスタマイズ可能な機能で画像をスタイリッシュに表示できるウィジェットが多数付属しています。 ElementsKit には、Elementor Image Box、Image Gallery、Image Swap などのウィジェットが付属しています。これらのウィジェットは、写真をスタイリッシュに展示するためのさまざまなオプションを提供します。 

以下は、これらのウィジェットを利用して WordPress に画像を表示し、サイトをより活気のあるものにする方法を示しています。

ElementsKit をインストールする

高度な画像機能を使用するには、ElementsKit Lite プラグインと ElementsKit Pro プラグインを WordPress サイトにインストールする必要があります。

ElementsKit プラグインをインストールするためのドキュメントは次のとおりです。

プラグインをインストールしたら、WordPress に画像を表示するためのウィジェットを使用して作業を進めることができます。

方法 1: スタイリッシュな画像ボックスに写真を表示する

ElementsKit 画像ボックス ウィジェットを使用すると、画像とテキストを組み合わせたセクションを強調表示できます。見出しや説明などのテキストを含む画像を表示できます。これらのスタイルは、主力製品、サービス、機能を強調するためによく使用されます。

この機能を使用するには: ElementsKit > ウィジェットから画像ボックス ウィジェットを有効にします。

Elementor の ElementsKit Image Box ウィジェットの使用方法は次のとおりです。

画像

画像セクションでは、画像とその外観をカスタマイズできます。

1. 画像を選択してください: メディア ライブラリから画像を選択するか、画像をアップロードします。
2. 画像サイズ： 画像のサイズを設定します。
3. コンテンツエリア： 指定されたオプションからコンテンツ領域のスタイルを選択できます。
4. 等しい高さ: 画像とコンテンツ領域の高さを同じにするを有効または無効にします。
5. リンクを有効にする: リンクを有効にすると、画像をアンカー セクションとして使用できます。有効にすると、画像にリンクが追加されます。

体

本文セクションでは、すべてのテキストを Elementor 画像ボックスに追加できます。これには、見出し、説明、タイトル HTML タグ、テキストの配置が含まれます。

1. タイトル： このフィールドに見出しテキストを追加します。
2. タイトルのHTMLタグ: 見出しに使用する HTML タグ (H1、H2、H3、div、span、段落など) を選択します。
3. 説明： このフィールドには、コンテンツの簡単な説明を追加します。
4. 配置: 画像、見出し、説明、ボタンのテキストの配置を設定します。

ボタン

Elementor 画像ボックスに CTA ボタンを追加するオプションがあります。そのために、

1. ボタンを有効にする: 画像ボックスにボタンを追加するには、このオプションを有効にします。
2. ラベル： CTA の目的を示すボタン ラベル (テキスト) を追加します。
3. URL: 訪問者がクリックしたときにリダイレクトするページのリンクを入力します。
4. アイコンを追加: ボタンのラベルが付いたアイコンを表示したい場合は、この機能を有効にします。
5. アイコン： Elementor アイコン ライブラリからアイコンを選択します。
6. アイコンの位置: アイコンをボタンのテキストの前に置くか後ろに置くかを選択します。

次に、スタイル タブで、色、背景、タイポグラフィなどを含む Elementor 画像ボックスの外観をカスタマイズできます。

の中に クラシックな曲線 セクションでは、コンテンツ領域の幅と余白を調整できます。次に、パディングと不透明度を変更して画像のスタイルを設定します。 

さらに、色、タイポグラフィ、背景色などを変更して、見出しと説明テキストの外観をカスタマイズできます。さらに、ボタンのスタイルとそのアイコンをその属性で調整します。

ElementsKit Image Box ウィジェットの詳細については、ビデオをご覧ください。

方法 2: 2 つの画像を入れ替えアニメーションで表示する

画像の交換は、訪問者が画像にカーソルを合わせるかクリックすると入れ替わる 2 つの代替画像を 1 か所に表示するスタイリッシュな方法です。 ElementsKit Image Swap ウィジェットには、Web サイトをさらに視覚的に魅力的なものにする数十の素晴らしいエフェクトが付属しています。

1枚目の画像を注目を集めるカバー画像として使用し、2枚目の画像で必要な情報を提供するなどの使い方ができます。

この機能を使用するには: ElementsKit > ウィジェットから画像交換ウィジェットを有効にします。

Elementor の ElementsKit Image Swap ウィジェットの使用方法は次のとおりです。

1. 正面画像: これは、Web ブラウザにページが読み込まれるときにデフォルトで表示される画像です。
2. 背面画像: これは、アクションが行われたときに表示される画像です。つまり、訪問者が画像上にマウスを置くかクリックしたときに表示されます。
3. 画像サイズ： 両方の画像の画像サイズを設定します。
4. スワップスタイル: ElementsKit 画像スワップ ウィジェットでは 21 種類の異なるスワップ効果を利用でき、Web デザインを訪問者にとってより魅力的なものにするのに役立ちます。

5. ティガー: ここでは、画像の交換をトリガーするアクションとしてホバーまたはクリックのいずれかを選択できます。
6. 指標: これは、どの画像がショーにあり、どの画像が背景であるかを示すナビゲーターとして機能します。
7. リンク： 必要に応じて、画像をページにリンクできます。

スタイルタブでは、画像の高さとスワップアニメーションの長さを調整できます。また、インジケーターを有効にすると、インジケーターの位置を変更したり、サイズや色をカスタマイズしたりできます。

方法 3: 画像マスキングを使用して Web サイトの画像に独自の形状を与える

これは、ユニークな形の画像を使用して Web サイトを活気のあるものにするユニークな方法です。画像マスキング機能は、伝統的な形状の画像をより魅力的な画像に変換します。 WordPress では、Elementor を使用するとマスキングが非常に簡単になります。

ElementsKit for Elementor には、画像用のマスキング モジュールが付属しています。このモジュールは、画像を含む Elementor のすべての要素で使用できます。 Elementorエディターで、 ElementsKit マスキングを有効にする プリロードされた形状から形状を選択します。画像にカスタム形状を追加することもできます。

方法 4: ギャラリーで画像を紹介する

Elementor には、エレガントなギャラリーで複数の画像を紹介する優れた方法が備わっています。 Elemntor の基本ギャラリー ウィジェットは、画像の追加、画像サイズの設定、画像の間隔や境界線などの基本的なカスタマイズができる従来のアプローチで機能します。

しかし ElementsKit 画像ギャラリーウィジェット より柔軟なオプションが付属しています。ウィジェットを使用すると、説明付きのレイアウトをカスタマイズしたり、ギャラリーにフィルターを追加したり、サムネイル、オーバーレイ、画像、フィルターのあらゆる側面を個別にカスタマイズしたりできます。

イメージ ギャラリー ウィジェットの詳細と、それが Web サイトのデザインをどのように強化するかについては、ブログをご覧ください。

まとめ

全体として、Elementor には WordPress で画像を表示するためのいくつかの方法が用意されています。 Elementor の機能を最大限に活用するには、ElementsKit を追加すると便利です。

ElementsKit にはさまざまな方法とスタイルがあります。 見出しと説明を含む画像を表示する画像ボックス。画像交換: 2 つの画像を交互に表示します。また、より多くのオプションを提供するイメージ ギャラリーとイメージ マスキング ウィジェットもあります。

これらの各要素は独自の機能とカスタマイズ オプションを提供し、Web サイトに魅力的で視覚的に魅力的なコンテンツを作成できます。

これが役立つと思われる場合は、ElementsKit をさらに活用してください。これ Elementor アドオン には、最も多くの機能とオプションを備えた Web サイトの作成とデザインに役立つ、さらに多くの要素が付属しています。