キャリカク岡山

画像や文章などの組み合わせ

画像の横に文を書くにはどういう手法を使うの？

画像に対しての文章の回り込みとか、
数枚の画像を並べる等の手法は、
企業のHP(=Home Page)・LP(=Landing Page=最初に表示されるページ)ではめちゃくちゃ使います。

結論から言うと、WordPressでは主にこの3種類で作ります。

やりたいこと	使うブロック
画像の右横・左横に文章を置く	media-text ブロック
画像を横に3枚並べる	columns + image ブロック
画像の隙間をpx単位で指定する	group + CSS指定、または html ブロック
隙間なしで画像を並べる	columns の blockGap:0 または独自HTML

注意：HTMLやCSSを使うと細かいレイアウト指定はできますが、
WordPressの環境によっては、
本文中の "style" 指定が制限される場合があります。


特に、事業所や会社全体で共通管理されているWordPressでは、
自由にCSSを追加できないことがあります。


その場合は、無理に細かいpx指定をするよりも、
カラム、画像、グループ、メディアとテキストなどの
標準ブロックを使って、
安定して表示できる範囲で整える方が安全です。

---

画像左・文章右に配置するブロックコード

これはWordPress標準の メディアとテキスト ブロックです。

<!-- wp:media-text {
"mediaPosition":"left",
"mediaId":123,
"mediaLink":"https://example.com/sample.jpg",
"mediaType":"image",
"mediaWidth":40
} -->
<div class="wp-block-media-text is-stacked-on-mobile" style="grid-template-columns:40% auto">
	<figure class="wp-block-media-text__media">
		<img src="https://example.com/sample.jpg" alt="画像の説明文" class="wp-image-123 size-full"/>
	</figure>
	<div class="wp-block-media-text__content">
		<!-- wp:heading {"level":2} -->
		<h2 class="wp-block-heading">サービスの特徴</h2>
		<!-- /wp:heading -->

		<!-- wp:paragraph -->
		<p>ここに画像の右側へ表示したい文章を記述します。企業HPやLPでは、サービス紹介・会社紹介・商品説明などでよく使います。</p>
		<!-- /wp:paragraph -->
	</div>
</div>
<!-- /wp:media-text -->

重要な引数

"mediaPosition":"left"

この値は、画像を左に置く指定です。

"mediaWidth":40

この値は、画像の横幅を40%にする指定です。

style="grid-template-columns:40% auto"

この値は、左40%、右側は残り全部、という意味です。

例示：

---

画像右・文章左に配置するブロックコード

画像を右にしたい場合は、ここを変えます。

"mediaPosition":"right"

実例はこちらです。

<!-- wp:media-text{
"mediaPosition":"right",
"mediaId":123,
"mediaLink":"https://example.com/sample.jpg",
"mediaType":"image",
"mediaWidth":40
} -->
<div class="wp-block-media-text has-media-on-the-right is-stacked-on-mobile" style="grid-template-columns:auto 40%">
	<div class="wp-block-media-text__content">
		<!-- wp:heading {"level":2} -->
		<h2 class="wp-block-heading">導入しやすいサービスです</h2>
		<!-- /wp:heading -->

		<!-- wp:paragraph -->
		<p>ここに画像の左側へ表示したい文章を記述します。右側に画像を置くことで、文章を先に読ませる構成にできます。</p>
		<!-- /wp:paragraph -->
	</div>
	<figure class="wp-block-media-text__media">
		<img src="https://example.com/sample.jpg" alt="画像の説明文" class="wp-image-123 size-full"/>
	</figure>
</div>
<!-- /wp:media-text -->

---

おすすめの配置

企業HPやLPなら、こういう交互配置がよく使われます。

画像左  + 文章右
文章左  + 画像右
画像左  + 文章右

こうすると、ページにリズムが出ます。

LPの「のっぺり感」を防げます😊

例示：

---

画像を横に3枚並べる方法

画像を横に3枚並べる方法はいくつかあります。

