本日、はてなフォトライフの画像をはてなブログに貼り付けた場合に、画像表示時に画面にズレ(レイアウトシフト)が生じないよう変更しました。
この変更により、画面をスクロールした際に、後から画像の読み込みが行われ、閲覧中の領域が下にずれてしまう、という問題を回避することができます。
また、この変更に合わせて画像の遅延読み込み(lazy load)にも対応し、画像をたくさん掲載したブログでも快適に閲覧できるようになりました*1。
なお、本変更が適用されるのは、本機能リリース後に投稿されたエントリのみとなります。過去に投稿されたエントリへの適用方法については、下記をご参照ください。
過去に貼り付けたフォトライフの画像について
編集モード「はてな記法」「Markdown」をご利用の記事については、記事を更新していただくと、自動的に本変更が適用されます。*2
編集モード「見たまま」で投稿された記事については、仕様上記事の再投稿を行っても本変更は適用されません。同じ画像を編集サイドバーから貼り付け直していただくか、「HTML編集」タブを開き、以下のようにimgタグのwidth,height属性に画像のサイズ情報を入力いただく必要がございます。
- 変更前のimgタグ
- <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sample/20210101/20210101000000.jpg" alt="f:id:sample:20210101000000:plain" title="" class="hatena-fotolife" itemprop="image" />
- 変更後のimgタグ(赤背景が変更点)
- <img src="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sample/20210101/20210101000000.jpg" alt="f:id:sample:20210101000000:plain" title="" class="hatena-fotolife" itemprop="image" width=”画像の幅(数字が入ります)" height=”画像の高さ(数字が入ります)” loading="lazy" />
お手数をおかけいたしますが、ご理解いただけますと幸いです。
画像が誤った縦横比で表示されてしまう場合
本変更の影響で、ユーザーが作成したテーマを利用している場合、画像が誤った縦横比で表示されてしまう可能性があります。
そのような問題が発生した場合、下記の窓口より、問題が発生したテーマの情報とともにご連絡いただけますと幸いです。表示崩れを回避するには一時的に別のテーマへの変更をご検討ください。
お問い合わせ
