はてなブログで、一覧ページサムネイル画像の仕様が変わったので取り入れた
記事一覧ページのサムネイルはデフォルトで正方形で表示するため、記事アイキャッチ画像が長方形だった場合、内部的に画像両端をトリミングしていました。しかし、下記例のように、サムネイル部分のCSSを長方形に変更して運用されているブログが一定数ある実態を鑑みて、内部的なトリミングを廃止することにいたしました。
〜
記事一覧ページに表示されるサムネイルのbackground-imageを「500x500pxの正方形」から「記事アイキャッチ画像の縦横比を保持したまま長辺500pxにリサイズ」としました。
とのことなので、当ブログのレイアウトを以前の見た目に近い状態に戻すことにしました。
Before
After
※ついでに諸々のスタイルの調整もしました。
やってみて
かつては .page-index を強引にCSSでレイアウト調整してカードレイアウトっぽい外観を表現していましたが、そういう回りくどいやり方がいらなくなるのは良いですね。
長辺 500px のサムネイル画像なので、Ratinaなど高解像度の画面では、250pxより大きく配置すると粗く見えてしまうのは気になりました。
もし当ブログのように大きく配置し、かつキレイに見せたい方は、こちらの記事のようにJavaScriptで元画像を取得すると良いかもしれません。
（見た目も気になりつつ、今以上に読み込みを増やしたくないがために、現時点で当ブログは導入してません）
