サムネイルの画像サイズが揃わない | SkillhubAI（スキルハブエーアイ）

サムネイル画像のサイズを揃える方法は主に３つ

ブログの記事一覧などで表示される画像。メディアにアップロードした画像サイズが違うと、表示される大きさが違い、横並びにするとガタつきます。

画像の高さを揃えるだけでも、表示クオリティがワンランク上がるでしょう。この画像の高さをる方法は、主に以下3つが挙げられます。

使用する画像のサイズを決めておく
アプリ/プラグインを使って調整する
CSSで強制的に揃える

結論から言えば、１が最良です。 でも、既に作ってしまったコンテンツを全て直すなんて気が遠くなる……なんてこともあります。その時は２，３の方法と組み合わせて調整すると良いでしょう。

1. 画像サイズを決めておく

最も安定した方法は、最初にアップロードする画像のサイズを決めておくことです。同じサイズ、もしくは同じアスペクト比の画像を登録しておけば、一覧表示で画像の並びがガタガタに崩れることはありません。

１つずつ決まったサイズに画像をリサイズ・トリミングして利用すれば、ユーザーに見てほしい部分を効果的に切り抜けます。これからコンテンツを作っていく場合は、１つずつ最適な位置でトリミングした画像を用意するのがオススメです。

file

画像サイズを決めるメリット

すべての画像がベストな状態で見られる

画像サイズを決めるデメリット

画像を作る（トリミングする）手間がかかる
アップロード済の画像も直さなくてはいけない

メディアライブラリからのリサイズ/トリミング

WordPress管理画面にあるメディアライブラリでは、かなり高性能なリサイズ・トリミング機能がついています。ブログを書く度にPhotoshop立ち上げるのは面倒、なんて時には活用してみましょう。

メディアライブラリを開いて、サイズ変更したい画像を選択。

file

画像の下にある「画像を編集」をクリックすると、サイズ変更モードになります。

file

最初に「切り抜き」をクリックすると、トリミングモードになります。点線部分でアスペクト比、もしくは変更したい画像サイズを入力しましょう。

file

2. サムネイル設定/プラグインを使う

WordPressでは、プラグインを使うと、アップロード済の画像サイズを変更することも出来ます。既に画像を結構アップロードしている…という場合には、一括で画像サイズ変換もできるので便利ですね。

ただし、トリミングする位置を細かく選べないので見せたい部分が切れてしまったり、という場合もあります。機械的にサイズを合わせたい場合は、重要なコンテンツの位置を大まかに決めるなど、ある程度のルールはあったほうが良いでしょう。

file

アプリ/プラグインでリサイズするメリット

アップロード済の画像にも変更をかけられる
画面上でリサイズ・トリミング処理ができる

アプリ/プラグインでリサイズするデメリット

画像内の重要なコンテンツが切れてしまう可能性がある
アプリ/プラグインによってはお金がかかる

WordPressのサムネイル設定で揃える

WordPressの場合、プラグインを使わなくても、自動的にリサイズ・トリミングしてサムネイル画像を表示させることが出来ます。（※ ローカル環境の場合は、上手く機能しません）

外部リンク

WordPressアイキャッチの自動トリミングのやり方

画像リサイズプラグインを使う

”Regenerate ThumbnailsはWordPressで登録済のサムネイル画像を、一括でリサイズしてくれるプラグイン。サムネイルのサイズだけ揃えば良い、今まで使っていたサムネイルサイズから変更したい、なんて時に役立ちます。text-danger strong">（※ ローカル環境の場合は、上手く機能しません）

下記のサイトでは”Regenerate Thumbnails"のインストール方法から、テーマファイルの記述までが紹介されています。

外部リンク

Regenerate Thumbnails: サムネイル画像を生成し直すWordPressプラグイン

3.CSSで強制的に高さを揃える

1と2は画像そのもののサイズを変更する方法ですが、CSSで画像の表示サイズを制限することもできます。画像自体には変更を加えず、トリミングしたかのように表示するイメージです。

file

CSSで高さを揃えるメリット

数行の記述で、画像の表示サイズを統一できる
アップロード済の画像を直す必要がない

CSSで高さを揃えるデメリット

画像内の重要なコンテンツが切れてしまう可能性がある
CSSクラスの把握、スタイル指定の基礎知識が必要

object-fitプロパティを使う方法

CSSで画像の高さを揃える場合、よく使うのがobject-fitプロパティ。 heightプロパティ、もしくはaspect-ratioプロパティと組み合わせることで、元画像を歪ませることなく高さを揃えてくれます。

画像に対して、以下のようにCSSを指定します。 HTML、セレクタ部分は制作しているWebページに合わせてください。

HTML

<div class="test">
    <img src="images/○○○.jpg" alt="">
</div>

CSS例 - 高さを固定値で指定する

.test img{
    width: 100%;
    height: 280px;
    object-fit: cover;
}

CSS例 - アスペクト比で高さを決める

.test img{
    width: 100%;
    aspect-ratio: 1.9/1;
    object-fit: cover;
}

サムネイルを背景画像化する方法

もう一つ、WordPressのサムネイルのサイズを揃えためによく使われる方法があります。それは、アイキャッチ画像を画像としてではなく、背景画像として使う方法です。

幅・高さを決めたボックス（divなど）を用意しておい Bootstrapを使ったポートフォリオサイトのフロントページ、ブログセクションであれば以下のような書き方をします。

style.css

.card-thmb{
    content: "";
    width: 100%;
    height: 200px;
    background-size: cover;
}

front-page.php

<div class="row">
  <?php query_posts('post_type=post&showposts=3');
    while (have_posts() ): the_post(); ?>
    <div class="col-md-4 mb-5">
      <div class="card blog-card">
        <a href="<?php the_permalink(); ?>">                
          <?php if ( has_post_thumbnail() ) : //アイキャッチ画像あり ?>
            <div class="card-thmb" style="background-image: url(<?php the_post_thumbnail_url('post-thumbnails'); ?>);"></div>
          <?php else: //アイキャッチ画像なし ?>
            <div class="card-thmb" style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/noimage.jpg);"></div>
          <?php endif; ?>
        </a> 
        <div class="card-body">
          <h3 class="card-title">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
          </h3>
          <p class="card-text"><?php the_excerpt(); ?></p>
        </div>
        <div class="card-footer d-flex justify-content-between align-items-center">
          <div class="mb-1">
            <a href="<?php echo get_author_posts_url( get_the_author_meta( 'ID' ) ); ?>">
              <img src="<?php echo get_avatar_url($post->post_author); ?>" class="avatar rounded-circle">
              <?php the_author(); ?>   
            </a>
          </div>
          <div class="mb-1">
            <i class="far fa-clock"></i> <?php the_time('Y/m/d'); ?>
          </div>
        </div>
      </div>
    </div>
  <?php endwhile; wp_reset_query();?>
</div><!-- //row -->

file

CSSを使用する方法

CSSを使うメリットは、画像サイズを変更する・リサイズした画像を新たに作ることなく、高さを揃えられること。しかし、個別に画像内のベストな位置でトリミングが出来るわけではありません。

テーマを作る時に保険として設定しておく以外は、画像のサイズ変更を行う期間中の応急処置としての使用が良いと思います。

レッスン一覧へ