ワードプレス【JIN】でアイキャッチ画像の大きさをプラグインなしでそろえるお勧めの方法

本記事では、ブログのトップページに表示される記事一覧のアイキャッチ画像の大きさをプラグインを使用しないでそろえる方法をお伝えします。

アイキャッチ画像（Eye Catch）とは、ブログに訪れてくれた人の目（Eye）をひきつける（Catch）ための画像のことです。 WordPressでは、サムネイル（小さく表示された画像）として表示されます。

トップページの記事一覧の写真の大きさがそろわない⁉
写真の大きさをそろえるお勧めの方法

トップページの記事一覧の写真の大きさがそろわない⁉

このブログのトップページには、下の写真のように最新の記事が新しい順番にならんでいます。また、カテゴリーを選択した場合も、このような表示になります。
この表示の設定は変更することができますが、このように設定（2つ並び）している人、多いですよね。私もこの配置が好きでこのようにしています。

この写真の赤いラインですが、アイキャッチ画像の大きさがそろっていますので、赤いラインもそろいますが、アイキャッチ画像の大きさが違ってしまうと、記事のタイトルの高さ位置も違ってしまい、見た目が少し悪くなってしまいます。

さくら

気にならない人もいるかもしれないですが、できればそろえたいですよね。

写真の大きさをそろえるお勧めの方法

「JIN」のひつじさんの記事によると、横幅が760px以上の画像サイズであれば、高さは自動でトリミングされて自然にそろうようになると書かれているのですが、それでもそろわないことがありました。（すいません。原因はわからないです。）

また、「Regenerate Thumbnails」というプラグインを使うと解決できるみたいですが、プラグインをインストールするのは、できるだけ最小限にしておきたいですよね。

プラグインを増やしすぎると、サイトが重たくなって読み込み速度の低下につながったりする可能性があります。私もできれば避けたい派です。

それでいろいろ調べてみたのですが、CSSを追加することによって解決できる方法を紹介しているサイトがありました。方法は次の通りです。とても簡単です。

次のコードをコピーして、追加CSS欄に貼り付けてください。

.pickup-image,
.new-entry-item .eyecatch,
.post-list-thumb {
    position: relative;
    overflow: hidden;
    width: 100%;
}
.pickup-image:before,
.new-entry-item .eyecatch:before,
.post-list-thumb:before {
    content:"";
    display: block;
    padding-top: 56.25%; /* 16:9 */
}
.pickup-image img,
.new-entry-item .eyecatch img,
.post-list-thumb img {
    position: absolute;
    top: 50%;
    left: 50%;
   -webkit-transform: translate(-50%, -50%) !important;
   transform: translate(-50%, -50%) !important;
}

追加SSC欄はここにあります。
サイドバーの外観からカスタマイズをクリック
カスタマイズの下の方に追加CSSがあります。