ワードプレスで画像を並べて配置する方法(簡単に)

WordPressのコンテンツに画像を並べて配置しますか?

多くの場合、初心者はWordPressの投稿やページに二つの写真を隣に置く方法を見つけるのに苦労します。

このステップバイステップガイドでは、WordPressで簡単に画像を並べて配置する方法を示します(コードを記述せずに)。

ワードプレスに画像を並べて置く

ワードプレスで画像を並べて配置する

ブロックエディタを使用して画像を並べて配置する

画像を並べて配置する最も簡単な方法は、ワードプレス

ブロックエディタには、行と列に画像を表示できる特別な’Gallery’ブロックがあります。

まず、新しい投稿/ページを作成するか、既存の投稿/ページを編集してコンテンツエディタを開く必要があります。 内部に入ったら、(+)記号をクリックして新しいブロックを追加します。

ポストを作成し、それにブロックを追加します

投稿を作成し、それにブロックを追加する

次に、ギャラリーブロックを選択してページに追加する必要があります。 ギャラリーブロックは[共通ブロック]セクションで見つけることも、検索バーを使用してすばやく見つけることもできます。

投稿に追加するギャラリーブロックを選択します

あなたのポストに追加するギャラリーブロックを選択する

今、あなたは簡単にそれにドラッグするか、アップロードボタンを使用して、あなたのギャラリーブロックに画像を追加することができます。 WordPressメディアライブラリから画像を選択することもできます。

ご覧のように、ギャラリーブロックに2つの画像を追加しました。 WordPressは自動的に並んでそれらを配置しています。

ギャラリー内の二つの画像(蝶とリンゴ)

ギャラリー内の二つの画像(蝶とリンゴ)

あなたが並んで3つの画像をしたい場合はどうなりますか? ここでは、第三の画像を追加した場合に何が起こるかです。 ワードプレスは、単に並んですべての3つの側に合うように他の人のサイズを変更します:

ギャラリー内の三つの画像(蝶、リンゴ、青い花)

ギャラリー内の三つの画像(蝶、リンゴ、青の花)

4番目の画像をアップロードすると、WordPressはそれを他の画像の下に配置します。

ギャラリー内の四つの画像(蝶、リンゴ、青い花、ロビン)

ギャラリー内の四つの画像(蝶、リンゴ、青い花、ロビン)

あなたは、ワードプレスは、単一の列に並んで含める必要があり、画像の数を変更することができます。

まず、まだ選択されていない場合は、ギャラリーブロックをクリックします。 画面の右側に、ギャラリーのブロック設定が表示されます。

ギャラリーブロックの設定を変更する

ギャラリーブロックの設定を変更する

ここでは、列数を1から4までの任意の数に調整できます。 たとえば、2つの画像を並べて、その下にさらに2つ並べたい場合は、列を2に設定できます。

ギャラリーを2列ではなく2列に設定する3

2列ではなく、ギャラリーを持つように設定します3

それはそれと同じくらい簡単です!

ギャラリー内の画像の位置を変更したい場合は、それをクリックしてください。 その後、ギャラリーで前後に移動するために使用できる矢印が表示されます。

ギャラリー内で画像を前後に移動する

ギャラリーで画像を前後に移動する

ここでは、サンプルポストから完成したギャラリーのデモです:

ライブポスト内の2列ギャラリー

ライブ投稿の2列ギャラリー

プラグインを使用してWordPressに画像を並べて配置する

古い古典的なWordPressエディタを使用している場合、またはデフォルトのギャラリーブロックよりも複雑なギャラリーを作成したい場合は、WordPressギャラリープラグインが必要になります。

私たちは、それが最高のWordPressのギャラリープラグインであるため、Enviraギャラリーを使用することをお勧めします

このチュートリアルのために、我々はEnviraの無料版を使用しますが、あなたはアルバム、画像のスライドショーなどの強力な機能を取得するためにPro版を取得することができます。

まず、Envira Galleryプラグインをインストールして有効にする必要があります。 あなたはどのようにわからない場合は、ちょうどWordPressのプラグインをインストールする方法についてのステップバイステップガイドをチェックしてください。

次に、あなたのWordPressのダッシュボードでEnviraギャラリー”新しい追加に行くことができます。

Envira Galleryに新しいギャラリーを追加します

Envira Gallery

に新しいギャラリーを追加するには、ギャラリーにタイトルを付ける必要があります。 私たちは私たちの”例ギャラリー”と呼んできました。 次に、使用する画像をアップロードします。

アップロードボックスにドラッグアンドドロップするか、”ファイルの選択”ボタンのいずれかを使用することができます。

