はてなブログ開発ブログ

はてなブログの新機能など開発に関する情報、公式のお知らせを発信します。

記事一覧ページおよびトップページの一覧形式で、サムネイル画像のトリミング仕様を変更しました

はてなブログでは、記事一覧ページおよびトップページの一覧形式で表示しているサムネイル画像について、トリミング仕様を変更しました。サムネイルの表示領域をCSS等でカスタマイズしている場合に、元のアイキャッチ画像の印象により近い状態で表示します。

記事一覧ページのサムネイルはデフォルトで正方形で表示するため、記事アイキャッチ画像が長方形だった場合、内部的に画像両端をトリミングしていました。しかし、下記例のように、サムネイル部分のCSSを長方形に変更して運用されているブログが一定数ある実態を鑑みて、内部的なトリミングを廃止することにいたしました。

f:id:hatenablog:20191023153822p:plain
例: https://developer.hatenastaff.com/archive

本変更で、以下の記事一覧ページに表示されるサムネイルのbackground-imageを「500x500pxの正方形」から「記事アイキャッチ画像の縦横比を保持したまま長辺500pxにリサイズ」としました。なお、サムネイル画像のサイズをCSS等で変更していないブログは、見え方に変化はありません。

対象となる変更箇所

記事一覧ページ

記事一覧ページとは、以下のページを指します。

URL
記事一覧ページ /archive
〃(年間) /archive/2012
〃(月間) /archive/2012/01
〃(日付ごと) /archive/2013/01/09
〃(カテゴリー) /archive/category/カテゴリー名
〃(著者ごと) /archive/author/ユーザ名

トップページの一覧形式

一覧形式については、以下の告知をご確認ください。

ブログのトップページを「一覧形式」で表示できるようにしました(はてなブログPro) - はてなブログ開発ブログ

本仕様はサムネイル画像のCSS変更を推奨するものではありません。デザインCSSはご自身の責任でのご利用をお願いしております。