WordPress標準のブロックだけで作るなら、columns ブロックと image ブロックを使います。

ただし、画像同士の間隔を細かく指定したい場合は、カスタムHTMLブロックで Grid や Flex を使う方が安定します。

ここでは、画像同士の間隔を正確に指定しやすい Grid方式 を中心に説明します。

---

画像3枚を24px間隔で並べる

画像同士の間隔をきちんと指定したい場合は、次のように display:grid; と gap:24px; を使うと分かりやすいです。

<!-- wp:html -->
<div style="
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:24px;
">

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/A.png"
alt="画像A"
style="width:100%;height:auto;display:block;"
>

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/B.png"
alt="画像B"
style="width:100%;height:auto;display:block;"
>

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/C.png"
alt="画像C"
style="width:100%;height:auto;display:block;"
>

</div>
<!-- /wp:html -->

例示：

この方法なら、画像Aと画像Bの間、画像Bと画像Cの間が、分かりやすく 24px になります。

---

画像3枚を隙間なしで並べる

LPでよくある「画像をぴったり並べる」表示にしたい場合は、gap:0; にします。

<!-- wp:html -->
<div style="
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:0;
">

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/A.png"
alt="画像A"
style="width:100%;height:auto;display:block;"
>

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/B.png"
alt="画像B"
style="width:100%;height:auto;display:block;"
>

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/C.png"
alt="画像C"
style="width:100%;height:auto;display:block;"
>

</div>
<!-- /wp:html -->

例示：

隙間を空けたい場合は gap:24px;、隙間をなくしたい場合は gap:0; と覚えると分かりやすいです。

---

Flexで画像3枚を並べる場合

Flexboxでも画像を横並びにできます。

ただし、gap:24px; と width:33.333%; を同時に使うと、画像3枚の幅に隙間分が追加されて、合計が100%を超えることがあります。

そのため、Flexboxで正確に3枚を並べたい場合は、次のように calc() を使うと安全です。

<!-- wp:html -->
<div style="
display:flex;
gap:24px;
">

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/A.png"
alt="画像A"
style="width:calc((100% - 48px) / 3);height:auto;display:block;"
>

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/B.png"
alt="画像B"
style="width:calc((100% - 48px) / 3);height:auto;display:block;"
>

<img
src="https://kyarikaku-blog.com/wp-content/uploads/2026/09/C.png"
alt="画像C"
style="width:calc((100% - 48px) / 3);height:auto;display:block;"
>

</div>
<!-- /wp:html -->

例示：

gap:24px; の場合、画像と画像の間は2か所あります。

24px × 2か所 = 48px

そのため、画像幅は 33.333% ではなく、calc((100% - 48px) / 3) にすると、はみ出しにくくなります。

---

columnsブロックで注意すること

WordPress標準の columns ブロックでも、画像を3枚並べることはできます。

ただし、columns ブロックで指定する gap は、画像そのものの間隔というより、列と列の間隔として働きます。

画像A ← gap → 画像B

というより、実際には次のような考え方に近くなります。

┌──────── column ────────┐ 24px ┌──────── column ────────┐
│          画像A          │      │          画像B          │
└────────────────────────┘      └────────────────────────┘

そのため、列の中に小さめの画像を置いている場合、画像同士の間隔が想定より広く見えることがあります。

画像同士の間隔を正確に見せたい教材では、columns よりも、カスタムHTMLブロック内で Grid や Flex を使う方法の方が説明しやすいです。

まとめると、次のように考えると分かりやすいです。

隙間なしで重要な指定

gap:0;

画像同士の隙間をゼロにします。

display:block;

画像下に出やすい微妙な余白を防ぎます。

margin:0;

figure の余白を消します。

例示：

---

画像3枚を「完全なHTMLブロック」で書く場合

WordPressブロックとしてではなく、カスタムHTMLブロックに入れるなら、これが一番制御しやすいです。

