サムネイル画像が見切れるのを解決したい【wordpress】

ブログのトップページのサムネイル画像が見切れてしまい、困っていました。

下記のような感じです。

アイキャッチ画像は、推奨の1200×630ピクセルで作成しています。

そのため横に長いアイキャッチ画像になりますが、サムネイル画像では、その左右が見切れた形になってしまう状況です。

Affinger6のテーマを使っています。

色々調べて、解決したので、記載したいと思います。

こんな方におすすめ

単純な解決方法

簡単なやり方は、「Affinger管理」→「全体設定」→「サムネイル画像設定」のところで設定を変える方法です。

ここをフルサイズにするというのを選択すると、画面上は直ります。

下記のようにサムネイル画像が、見切れずにアイキャッチ画像そのまま表示されました。

しかしこの対処法の問題は、フルサイズはオリジナル画像サイズを読み込むため、表示速度に影響が出てしまう点です。

このように小さいサムネイル画像でも、アイキャッチ画像の1200×630ピクセル分、画像を読み込むためです。

上記でサイトスピード計測をすると、下記の通り「適切なサイズの画像」が使われていないとのメッセージがでます。

デザイン性を求めて、サイトが重くなっては本末転倒なので、ここも解決したいと思います。

そもそもサムネイル画像が正方形で作られていることが問題でした。

「設定」→「メディア」の"サムネイルを実寸法に切り抜く"のチェックを外します。

これで、今後自動で作られるサムネイル画像はアイキャッチ画像をそのまま縮小したものになります。

今後作られるものに関しては大丈夫になりましたが、これまで作られたものに関しての対応が必要になります。

このプラグインRegenerate Thumbnailsを用いましょう。

これでサムネイル画像を再作成したら大丈夫です。

下記の設定は"メディア設定にする"にチェックをいれたら大丈夫です。

WordPressでサムネイル画像が見切れてしまっていましたが、下記のやり方で解決しました。