WordPress に画像ボックスを追加する方法: 3 つの簡単なステップ 

WordPress ページを視覚的にポップなものにしたいですか?そして隠し要素となるのが画像ボックスです。

WordPress の画像ボックスを使用して、製品を紹介したり、チームメンバーを強調したり、主要な機能に顧客の注意を引いたりすることができます。 

あなたの推測は正解です！

この記事では、 WordPress に画像ボックスを追加する 3 ステップ ガイド.

さぁ、始めよう！

WordPress の画像ボックスとは何ですか? 

画像ボックスは、ウェブページや投稿内で画像を表示するために設計されたグラフィック要素またはコンテナです。 テキストとリンク 写真を使用すると、魅力的で視覚的に魅力的な方法で情報を提示できます。また、WordPress ウェブサイトの全体的なデザインとユーザー エクスペリエンスを向上させるのにも役立ちます。

画像ボックスは、Web ページで次のようなセクションを作成するためによく使用されます。

• 主要な機能またはサービスを強調する
• ブログ記事やポートフォリオの紹介
• 画像を表示する および製品ギャラリー
• チームメンバーの紹介 
• 体験談などを展示。

WordPress Image Box の主要コンポーネント

• 画像： 主要な視覚要素。多くの場合、製品、サービス、チームメンバー、または関連するコンセプトを紹介します。
• タイトル： 画像とそれに付随するテキストの本質を捉えた短く説明的な見出し。
• 文章： コンテキストと詳細を提供するための簡単な説明または情報のスニペット。
• ボタン/リンク: ユーザーを関連するページ、製品、またはその他のリソースに誘導するためのクリック可能なボタンまたはリンク。

WordPress に画像ボックスを追加する方法: 3 ステップ ガイド 

画像ボックスを使用すると、WordPress ページを視覚的に素晴らしい傑作に変えることができます。また、聴衆を魅了し、永続的な印象を残します。

WordPress で画像ボックスを簡単に作成する方法を見てみましょう。 3 つの簡単なステップ:

ステップ 1: 必要なプラグインをインストールして有効化する

WordPress サイトに画像ボックスを追加するには、Liquid コードまたは Elementor プラグインを使用できます。その場合、プラグインを使用すると、コーディングの知識がなくても画像ボックスを作成および追加できる便利な方法です。 

したがって、次のことを行うことができます オールインワン Elementor アドオン — ElementsKit. この素晴らしいプラグインは、WordPress ウェブサイトに画像を追加するための豊富な機能とすぐに使えるテンプレートを提供します。さらに、画像ボックスのデザインと ElementsKit 画像ボックスのすべての要素は完全にカスタマイズ可能です。

ElementsKit 画像ボックス プラグインをインストールするには、WordPress ダッシュボードに移動します。

• 案内する プラグイン ➡ 新規追加 
• 検索する 「エレメンツキット」 
• クリック "今すぐインストール"
• または、ダウンロードしてアップロードします。 ZIPファイル
• プラグインをインストールしたら有効化する

ステップ2: WordPressサイトに画像ボックスを追加する

WordPress画像ボックスプラグイン（ElementKit）をインストールして有効化すると、 事前にデザインされたテンプレート。 これらのテンプレートは、ワンクリックで簡単に使用できます。さらに、要件に応じて要素を追加/削除することもできます。 

WordPressで画像を追加する方法を見てみましょう ElementsKit 画像ボックス: 

• 新しいページ/投稿を作成するか、既存のページ/投稿を開きます 
• Elementorで開く 
• クリックしてください 「ElementsKit」アイコン 

• 次に、画像ボックス ウィジェットを選択する必要があります。 ElementsKit ウィジェット カテゴリ 
• クリック 「イメージボックス」

• ここからアクセスできます 11 は無料、8 はプレミアムなデザインとスタイル バリエーション; 合計 19種類のテンプレート WordPressサイトに画像ボックスを追加する
• ご覧いただけます。 すべてのテンプレートのプレビュー あなたのウェブサイトに合ったデザインと要素を理解する
• クリックしてください プラス記号 (+) ライブプレビューを見るには 