<!-- wp:html -->
<div class="lp-image-row" style="display:flex;gap:24px;">
	<img src="https://example.com/image-01.jpg" alt="画像1の説明" style="width:33.333%;height:auto;display:block;">
	<img src="https://example.com/image-02.jpg" alt="画像2の説明" style="width:33.333%;height:auto;display:block;">
	<img src="https://example.com/image-03.jpg" alt="画像3の説明" style="width:33.333%;height:auto;display:block;">
</div>
<!-- /wp:html -->

隙間なしなら、

<!-- wp:html -->
<div class="lp-image-row" style="display:flex;gap:0;">
	<img src="https://example.com/image-01.jpg" alt="画像1の説明" style="width:33.333%;height:auto;display:block;">
	<img src="https://example.com/image-02.jpg" alt="画像2の説明" style="width:33.333%;height:auto;display:block;">
	<img src="https://example.com/image-03.jpg" alt="画像3の説明" style="width:33.333%;height:auto;display:block;">
</div>
<!-- /wp:html -->

先生としては、LPの細かいレイアウト制御なら、このHTMLブロック方式が一番分かりやすいと思います。

例示：

---

画像の横に文章を回り込ませるHTML方式

昔ながらの「画像に文章が回り込む」なら、float を使います。

画像左・文章が右に回り込む

<!-- wp:html -->
<div class="lp-float-section">
	<img src="https://example.com/sample.jpg" alt="画像の説明" style="float:left;width:40%;max-width:360px;margin:0 24px 16px 0;">
	<p>
		ここに文章を記述します。画像が左側に配置され、文章が画像の右側へ回り込みます。
		企業HPでは、代表挨拶、商品説明、サービス紹介などで使えます。
	</p>
	<p>
		文章が長い場合は、画像の下側にも自然に文章が流れます。
	</p>
	<div style="clear:both;"></div>
</div>
<!-- /wp:html -->

例示：

画像右・文章が左に回り込む

<!-- wp:html -->
<div class="lp-float-section">
	<img src="https://example.com/sample.jpg" alt="画像の説明" style="float:right;width:40%;max-width:360px;margin:0 0 16px 24px;">
	<p>
		ここに文章を記述します。画像が右側に配置され、文章が画像の左側へ回り込みます。
	</p>
	<p>
		会社紹介、事業紹介、設備紹介などでも使いやすい形です。
	</p>
	<div style="clear:both;"></div>
</div>
<!-- /wp:html -->

例示：

---

floatで重要な指定

float:left;

画像を左に寄せて、文章を右へ回り込ませます。

float:right;

画像を右に寄せて、文章を左へ回り込ませます。

margin:0 24px 16px 0;

画像の右側と下側に余白を作ります。

clear:both;

回り込みを解除します。

これを入れないと、

次のブロックまで回り込みの影響を受けることがあります。

---

おすすめの使い分け

用途	おすすめ
普通の企業HP	wp:media-text
LPで細かくデザインしたい	wp:html + flex
画像3枚を綺麗に並べたい	flex
画像に文章を自然に回り込ませたい	float
スマホ対応を重視したい	media-text または columns

---

まず覚えるならこの3つでOKです

media-text  → 画像横に文章
columns     → 画像を3枚並べる
html + flex → 隙間px指定・隙間なし配置

企業HPやLPなら、この3つが使えればかなり戦えます😊

特に flex は、WordPressでもHTML/CSSでも超重要です。

---

以前に書いた記事です。

HTML、CSSなどについて書いています。

ご参照頂けたら幸いです。

・ホームページを表示するには？
・HTMLって、どうやって使うの？
・主なHTMLタグ一覧
・WordPressって、どういうもの？
・WordPressのコアブロックの使い方
・WordPressとHTMLの対応は？
・CSSって、なにもの？
・CSSの使い方の詳細
・CSSファイルって、サーバーのどこに置くの？
・サーバーに接続するには、どんなソフトを使うの？
・ブロックインサーターを使ってみる

キャリカク岡山：F.K.