Bloggerサムネイルが見切れる原因と解決法｜HTMLの2:1指定を直して16:9で統一する方法

Bloggerで記事一覧に表示されるサムネイルが「上下や左右で切れてしまう」という問題に悩んでいませんか？私もまさに同じ状況で、最初はCSSをいじって何度も調整しましたが、なぜかうまくいかない…。実は原因はCSSではなく、テンプレートのHTMLにあったのです。本記事では、私が実際に試行錯誤して分かった原因と解決策を体験談ベースでまとめます。

Bloggerのサムネイルが見切れる原因を探した日々

記事一覧のサムネイル画像がいつも切れてしまい、「object-fit: contain;」「object-fit: cover;」などCSSをいじってはプレビュー確認。何度試しても、画像が枠からはみ出したり、上下が欠けたりしてしまいました。

「CSSの指定が悪いのかな？」「親要素の高さが原因？」と疑い、heightやmax-heightを指定してみたり、display:blockを加えてみたりと、ありとあらゆる方法を試しました。しかし結局どれも根本的には直らず…。数日間ずっと“CSS沼”にハマっていたのです。

本当の原因はテンプレートの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'/>

なんと、resizeImage(..., "2:1") と2:1比率に強制変換する指定が入っていました。さらにwidth="480" height="240"と寸法も2:1で固定。これでは、元画像が16:9であっても上下が切れるのは当然です。CSSでいくら調整しても直らないのは、HTML側で比率を壊していたからでした。

差し替え前と差し替え後のHTML

Before（2:1に強制されていた状態）

<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'/>

After（投稿画像そのまま表示に変更）

<img class='list-item-img'
     expr:alt='data:post.title'
     expr:src='data:post.firstImageUrl'
     loading='lazy'/>

余計なresizeImageの指定を外し、比率を固定するwidth/heightも削除。これで投稿画像がそのままの比率（16:9）で表示されるようになりました。

もしリサイズを使いたい場合は、"2:1" を "16:9" に変えて width="480" height="270" に揃える方法もあります。

CSSの調整（念のため16:9を枠で固定）

HTMLを直すだけでも見切れは解消しますが、一覧の表示を安定させるためにCSSでも補強しました。特にモバイルでレイアウトが崩れるのを防ぐため、aspect-ratioを使って枠を16:9に統一しました。

.list-item-img {
  width: 100%;
  aspect-ratio: 16 / 9;   /* 枠を16:9に統一 */
  object-fit: contain;    /* 全体を収めて見切れ防止 */
  background-color: #ffffff; /* 余白が出ても自然に見えるように */
  display: block;
  height: auto;
}

この指定にしてから、記事一覧のサムネイルがすべて同じ高さで並び、すっきり見やすくなりました。

私の学び：「まずHTMLを疑う」

今回の経験から学んだのは、見切れや崩れは必ずしもCSSのせいではないということです。私は何度もCSSを書き換えて時間を浪費しましたが、実際はテンプレートHTMLに比率固定の仕掛けがあったのです。最初からHTMLを確認していれば、もっと早く解決できたはず…と少し反省しました。

まとめ

Bloggerのサムネイルが見切れる原因は、テンプレートに書かれていたresizeImage(..., "2:1")と固定寸法でした。CSSでどんなに調整しても直らないのは当然だったわけです。解決方法はシンプルで、HTMLで比率指定を外すか、16:9に揃えるだけ。そのうえでCSSでaspect-ratio: 16/9;を設定すれば、見切れないサムネイルが簡単に実現できます。実際にこの修正を行ったことで、CLS（レイアウトシフト）の改善にもつながり、SEO的にもプラスになりました。デザインが整うだけでなく、検索評価にも良い影響を与える点も嬉しいメリットです。