画像が表示されないページを修正。仕様の異なる旧ブログシステムの修正は今も続く・・・！
当ブログは、HTMLベタ打ちから始まり、SB→Serene Bachを経て2013年頃よりWordpressを使用しています。その間レンタルサーバーの移行もいくつか経験し、現在は有料サーバーのmixhostでのWordpress運用で落ち着いています。
https://hermitcrab.mixh.jp/category/＠管理者/ブログ運営関係のネタは＠管理者というタグでまとめています。
サーバー移行では旧サーバーのデータをすべて新サーバーにコピーするという面倒くさい作業が必要となりますが、もっと苦労したのはSerene BachからWordpressへの移行時でした。
https://hermitcrab.mixh.jp/wp-now-available/ブログシステム自体が変わりますので、データコピーのほかに記事データやディレクトリ構成をWordpress仕様へ整形しなければなりません。基本的にはツールを使って自動処理で行きますけど、それだけではうまくいかない部分もあります。新旧ブログを全てにおいて同一に保つのは作業量的にも現実的ではないので、全体の構成を維持することを優先し、優先度の低い部分は走りながら調整、と割り切って作業しました。
で、ときどき不具合を見つけては調整する、という作業を繰り返しているわけですが、最初の画像のようにところどころサムネイル画像が表示されない記事があります。
なにが起きているのか
画像が表示されず、自動で設定されているalt属性（IMG_7090）が表示されてしまっています。典型的なリンク切れですが、alt属性をクリックすると、正しい画像が表示されるのです。つまり、以下のような状態です。
①画像データは存在しクリックして表示される・・・<a>タグで指定する画像のアドレスは正しく記述されている
②記事内のサムネ画像が表示されない・・・<img src>タグで指定する画像のアドレスが間違っている、もしくは記述ミス
WordPressのコードエディターで見てみましょう。
古いバージョンのWordpressの記事なのでブロック構造の記事構成ではないですがそれはさておき、タグ内に画像アドレスが記述されています。このディレクトリに画像が存在し、Wordpressに認識されているか、チェックしてみました。
ターゲットの画像は存在しました。まあリンククリックで表示されるのでデータが存在するのは当然なのですが、ではどうして記事内に表示されないのでしょう・・・？
もういちどコードエディターをチェックしてみると・・・分かりました！リンク先はIMG_7090.jpgというファイル名になっていますが、記事内で表示させる画像がIMG_7090-300×225.jpgというファイル名になっています。小生のWordpressシステムには前者のみで後者は存在しないため、記事内画像がリンク切れになっていた、というのが結論でした。
コードエディターで修正する
画像ファイル名を正しく修正し、ついでにサイズ指定（width="300″ height="225″）も削除しました。
画像が正しく表示されました！サイズ指定も解除したので画面いっぱいにサムネ画像が表示され、良い感じ。
ちなみにその下の画像はまだ修正していないため、リンク切れのままです^^;
どうしてこうなったのか、覚えているうちに書いておく
ここからは記憶を頼りに、今回のことに関して書いておきます。
記事表示画像ファイル名が IMG_7090-300×225.jpg となっていることを先に書きました。小生が用意した画像は IMG_7090.jpg だけなのに、謎のサイズ指定画像が作られていた、というわけです。
この記事は2015年7月に執筆していますので、すでにWordpressに移行したあとの記事です。確か当時は、アップロードした画像1つに対して、サムネイル用に複数のサイズの画像を自動で生成する機能があったような気がします。
そしてその後、サーバー移行する際に、この機能によって大量に生成された画像に苦労させられました（笑）なんたって、1つの画像に対して3個くらいのサイズ違い画像があるわけですから、画像を100個アップしたつもりでも、実際にサーバーには400個くらいの画像があることになります。データが多くなればなるほど、サーバーを圧迫しますし、データのエクスポート／インポート時のエラーが起こる確率も高くなります。
というわけで、サーバーを移行する何処かのタイミングで、このように派生した画像ファイルを問答無用に削除したことを思い出しました（笑）
ネットの歴史から鑑みるに、今ほど高速モバイル回線が当たり前ではなかった頃、そして携帯端末用に動作の軽いウェブサイトが作られていた頃は、大サイズの画像をダウンロードするより適切なサイズの画像を用意していた方がユーザーフレンドリーとされていました。またサーバー側も、サイズの小さな画像を用意していた方が負荷も減りメリットだったことでしょう。
そして今では、高速回線とともに端末の高性能化により、端末の画面サイズに合わせて自動的に表示コンテンツを調節するレスポンシブデザインが当たり前となりました。そのため、小さな画像を用意する必要もなくなってきた、ということなのでしょう。
今回の顛末で、はからずもインターネットの成熟の歴史を思い出しました。
ちなみに今回修正したのはこの記事です。工具好き(*˘︶˘*).｡.:*♡