画像の縦幅がわからず文字の位置がズレる問題を解消した話

当ブログの感想記事は大体以下のような構成になっています。

  1. タイトル画面のスクリーンショット
  2. 感想本文

まず最初に1のスクリーンショットがあります。これについて少し前にGoogle先生に怒られたので、変更しました。

ホームページ上に画像を掲載するには、HTMLに以下のように記述します。
<img src="画像のURL" />
意味は「ここにこの画像を表示してね」。まぁ見たまんまですね。

これはタイトル画面のスクリーンショットです。<br />
<img src="title.jpg" /><br />
ボタンが並んでいます。

こんなHTMLファイルをウェブブラウザは「1行目の文章を表示して、改行して、title.jpgを表示して、改行して、3行目の文章を表示する」と解釈します。

で、文章はまぁいいんです。HTMLファイルに直接書いてあるんですから、それをべらべら~っと並べて表示すれば済みます。問題はtitle.jpgの方で、画像はサイズという概念がある要素なので、どうにかしてサイズを知る必要があります。知らないと、それ以降の要素をどこに表示したらいいかわかりませんから。

これはタイトル画面のスクリーンショットです。

ボタンが並んでいます。

 かもしれないし

これはタイトル画面のスクリーンショットです。

 

 

ボタンが並んでいます。

かもしれない。それはtitle.jpgをダウンロードしてみないとわかりません。

けどtitle.jpgが実際に存在する保証はありませんし、存在したとしても置いてあるサーバーが遅すぎてなかなかサイズがわからないかもしれません。そこでウェブブラウザはとりあえずで文章だけを並べて表示し、画像はダウンロードを終えてから文章を下に押し出して表示します。言われてみれば、たしかにそんな挙動になってますね。

これはタイトル画面のスクリーンショットです。
ボタンが並んでいます。

 が

これはタイトル画面のスクリーンショットです。


ボタンが並んでいます。

になるんですね。

利用者としては、「何か画像の表示が遅いなぁ~まぁ文字は表示されてるから一応読めるし先に読んじゃうか」と読み始めてしばらくしたところで突然文章が下にズレるので、あまり気持ちよくありません。というご指摘をGoogle先生から頂きました。


ある日突然湧いて出た「改善が必要」との警告に驚いて調べて上記の現象が原因だと判明しました。

<img src="画像のURL" height="縦幅の数値" />
と書けばダウンロードする前からheight分だけ画像表示スペースを確保してその下に続きを表示してくれるので、読んでいる途中で文章がズレる現象を防げるのですが、「サイズはダウンロードが完了すればわかるんだし、それなら文字数を減らした方がデータ量が減って表示待ちを短縮できそうじゃん」と考えて削っていたんですよね…。

現代において数文字分のデータ量なんて砂粒みたいなものなので、それならheightを指定してズレを防いだ方が利用者は快適に利用できるのでしょう。ということでブログの全記事を見直して画像に全てheight指定を付けて回ったのが10月のいつだったか。上図右端で黄色いバーが消えているように、Google先生も「改善が必要なページはもうないね」と判定してくれたみたいです。

 

さて、なぜエロゲブログでこんな話題を取り上げたかというと、エロゲブログをやっている方ではてなブログを利用している方を度々見掛けるためです。エロゲの感想記事は、当ブログの記事と同様に、最初にスクリーンショットなどを配置するのが一般的かと思います。そしてはてなブログで画像を貼り付けたときに自動生成されるHTMLはこんな感じです。
<img src="画像のURL" alt="" title="" class="hatena-fotolife" itemprop="image" />
height指定がないですね…。ということで、ズレると思います。

じゃあ今から大量にある感想記事全てで画像サイズを調べ直してちまちま書き加えていくのか…?というとアレなんですけども。AutoHotkeyである程度自動化した私でも、途中「俺…何やってんだろ…」となりましたし。