Bloggerで記事一覧に表示されるサムネイル画像が、「上下や左右で切れてしまう…」「大事な文字が見切れてしまう…」と悩んでいませんか？
「CSSの `object-fit` をいじっても全然直らない！」と焦っている方、結論から言います。見切れる本当の原因はCSSではなく、Bloggerテーマの「HTML（強制クロップ設定）」にあります。
本記事では、数日間ずっと“CSS沼”にハマっていた私が試行錯誤して見つけた、サムネイルの見切れを根本から解決し、綺麗な「16:9」で統一する手順を最短で解説します。コピペで簡単に直せるので、ぜひ試してみてください！
- サムネイルが強制クロップされる本当の原因（HTMLの罠）
- 見切れを直すHTMLの修正手順（どこをどう消すか）
- 一覧画像を「16:9」に綺麗に揃えるための追加CSS
- 画像がぼやける・画質が悪い場合の対処法（FAQ）
1. サムネイルが見切れる本当の原因（HTMLの強制リサイズ）
Bloggerのテンプレート（テーマ）のHTMLコードをよく見直してみると、サムネイルを表示する部分に決定的な原因が隠れていました。多くの標準テーマや配布テーマには、以下のような記述があります。
<img class='list-item-img'
expr:alt='data:post.title'
expr:src='resizeImage(data:post.firstImageUrl, 480, "2:1")'
width='480' height='240'
loading='lazy'/>
なんと、画像URLを取得する部分に resizeImage(..., "2:1") と「2:1の比率に強制的に切り抜く（クロップする）」という指定がガッツリ入っていたのです。さらに width='480' height='240' と寸法も2:1で固定されています。
これでは、元画像が16:9（YouTubeのサムネイル等で一般的な比率）であっても、上下が強制的にカットされてしまうのは当然です。CSSでいくら object-fit を調整しても直らなかった理由は、出力されるHTMLの段階ですでに画像が壊されていた（切り取られていた）からでした。
2. 解決手順①：HTMLを修正して見切れを直す
それでは、根本的な原因であるHTMLを修正していきましょう。Bloggerの管理画面から以下の手順で進めます。
- 左側メニューの「テーマ」をクリック
- 「カスタマイズ」ボタンの横にある「▼」を押し、「HTMLを編集」を開く
- エディタ内をクリックし、
Ctrl + F（MacはCommand + F）でresizeImageを検索します。
該当箇所を見つけたら、以下のようにコードを差し替えます。
修正後（こちらに書き換える）
<img class='list-item-img'
expr:alt='data:post.title'
expr:src='data:post.firstImageUrl'
loading='lazy'/>
余計な resizeImage の指定を外し、比率を固定する width / height も削除しました。これでBlogger側の強制クロップが解除され、アップロードした投稿画像がそのままの比率（16:9など）で綺麗に出力されるようになります。
3. 解決手順②：追加CSSでサムネイルを「16:9」に揃える
HTMLを直すだけでも見切れは解消しますが、今度は「縦長の画像」や「正方形の画像」が混ざった時に、記事一覧の高さがバラバラになってしまいます。
そこで、一覧の表示を安定させるためにCSSで補強します。aspect-ratio を使って、すべてのサムネイル枠を「16:9」に統一しましょう。
「テーマ」→「カスタマイズ」→「詳細設定」→「CSSを追加」を開き、以下のコードをコピペしてください。
CSS
.list-item-img {
width: 100%;
aspect-ratio: 16 / 9; /* 枠を16:9に強制的に統一 */
object-fit: cover; /* 枠に合わせて画像を綺麗にトリミング */
background-color: #ffffff; /* 余白が出た場合の背景色 */
display: block;
height: auto;
}
※元画像が16:9から大きく外れている場合に見切れるのを防ぎたい場合は、object-fit: cover; を object-fit: contain; に変更してください。（containにすると、画像全体が収まる代わりに上下または左右に余白ができます）
4. カスタマイズ完了！見切れが完全に直った一覧画面
HTMLとCSSの両面から修正を行った結果、完成した記事一覧画面（スマホ表示）がこちらです。
以前は強制リサイズによって上下が欠けていたサムネイルが、投稿画像そのままの比率（16:9）で綺麗に表示されていることがわかります。見切れが一掃され、一覧記事全体の統一感も生まれました！
Bloggerサムネイルに関するよくある質問（FAQ）
- Q. HTMLを直してもサムネイル画像がぼやける・画質が悪い場合は？
- A. Bloggerの画像URLに含まれるサイズ指定（例：
s72-cやw480-h240）が小さすぎる可能性があります。HTML内でs600やs800など大きな数値に書き換えることで高画質化できます。 - Q. CSSの object-fit が効かないのはなぜですか？
- A. 画像を囲んでいる親要素に高さや幅が明確に指定されていないと効かない場合があります。今回ご紹介したように
aspect-ratio: 16 / 9;とセットで使うのが最も確実な方法です。 - Q. サムネイルを「1:1（正方形）」にしたい場合は？
- A. CSSの
aspect-ratio: 16 / 9;の部分をaspect-ratio: 1 / 1;に書き換えるだけで、すべてのサムネイルが綺麗な正方形に統一されます。
当ブログで紹介しているBloggerの必須カスタマイズをひとつの記事にまとめました！デザインの最適化から収益化の基盤作りまで、コピペでできる厳選テクニック8選を完全網羅しています。ブログをさらにパワーアップさせたい方はぜひご覧ください！
まとめ：Bloggerのサムネイル修正でSEO（CLS）も改善！
私自身、「CSSの指定が悪いのかな？」と疑い、ありとあらゆるCSSを試しましたが、今回学んだのは「見切れや崩れは必ずしもCSSのせいではなく、HTMLが原因の場合もある」ということです。最初からHTMLを確認していれば、もっと早く解決できたはずでした。
解決方法はシンプルで、「HTMLで比率指定（resizeImage）を外す」ことと、「CSSで aspect-ratio: 16/9; を設定する」だけです。
実際にこの修正を行ったことで、ページ読み込み時のガタつきが減り、CLS（レイアウトシフト）の改善にもつながり、SEO的にもプラスになりました。デザインが整うだけでなく、Googleからの検索評価にも良い影響を与える点も嬉しいメリットです。同じように悩んでいる方の参考になれば幸いです！