新しいギャラリーに名前を付けます

新しいギャラリーに名前を付けます

アップロードされた画像の外観は次のとおりです:

エンヴィラギャラリーにアップロードされた画像

Envira Galleryにアップロードされた画像

ここで画像にタイトルとaltテキストを与えることができます。 ユーザーがマウスカーソルを画像の上に置くと、タイトルが画像の下に表示されます。

ライトボックスポップアップモードでは、画像の下にもタイトルが表示されます。

タイトルとaltテキストを編集するには、ギャラリー内の画像の編集ボタンをクリックします。

編集ボタンをクリックして、ギャラリー内の画像を編集します

編集ボタンをクリックして、ギャラリー内の画像を編集します

その後、画像のタイトルを変更することができます。 デフォルトでは画像のファイル名になります。

WordPressサイトのSEOに役立つため、altテキストも入力する必要があります。 あなたのタイトルが画像を説明している場合は、単にaltテキストのためにそれを繰り返すことができます。

画像のタイトルとaltテキストの設定

画像のタイトルとaltテキストの設定

完了したら、Xをクリックしてウィンドウを閉じる前に”メタデータを保存”ボタンをクリックしてください。

メタデータの保存ボタンをクリックして変更を保存します

メタデータの保存ボタンをクリックして変更を保存します

サイトにギャラリーを追加するには、まず公開する必要があります。 先に進み、画面の右側にある公開ボタンをクリックします。

公開ボタンをクリックしてギャラリーを公開し、サイトで使用できるようにします

公開ボタンをクリックしてギャラリーを公開すると、あなたのサイトで

今すぐ、投稿やページを編集するか、新しいものを作成することができます。 コンテンツエディタ内で、(+)をクリックして投稿にブロックを追加し、Envira Galleryブロックを選択します。 あなたは共通のブロックセクションでそれを見つけることができます、またはあなたが検索バーを使用することができます。

投稿またはページにEnvira Galleryブロックを追加します

投稿またはページにEnvira Galleryブロックを追加します

あなたは、あなたのギャラリーを選択するには、ドロップダウンをクリックする必要があります。

Enviraギャラリーブロックからギャラリーを選択します

Envira Galleryブロックからギャラリーを選択

あなたのポストにあなたのギャラリーが表示されるはずです。

画面の右側で設定を調整できます。 たとえば、列のレイアウトや画像間の余白のサイズを変更することができます。

ポストエディタに表示されるEnviraギャラリー

ポストエディタに表示されるEnviraギャラリー

私たちは、常に二つの列に表示するように私たちのギャラリーを設定することにしました。 また、画像の間に広い余白を追加しました。

ユーザーは画像をクリックして、フルサイズのバージョンをライトボックスで見ることができます。 彼らはあまりにも、ライトボックスを使用して画像をスクロールすることができます。

envira galleryからの画像をライトボックスで表示する

envira galleryの画像をライトボックスで表示する

ギャラリーに画像を追加したい場合は、Envira Gallery”WordPressダッシュボードのすべてのギャラリーにアクセスして戻ってく 単にそれを編集するには、あなたのギャラリーの名前をクリックしてくださ

Envira Galleryで既に作成したギャラリーを編集する

Envira Gallery

で既に作成したギャラリーの編集ギャラリーに加えた変更は、投稿、ページ、またはサイドバーに配置した場所に表示されます。 これらに再度追加する必要はありません。

ヒント:ブロックエディタの代わりにクラシックエディタを使用している場合は、Envira Galleryを使用できます。

クラシックエディタの上に”ギャラリーを追加”ボタンが表示され、既存のギャラリーを投稿に追加するために使用できます。

クラシックエディタでEnviraギャラリーを追加する

クラシックエディタ

でEnviraギャラリーを追加するには、”メディアの追加”ボタンをクリックしてから”ギャラリーの作成”をクリックして新しいギャラリーを作成することもできます。

クラシックエディタのメディアライブラリを使用して新しいギャラリーを作成する

クラシックエディタのメディアライブラリを使用して新しいギャラリーを作成する

このチュートリアルでは、WordPressで画像を並べて配置する方法を学 また、WordPressのブロックエディタで画像を整列させる方法についての私たちのガイドを通過することをお勧めします,そして、WordPressのプラグインを持って

この記事が好きなら、WordPressのビデオチュートリアルのための私たちのYouTubeチャンネルを購読してください。 また、TwitterやFacebook上で私たちを見つけることができます。

Leave a Reply

メールアドレスが公開されることはありません。