はてなブログでブログを運営している人は、過去に投稿した記事をブラッシュアップしたり、SEO対策を施したりなどの修正をしたくなることもあると思います。
しかし、記事数が多ければ多いほど修正が面倒になってしまうのもまた事実。
後で手入れすればいいやと思って、何ヶ月も放置している修正予定の記事があったりしませんか？ 私はありますよ！
はてなブログで記事を修正するなら今がチャンスなんです！
なぜ今がチャンスなのかと言いますと……
（2021年）６月に、はてなブログに新機能が実装されまして、「はてなフォトライフの画像を表示する際に画面にズレが生じない」ように変更されました！
この後、詳しく簡潔に説明しようと思います。
そもそも、画面にズレが生じるとはどういうこと？
ブログなどで記事に画像を張り付けて投稿することがありますが、テキストと画像では画像データの方が容量が大きい（読み込みに時間がかかる）ことはご存知だと思います。
記事中やサイドバーなどに画像をたくさん貼っていれば、それだけウェブページの読み込みは遅くなります。テキストだけで構成されたページと画像が貼られているページでは、前者の方が読み込み時間が短く済むことは分かりますよね。
通常、画像の読み込みはウェブページにアクセスした直後に行われます。この時、読み込みが行われているのは最初の画面に表示される画像だけではなく、記事をずっとスクロールしていった先の画像まで読み込みが行われます。この読み込みの仕様によって、画像が多いウェブページでは、読み込み速度が遅くなってしまうことがまず１つ目の欠点でした。
さらに、テキストと画像ではテキストの方が表示される速度が早いため、読み込みが終わるのを待ちきれずに画面下へスクロールしていくと、後から画像が読み込まれる影響で、画面の表示箇所がズレてしまうことがあります。当然、ユーザーはイライラしてしまいますので、これが２つ目の欠点でした。
こんなイメージ↓
これら２つの欠点が、今回の機能実装で解消できるようになりました！
画面にズレが生じないようになる理由と方法は？
画面のズレ問題を解消する手段は以前より存在していましたが、少し前のはてなブログでは使うことができませんでした。それが６月の機能追加で使えるようになったわけです。
解消する方法は実に簡単です。loading="lazy"というHTMLコードを追加して、widthとheightで画像の幅×高さを指定してあげるだけです。
人間にも分かりやすい表現に置き換えると、「先に画像を表示するスペースを取っておいて、画面がスクロールしていった時に画像を読み込む」ようにすると言うことです。
こんなイメージ↓
画像の遅延読み込みによって、アクセス直後の読み込み負荷は減少しますし、画面のズレも生じないという一挙両得な対応方法です。
このような画像の表示による画面のズレを無くす方法は、普段の編集モードによって異なります。
編集モードが「見たまま」の場合
編集モードが見たままの場合には、以下の２パターンが対応方法になります。
①以下のHTMLコードを<img src>タグの中に追加します。
loading="lazy"：画像の遅延読み込みwidth="800"：数字は適当な画像の幅height="420"：数字は適当な画像の高さ
②または、同じ画像を再度貼り直すことで上記HTMLコードが自動で追加されます。
編集モードが「はてな記法」か「Markdown」の場合
記事を更新するだけで自動的に適用されます。簡単で羨ましいです。
なぜ記事を修正するチャンスなのか？
Googleが示しているウェブページの評価基準の一つに「ページの表示速度」があります。これは、「ページの読み込みが遅いとユーザーが離脱（ブラウザバック）してしまうので、改善した方がいいですよ。」と言っているのです。
つまり、画像がズレてしまう問題を解消することが、SEO対策になります。
記事を更新するだけなら大した手間ではありませんが、画像を貼り付け直すとなると、結構大がかりな作業になります。
せっかく手間暇かけてSEO対策やユーザビリティの改善作業などを行うのですから、このタイミングで思いつく限りの記事修正も同時にやってしまった方がスッキリできると思います。
例えばタイトルを練り直したり、記事内の文章やキーワードを推敲したり、ですね。
ブログの表示順位を上げるのは簡単なことではないので、この作業で上昇するのであれば御の字と考えましょう。
また、今回のようなはてなブログの機能に関する通知を受け取るために、はてなブログの読者になっておくと良いと思います。情報弱者を脱しましょう！
（実は私もはてなブログの読者登録をしていませんでした…気付かなかったんや…）
以上で当記事は終了となります。お疲れさまでした！
今からブログを始めたい、ブログを始めたけど悩んでいる、そんな人たちの参考になるような記事を執筆している志賀雷太がお送りいたしました。
また別の記事でお会いしましょう！