• デザインが決まったら、 をクリックします。 "入れる"
• あなたのページ/投稿に追加されます 
• 今ならできる 追加/削除または変更 画像ボックスの内容、スタイル、その他のプロパティ
• すべてのカスタマイズが完了したら、 をクリックします "公開"。 そして、画像ボックスが WordPress ウェブサイト上で公開されます。

ステップ 3: スタイルと設定をカスタマイズする 

ElementsKit、Elementor の優れたアドオン ユーザーはそのプラグインを利用できるため、完全にカスタマイズ可能なプラグインです。 85以上のウィジェットとモジュール。他の要素と同様に、画像ボックス ウィジェットもニーズに応じてカスタマイズされます。 

見出しと本文の内容を編集できます。ここでも、画像と行動喚起ボタンのスタイルを変更できます。さらに、さまざまな効果や形式を使用して画像ボックスをスタイルアップできます。

WordPress で画像ボックスをカスタマイズする方法を見てみましょう。 

レイアウトのカスタマイズ

ElementsKit の既成画像ボックステンプレートを WordPress に挿入した後、レイアウトを調整できます。 

• 画像ボックスの幅を増減する
• 列のギャップを狭い、拡張、広い、カスタム、またはギャップなしとして設定します
• 画像ボックスの高さと配置を調整する 
• オーバーフローをデフォルトのままにするか非表示にします 
• ヘッダー、フッター、メイン、記事などの HTML タグを利用します。

コンテンツのカスタマイズ

WordPressの画像ボックスには、次のようなさまざまな要素ごとに異なるコンテンツが含まれています。 見出し、画像、ボタンなど。テキストを変更したり、プロパティを修正したりできます。

WordPress で ElementsKit 画像ボックスのコンテンツをカスタマイズする方法を見てみましょう。 

✨ タイトル 

• 見出しと小見出しのタイトルを変更する 
• タイトル付きのリンクを挿入する
• 開始/終了位置による境界線の非表示/表示 
• タイトルの説明を追加/表示または非表示にする 
• さまざまなスタイルと位置のセパレータを追加する 

✨ 画像 

• 画像を変更するか AI が生成した画像を追加する
• 画像サイズを調整します（フル、中、大、カスタムなど）。
• コンテンツ領域をシンプル、クラシック、影線などに設定します。
• 均等な高さを有効/無効にする 
• 別のリソースにリンクする URL を挿入します 

✨ボディ 

• タイトルテキストの追加/削除または編集
• タイトルのHTMLタグを変更する
• タイトルの配置を左、右、または中央に調整します 

✨ボタン

• を有効または無効にします。 クリエイティブボタン
• カスタム ボタン ラベル テキストを追加する 
• カスタム URL を追加する
• アイコンの追加・削除とピストンの設定 

スタイルのカスタマイズ 

レイアウトとコンテンツのスタイルも変更できます。その結果、WordPress サイトのユーザー インターフェイスやその他のプロパティに合わせて、さまざまなタイプの画像ボックスを作成できます。 

✨シャドーライン 

• 左右の影のラインを選択してください
• 必要に応じてカスタム幅を設定します
• 影の背景の種類と色をカスタマイズする 
• カスタム背景画像を設定する 

✨画像 

• カスタムの境界線の半径とパディングを追加する 
• 画像の不透明度を通常または ホバー効果 

✨ボディ 

• border-radius で境界線の種類を選択します
• カスタムの背景画像、種類、色の設定 
• ボックスのパディングとボックスの影の色を調整する 
• タイトルのタイポグラフィ、色、間隔を調整する

✨ボタン 

• パディング値とアイコンのフォント サイズをカスタマイズする 
• ボタンのテキストと背景色を変更する 
• 通常またはホバーのプロパティを設定する 
• 境界線の種類、境界線の半径、ボックスシャドウを設定する 

