この記事では、WordPressでいわゆる「画像のテキスト回り込み」を実現する方法を紹介します。

なお、「ブロックエディター（Gutenberg）」をご利用いただくことが前提となっております。

作成例

本記事では、以下のようなブロックを作成することを目的といたします。（余白については容易に調整可能のため、今回は気にしないことと致します）

あああああ

サンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキスト

サンプルテキストサンプルテキストサンプルテキスト

作り方

「グループ」ブロックを作成。

「レイアウトを選択」の選択肢は一番左でOKです。

STEP

1

「グループ」ブロックの中に回り込みさせたい「画像」とテキストを挿入。

補足

「画像」と「段落」を先に配置し、後から両方を選択して「グループ化」の操作を行っても問題ありません。

STEP

2

画像を左寄せ（または右寄せ）にすれば、ご希望の回り込み配置が完成します。

STEP

3

「グループ」ブロックの下部に「スペーサー」を挿入してください。

回り込みのテキストの量が不足している場合など、デザイン崩れが発生する可能性があります。

これを防ぐため、「グループ」ブロックの下に「スペーサー」ブロックを挿入してください（高さの調整はお好みでどうぞ）。

注意

プラグイン「VK Blocks」で使用できる「レスポンシブスペーサー」など、レスポンシブ対応のスペーサーでは、上記のデザイン崩れに対応できない場合があります。

STEP

4

注意事項

モバイル閲覧時の対策を忘れずに

小さな画像を使っている場合、モバイル端末のように横幅が短い場合は、以下のように文章が見づらくなる可能性がございます。

そのため、回り込み使用時には少し大きめの画像を使用したり、ブロックの出し分けを行ったりするなどの工夫・対策をお願いいたします。

テーマにより非対応の場合がある

一部テーマ（SWELL・echoなど）をご利用いただいている場合、テーマ側の対応により、上記方法が使えなかったり、追加で対応が必要だったりする場合がございます。

• 【解決】SWELLで画像のテキスト回り込みができない
• 画像ブロックと段落ブロック < SWELLに関する質問

関連商品

誰でもかんたん！「プロ級サイトをサクッと作成できる」WordPressテーマ【Xwrite】

『Xwrite（エックスライト）』は、 多彩な機能で、高速表示に対応した100％GPLのテーマです。 初心者にも充実のサポートでサイト運営をバックアップします。

公式サイトをチェック

テーマの特徴をチェック

ポチップ

国内シェアNo.1レンタルサーバー【エックスサーバー】

・運用サイト数250万件で国内シェアNo.1 ・初期費用無料、月額990円から、大容量500GBからの高コストパフォーマンス ・安定のサーバー稼働率99.99％以上 ・世界最高クラスの第5世代 AMD EPYC™とオールNVMe環境を採用 ・.com .netなどから選べる！独自ドメインが永久無料 ・マルチドメイン、メールアドレス無制限！独自SSLを無料で利用可能！

公式サイトをチェック

法人向けプランはこちら

ポチップ

本記事では、WordPressの表示速度向上に役立つ「EWWW Image Optimizer」プラグインによる画像圧縮と、テーマにカスタム画像サイズを追加して不要な大きい画像読み込みを防ぐ方法について、理由と具体的手順を丁寧に解説します。

なぜ画像最適化が必要なのか

ページ表示速度の改善

大きな画像ファイルをそのまま読み込むと、ユーザーの通信回線（特にモバイル）で表示に時間がかかります。読み込みが遅いと、離脱率が上がりSEO（検索エンジン最適化）にも悪影響を及ぼします。

※離脱率（Bounce Rate）：ユーザーが1ページだけ見てサイトを離れる割合です。

帯域（バンド幅）とサーバー負荷の軽減

画像サイズが小さければ、それだけ転送データ量が減るため、サーバーやCDNのコストを抑えられます。高画質を保ちつつ圧縮率を上げられると理想的です。

レスポンシブ対応の強化

ユーザーの画面幅に合わせた最適な画像サイズを提供すると、無駄な大きい画像のダウンロードを防げます。WordPressはsrcset機能で自動的に最適画像を選択しますが、カスタムサイズを用意しておくことで、さらに細かく制御できます。

EWWW Image Optimizer の導入と設定

プラグインのインストール

1. 管理画面の「プラグイン」→「新規追加」で「EWWW Image Optimizer」を検索
2. “今すぐインストール” → “有効化”

