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

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

下記のような感じです。

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

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

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

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

単純な解決方法

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

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

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

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

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

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

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

最終的な解決策

解決方法の詳細

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

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

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

すでに作られたものに対する対処方法

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

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

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

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

サムネイル画像が見切れるのを解決したいのまとめ

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

• 「設定」→「メディア」の"サムネイルを実寸法に切り抜く"のチェックを外します
• Regenerate Thumbnailsでサムネイル画像の再作成