【DIVER】サムネイル画像の左右が切れて表示される問題を解決する方法

2025年6月25日 2025年7月5日

DIVERの横長サムネイル画像の左右が切れて中央が拡大されているように表示されて困っている方いませんか？

例えば記事下の関連記事。

サムネの左右が切れて格好悪い。

この記事では、

このようにサムネイル画像全体を表示させる方法を紹介します。

サムネイル画像全体が表示されるようにする方法

「設定」-「メディア」のメディア設定を次のように設定します。

サムネ画像全体を表示させるために必要なのは「サムネイルのサイズ」の変更です。

「中サイズ」と「大サイズ」は、

「中サイズ」… 大サイズでは縦が長くなりすぎる画像用
「大サイズ」… 横幅一杯に表示させたい画像用

で、使い分けています。

なお、アイキャッチ画像のサイズは「1200px x 630px」にしています。

メディアのサイズ設定は今後アップロードされる画像にしか適用されません。

すでにアップロードされているサムネイル画像はサイズを変えてあげる必要があります。

サイズ変更には「Force Regenerate Thumbnails」というプラグインを使用します。

使い方はとても簡単で、プラグインをインストールして有効にしたら

メディア設定変更後、「ツール」-「Force Regenerate Thumbnails」を開き、「すべてのサムネイルを再生成する」ボタンを押すだけ。

これだけで既存の画像がすべて削除され、新たに設定したサイズで画像を作り直してくれます。

※作業前に「uploads」ディレクトリのバックアップを取ると安心です。

これでサムネイル画像全体が表示されるようになりました。

記事タイトルが2行までならここまでの作業だけでサムネイル画像全体が表示されるのですが、タイトルが3行以上になるとまた左右が切れてしまいます。

これを解決するにはCSSに下のコードを追記しましょう。

.post_list_wrap figure {
    background: transparent;
}
.post-box-thumbnail__wrap img {
    height: auto;
    object-fit: contain;
}

.post_list_wrap figure {

background: transparent;

}

.post-box-thumbnail__wrap img {

height: auto;

object-fit: contain;

}

サムネイル画像全体が表示されるようになりました。

DIVERのサムネイル画像の左右が切れないように全体を表示する方法を解説してきました。

ただ、中央にテキストやアイコンを集約したアイキャッチ画像を制作するのがDIVERの意図するところ。

本来はその狙いに合わせたアイキャッチ画像を制作すれば全体を表示するより効果的な表示が可能です。

左右が切れて表示されるのはDIVERの仕様が悪いからということではありません。