WordPress ブロックエディタでテキストと画像を並べて配置する方法

WordPressから エレメンデザイン作業は便利ですが、ブログを運営している場合は、基本エディタであるブロックエディタを使用するのがスピードの点で優れています。 PostXなどのブロックエディタ用のプラグインを使用すると、ブロックエディタの機能を拡張できますが、速度に影響を与える可能性があります。

ブロックエディタでテキストと画像を並べて配置したい場合は、ブロックエディタでデフォルトで提供されているパターンを利用したり、ブロックエディタの「メディア＆テキスト」ブロックを使用したりできます。または、 GeneratePress テーマ作成した開発者が開発したGenerateBlocksプラグインを活用して実装することもできます。 GenerateBlocksは、最小限のブロックしか提供しないため、速度に影響が少ない方です。

WordPress ブロックエディタでテキストと画像を並べて配置する方法

メディア＆テキストブロックの使用

ブロックエディタの メディア＆テキスト ブロックを使用してテキストと画像を並べて配置できます。

ブロックエディタ画面で「/メディア」と入力して「メディア＆テキスト」ブロックを選択します（ブロックエディタキーボードショートカット を参照）。

これにより、下図のようにメディア＆テキストブロックが追加され、画像をアップロードしたり、メディアライブラリから画像を選択したり、テキストなどのコンテンツを入力したりできます。

画像は左右に配置でき、右ブロック設定でメディア幅を調整できます。

「スタイル」タブで背景色などを指定できます。

CSSを使用すると、より洗練されたカスタマイズが可能です。

パターンを活用する

別の方法として、ブロックエディタがデフォルトで提供するパターンを利用することができる。

1 ブロックエディタで ブロックインサーター アイコンをタップします。

2 パターン タブを選択し、 テキストをクリックします。

テキストパターンの中から、「背景の上の画像と引用符」パターンや「説明のあるモノクロの画像」パターンなど、好きなものを選択できます。

別のパターンを検索してお気に入りを選択することもできます。例えば、 バナー セクションには、画像とテキストを並べて配置するパターンもあります。

「背景の上の画像と引用符」パターンを選択すると、以下のように画像とテキストが挿入されます。 （2つの項目が追加されるため、便宜上1つだけ残して、以下は削除しました。）

以下は、バナーセクションの「右側の画像を含むメディアとテキスト」パターンです。

3 パターンを必要に応じて変更します。

たとえば、イメージを交換するには、対応するブロックを選択し、「置換」をクリックしてイメージを置き換えることができます。 （下のパターンは 「メディア＆テキスト」ブロックを活用したものです。）

ブロック設定で背景色やテキストの色などを変更できます。

テキスト、テキストカラー、背景色、画像などを好きなように修正し、より洗練されたデザインを行うには CSSでスタイルを微調整することを検討できます。

GenerateBlocksを使用してテキストと画像を並べて配置する

GenerateBlocksはサイトの速度に影響が少ないため、ブロックエディタの機能を拡張したい場合は、このプラグインを使用するのは問題ありません。

• 軽量で高速なGenerateBlocksプラグイン：コンテナを読みやすくする

コンテナとグリッドブロックを活用すると、複雑なデザインも実装できます。

グリッドブロックを活用する

グリッドブロックを活用すると、複雑なグリッドレイアウトを簡単に作成できます。

ブロックエディタで「/grid」を検索して Grid ブロックを挿入したり、ブロックインサータから直接 Grid ブロックを選択したりできます。

グリッドブロックを挿入すると、右側のブロック設定で目的のグリッドレイアウトを選択できます。

左右のコンテナにテキストと画像を適切に挿入し、ブロック設定で背景色、テキストサイズなどの詳細設定を指定して、必要に応じて作成します。

同様に、CSSを使用してより洗練されたデザインを作成することもできます。

GenerateBlocksのContainerブロックの使用

私は複雑にすることをあまり好まないので、コンテナブロック内に内部コンテナブロックを追加し、各コンテナにテキストと画像ブロックを追加し、 CSSで希望のレイアウトが出るようにする方法を利用します。

たとえば、上記のように外部コンテナ内に2つの内部コンテナブロックを配置し、各コンテナにテキストと画像をそれぞれ追加し、CSSで適切にスタイルを設定して次のように作成できます。

上の図では、トマトの場合、画像の左側にテキストが右側に配置されています。モバイルでは、テキストが最初に表示され、画像が下に表示されるように順序を変更するのは自然です。この場合もCSSで調整できます。

例CSS：

/* Align Text and Image Side by Side Using GenerateBlocks */
/* ------------------------
   text-image-row (텍스트 → 이미지)
------------------------ */
.text-image-row {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.text-image-row > div {
	flex: 0 0 50%;
	box-sizing: border-box;
}

.text-image-row > div:nth-child(2) {
	display: flex;
	justify-content: center;
	align-items: center;
}

.text-image-row > div:nth-child(2) img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
}

/* ------------------------
   text-image-row-reverse (이미지 → 텍스트, 모바일에서 순서 반전)
------------------------ */
.text-image-row-reverse {
	display: flex;
	flex-direction: row;
	gap: 2rem;
}

.text-image-row-reverse > div {
	flex: 0 0 50%;
	box-sizing: border-box;
}

/* 이미지 div: 수평 + 수직 가운데 정렬 */
.text-image-row-reverse > div:first-child {
	display: flex;
	justify-content: center;
	align-items: center;
}

.text-image-row-reverse > div:first-child img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0;
}

/* ------------------------
   공통 모바일 대응
------------------------ */
@media (max-width: 768px) {
	.text-image-row,
	.text-image-row-reverse {
		flex-direction: column;
		gap: 1.5rem;
	}

	.text-image-row > div,
	.text-image-row-reverse > div {
		flex: 1 1 100%;
	}

	/* text-image-row는 순서 유지 */
	
	/* text-image-row-reverse는 텍스트 위, 이미지 아래 */
	.text-image-row-reverse > div:first-child {
		order: 2; /* 이미지 div */
	}

	.text-image-row-reverse > div:last-child {
		order: 1; /* 텍스트 div */
		    padding-right: 15px;
	}
}

@media (min-width: 769px) {
	.text-image-row > div:last-child, 
	.text-image-row-reverse > div:last-child {
		padding-right: 20px;
	}
}


/* 블록 에디터 이미지 텍스트 순서 변경 */
@media (max-width: 768px) {
	.text-image-reverse.wp-block-media-text.is-stacked-on-mobile {
		display: flex;
		flex-direction: column;
	}

	.text-image-reverse.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
		order: 2;
	}

	.text-image-reverse.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		order: 1;
	}
}

ブロックエディタでデザイン作業が多い場合、200以上の事前作成されたデザインパターンを提供する ブロック生成プロ バージョンを利用することも可能です。

プロのデザインのサイトを簡単かつ迅速に作成したい場合 エレメンページビルダーを使用すると時間を節約できます。速度の面では、エレメントよりもGenerateBlocksが高速です。

👉 WordPress ブロックエディタ対エレメンタ、どんな方がいいですか？

参照

• WordPressで簡単にランディングページを作成する（feat。エレメント、 GeneratePress, Divi)
• エレメント（Elementor)でメガメニューを作る方法
• WordPress 収益型ブログ向け GeneratePress テーマスキンの配布