基本設定

有効化後、管理画面の「設定」→「EWWW Image Optimizer」メニューに移動します。

［Basic Settings］
・『Remove metadata』：チェック → 画像に含まれる撮影情報などの余分なデータを削除  
・『Enable Jumbo Mode』：好みで → 圧縮率をさらに高める（サーバーCPUに負荷がかかる場合あり）

• Metadata（メタデータ）とは、撮影日時やカメラ情報などの付帯情報
• Jumbo Mode：高圧縮モード。時間がかかるがファイルサイズを大きく削減できます。

WebP 変換の有効化

「WebP Conversion」タブを開き、

1. 『Convert existing images to WebP』にチェック
2. 『Also convert to WebP in Media Library』にチェック

WebPはJPEG/PNGよりもさらに圧縮効率に優れた次世代フォーマットです。

一括最適化（Bulk Optimize）

既存メディアを一度に最適化するため、「Tools」→「Image Optimization」→「Run All Optimizations」で一括処理を実行します。時間がかかる場合があるので、深夜帯など負荷の低い時間に行いましょう。

画像サイズ（サムネイル）の追加と活用

なぜカスタム画像サイズが有効か

• テーマやテンプレートごとに必要な画像サイズは異なります。
• デフォルトの「サムネイル（150×150px）」「中サイズ（300×300px）」「大サイズ（1024×1024px）」以外に、独自サイズを追加すると、余分に大きいサイズを読み込まずに済みます。

functions.php に設定を追加

子テーマ（Child Theme）の functions.php に以下コードを追記します。

<?php
// カスタム画像サイズを追加
function mytheme_setup_custom_image_sizes() {
    // 幅800px、高さ450px、トリミングは中央基準
    add_image_size( 'hero-large', 800, 450, array( 'center', 'center' ) );
    // 幅400px、高さ225px、トリミングなし（縦横比を維持）
    add_image_size( 'hero-medium', 400, 225, false );
}
add_action( 'after_setup_theme', 'mytheme_setup_custom_image_sizes' );

コードの解説

• add_image_size( $name, $width, $height, $crop )
  • $name：画像サイズの識別名
  • $width, $height：ピクセル単位
  • $crop：切り抜き設定。true（センターで切り抜き）/array( ‘x’,’y’ )/false

サムネイル再生成

新規登録画像には自動生成されますが、過去画像には適用されません。
再生成には「Regenerate Thumbnails」などのプラグインを使い、以下手順で実行します。

1. プラグインをインストール・有効化
2. ツール→「Regenerate Thumbnails」→「Regenerate All Thumbnails」を実行

テンプレートでのサイズ指定

記事一覧やヘッダーなどテーマ内で画像を出力する際、以下のように呼び出します。

if ( has_post_thumbnail() ) {
    // hero-large サイズで出力
    the_post_thumbnail( 'hero-large' );
}

WordPressは自動的に srcset 属性を付与し、画面幅に合わせて最適な画像を選びます。さらに細かく制御したい場合は、wp_get_attachment_image_srcset() や sizes 属性を併用しましょう。

さらに効果を高めるポイント

Lazy Load（遅延読み込み）

EWWW Image Optimizer では「Lazy Load」タブから有効化でき、ユーザー画面内に到達した画像だけを読み込みます。WordPress 5.5以降は標準で loading="lazy" が付きますが、プラグインでさらに最適化可能です。

• CDN（コンテンツ配信ネットワーク）
  画像をCDNに配信すると、ユーザーからの地理的な距離による遅延を減らせます。EWWWのCDNオプション（有料）や、Cloudflare・AWS CloudFront・KeyCDNなどと併用しましょう。
• SVG（ベクター画像）の活用
  アイコンやロゴなど単色・簡易図形はSVG化できると、ファイルサイズ・解像度の両面でメリットがあります。

まとめ

1. EWWW Image Optimizer でメタデータ削除・圧縮・WebP変換・遅延読み込みを設定し、既存画像を一括最適化
2. カスタム画像サイズ を add_image_size() で定義し、不要な大きいサイズ読み込みを防ぐ
3. 再生成プラグイン で過去画像にも適用
4. テーマテンプレートで the_post_thumbnail() などを活用し、srcset でレスポンシブ配信

これらを組み合わせることで、ページの表示速度・ユーザー体験・SEOが同時に向上します。ぜひ試してみてください！