縦横比が異なる画像を並べて配置するやり方（ノーコード・レスポンシブ対応）

縦横比が異なる画像をきれいに並べたい

お客様の WordPress サイトのページを制作するとき、お客様から提供していただいたいくつかの画像を配置してページを作ることも多いです。

その場合、縦横比が統一されていると作業しやすいのですが、↓こんなふうに縦長・横長の画像が混在している画像をいただいて、「この3枚を並べて作業の様子を紹介するページを作ってださい」と依頼されることがあります。

トリミングして縦横比を揃えることができそうな場合はそうしているのですが、↑この3枚のようにトリミングってわけにいかない場合があります。

こんなとき、どの画面幅でも画像の高さ・幅をきっちり揃えて見た目よく表示できるやり方があります。

以下がその作成例です。画面幅をいろいろと変えてご覧いただくと、画像の高さ・幅が揃って、上下または左右が切り取られますが、どの画面幅でも破綻することなく、それなりにいいかんじに表示されています。

使用するブロックは3つ

設定のポイント① カラムの幅

上記の作成例では、左から 25%・25%・50% を割り当てています。

設定のポイント② カバーブロックのフォーカルポイント

設定のポイント③ レスポンシブスペーサーのデバイス毎の高さ

レスポンシブスペーサーを以下の設定で使います。

余白の設定：カスタム
余白タイプ：height
単位：vh

PC・タブレットでは横に並びますので、すべてのカラムの高さを同じにします。
モバイルでは縦に並びますので、個々の画像に最適な高さを指定します。
この数値を変えながら試行錯誤して仕上げていきます。

画像が欠けるの嫌、ってときは…

この記事に書いたやり方のいいところは「どんな縦横比の組み合わせでもなんとかなりそう」という対応力の高さです。それともうひとつ、CSS を書かなくてもよい点（ノーコード）も見逃せないポイントです。一方、画像の上下または左右が欠けてしまうという欠点があります。

雰囲気が伝わればいい、って場合はちょっとくらい欠けても問題ないのですが、お客様によっては「欠けちゃダメ！」ってこともあるかもしれません。そんな場合は、グリッドレイアウト (display: grid;) を使って CSS で以下のようにレイアウトすることになります。

CSS は↓こんなかんじです。

.work-scene .wp-block-group__inner-container {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr 1fr 2.035fr;
}
.work-scene figure {
    margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .work-scene .wp-block-group__inner-container {
    grid-template-columns: 1fr 1fr;
  }
  .photo-1 {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
  }
  .photo-2 {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
  }
  .photo-3 {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
  }
}

theme.json が有効な場合、.wp-block-group__inner-container を削除しないと期待通りの結果になりません。

サイト運営者プロフィール

対馬 俊彦魚沼情報サービス・ベクトル公式テクニカルパートナー

WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。

Lightning / X-T9 / VK Blocks / VK Filter Search などのベクトル製品のサポート、カスタマイズを最も得意としています。

打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。

オンラインレッスン形式でのウェブサイト制作・運用のサポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。

デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。

ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。

≫メールでのお問い合わせはこちら

最新の投稿

この著者の記事一覧

• WordPress2026年2月26日宿泊施設のサイト向けにカラムブロックを使ったバナー案を作成しました
• WordPress2026年2月25日スターターパックでヘッダーに電話番号とお問い合わせボタンを表示できる機能を追加しました
• WordPress2026年2月11日投稿のタイトルが長いときに改行して表示されないようにカスタマイズしました
• 制作事例2026年2月9日ホームページ制作事例「パソコン教室くりっく」