高度なカスタマイズ 

ElementsKit画像ボックスは、高度なカスタマイズ機能を柔軟に使用できます。画像ボックスをよりエレガントで魅力的なものにするのに役立ちます。また、さまざまなものを統合することもできます。 モーションエフェクトとカスタムコード 画像ボックスをウェブサイトの特定のウェブページに一致させます。

詳細設定にカスタマイズ オプションがあります。

• 画像ボックスレイアウトのパディング、マージン、幅、位置、Zインデックスを変更する
• 要素にモーション エフェクトを追加します (例: フェード イン、フェード アウト、バウンス イン、上にズーム イン、左にスライド インなど)。
• PC、タブ、モバイルなどのデバイスに応じて画像ボックスの応答性をカスタマイズします 
• さまざまなデバイスで非表示/表示する属性とプロパティを設定します 
• カスタムCSSを含める 追加機能の変更 

WordPressに画像ボックスを追加する利点

• 視覚的な魅力を高める: 魅力的な画像ボックスは、テキストの多いコンテンツを分割します。また、ページをより視覚的に魅力的にし、スキャンしやすくなります。
• 重要な情報を強調表示します: 重要なメッセージ、機能、または行動喚起を強調表示できます。
• ユーザーエンゲージメントの向上: WordPress でイメージ ボックス要素を使用すると、視覚的に魅力的なエクスペリエンスを作成することもできます。ユーザーがコンテンツに興味を持ち、探索し続けることができます。
• クリックスルー率の向上: 明確な行動喚起 (CTA) を備えた画像ボックスは、ユーザーがクリックして詳細を確認するように促すことができます。
• 構造情報: コンテンツを論理的なセクションに整理し、ナビゲーションによる読みやすさを向上させることができます。

WordPress に画像ボックスを追加する 5 つのヒント 

WordPress Web サイトに画像ボックスを追加すると、コンテンツがより魅力的で有益なものになります。 

探検してみましょう より効率的で目を引くものにするための 5 つのヒント サイト上の要素:

1. 画像サイズを最適化する

次のようなツールを使用します タイニーPNG または、画像最適化プラグインを使用して、品質を損なうことなく画像ファイルのサイズを削減します。これにより、ページの読み込み速度が大幅に向上します。

2. 一貫性を維持する

一貫したスタイル、カラーパレット、比率の画像を使用して、一貫した視覚体験を作成します。また、洗練された外観を実現するために、画像ボックスがページ上の他の要素と揃っていることを確認してください。

3. 説明的な代替テキストを使用する

各画像に説明的な代替テキストを提供します。これにより、スクリーン リーダーが視覚障害のあるユーザー向けに画像を説明し、検索エンジンの可視性が向上します。

4. モバイルの応答性を考慮する

画像ボックスがさまざまな画面サイズ (特にモバイル デバイス) で正しく表示されることを確認します。レスポンシブ デザイン手法またはプラグインを使用して、シームレスな適応を確保します。

5. 戦略的にリンクする (該当する場合)

画像ボックスを関連するコンテンツまたはランディング ページにリンクして、ユーザーを誘導し、望ましいアクションを促します。

知っておいてよかった👉 ElementsKit を使用して 4 つの簡単なステップで Elementor 画像マスキングを適用する方法

よくある質問

急いでください

WordPress ウェブサイトを画像で装飾する場合、ElementsKit 画像ボックスほど魅力的で情報豊富なものはありません。

ここでは、その方法に関するステップバイステップのガイドを提供しました。 WordPress サイトに画像ボックスを簡単に追加できます。 また、 ElementsKit Elementorプラグイン よりインパクトを持たせるために、さまざまな画像ボックスのスタイルとレイアウトを試してみてください。 

ビジュアルの力は今やあなたの手の届くところにあります。それを効率的に活用して、コンテンツを本当に輝かせましょう！🥳