【WordPress】Chromeでの画像の歪みの原因と対策
ハロハロー！えひめのMiho（＠ehimemiho）です。
未経験からHTML&CSSとPHPを学び、自作したWordPressテーマで当ブログを始めて6年になります。
デザイン的にも機能的にも不具合なく運営できていますが、昨年秋頃から一つ気になることがありました。
それは、記事下の画像が歪むことについてです。
先日、テーマファイルを編集して画像の問題を解決できたので、その対処法を書き残します。
目次
現象：画像の歪み
今回の問題は、記事の後ろに設置していた「①関連記事」と「②前・後の記事」のサムネイル画像で起きていました。
＊①、②ともプラグインは使わずコードを自作して表示させていたものです。
⒈サムネイル画像の巨大化と圧縮化
ブログ記事の後に二箇所表示させていた画像が、巨大化もしくは圧縮化していました。
①「関連記事」の画像が巨大化し、規定の幅から大きくはみ出している
②「前の記事・次の記事」の画像が圧縮され、縦に細長くなっている（「関連記事」の下）
上の写真で、
①特大に引き伸ばされている画像が「関連記事」
②さらに下の細く左に寄った画像が「前の記事・次の記事」
＊ブログ記事は「関連記事」の上に正常に表示されています
この歪みは、主にパソコンを中心に機種によってはスマホでも生じていました。
私のiPhone 13では正常に表示されていたため気づくのが遅れました。
⒉参考：正常な画像表示
正常な画像表示は以下です（iPhone 13での見え方）。
関連記事（歪みなし）
サムネイル画像とタイトルが整然と並びます。
前の記事・次の記事（歪みなし）
小さめのサムネイルで、シンプルなデザインに設定していました。
画像歪み（巨大化・圧縮）の原因
ChatGPTを使って調べる
Chrome検証画面で問題画像を見ると、以下のコードを打ち消すと改善されることがわかりました。
img:is([sizes="auto" i], [sizes^="auto," i]) {
contain-intrinsic-size: 3000px 1500px;
}「自分が書いたコードではない、おかしいな？」と思いChatGPTを使って調べた結果、原因は以下と分かりました。
原因
①Chromeの仕様変更が原因の可能性が高い（2023年9月〜10月ごろ、Chrome 117 以降）
②img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px; } というスタイルは、Chromeが内部的に自動で付け加えているユーザーエージェントスタイル
③このスタイルは、画像の遅延読み込み（lazy-loading）中にレイアウトジャンプを防ぐために導入されたが、HTMLの <img sizes="auto"> に対して勝手に追加されるため意図せず画像が大きくなることがある
④特に sizes="auto" や sizes^="auto," のように、開発者が「サイズ未定義 or 不明確」として記述している画像が対象となる
⑤圧縮に関しては、CSSで指定したサイズとWordPressが自動生成したサムネイルの縦横比が違う画像が強引に表示されているのかも
＊ユーザーエージェント スタイルシートは、ブラウザ側がWebページを見やすくするために勝手につけているスタイル指定のこと。
対処法
ChatGPTは詳しく対処法（Chromeのスタイルを無効化するなど）を教えてくれましたが、プログラミング（PHP）に詳しくないためテーマファイルの編集を最小限にすることを優先しました。
その結果、
・「関連記事」はプラグインを使って表示させる（導入済みの「Jetpack」）
・「前の記事・次の記事」の表示はやめる
を決め、下記を実施しました。
まず、single.php の中で related-entries.php を読み込んでいる箇所を無効化（削除 or コメントアウト）します。
理由は、related-entries.php を削除するだけでは不十分でテーマがそれを呼び出そうとしてエラーになる可能性があるからです。
具体的には、下記のsingle.phpから該当部分を削除しました。細かくコメントを残しておいたので、コードを探しやすくて助かりました。
<!-- 関連記事 -->
<div id="related-entries">
<h4>関連記事</h4>
<?php include( TEMPLATEPATH . '/related-entries.php' ); ?>
</div>
<!--前の記事、次の記事-->
<?php
$prevPost = get_adjacent_post(true, '', true); // get previous articles
$nextPost = get_adjacent_post(true, '', false); // get next articles
$prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(80,80) ); // get previous article samnails
$nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(80,80) ); // get next articles samnails
if( $prevPost || $nextPost ){ // if previous or next articles are existing,
echo '<div class="prev-next-link">';
previous_post_link( '%link', '<p class="prev-next-label">＜＜ 前の記事</p><div class="thumb-wrap">'.$prevThumbnail.'<p>%title</p></div>', true );
next_post_link( '%link', '<p class="prev-next-label next-label">次の記事 ＞＞</p><div class="thumb-wrap second-wrap">'.$nextThumbnail.'<p>%title</p></div>', true );
echo '</div>';
} ?><!--/前の記事、次の記事-->次に、使わなくなったrelated-entries.php を削除します。
＊念のため完全には削除せず、パソコン上にバックアップとして残しました。
③プラグイン「Jetpack」で関連記事を設定
ChatGPTで調べていくと、元々導入している「Jetpack（契約は「パーソナル」）でも関連記事を表示できることがわかりました。
Jetpackは、関連記事表示のデザインや順番といったカスタマイズ性の低さがデメリットです。
でもサーバー負担がほぼゼロで設定も超簡単というメリットは大きく感じました。
なので、保守管理の面でプラグインの数はできるだけ少なくしたいこともあり「Jetpack」を採用しました。
結果
見にくかった記事の後ろがスッキリときれいに収まりました♪
数年ぶりのテーマファイルの編集はとても緊張しましたが、ChatGPTが無料で分かりやすくナビゲートしてくれたおかげで修正までたどり着けました。
これからも、このブログを大切に育てていきたいです。
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
ご感想やご質問をお待ちしています♪
少しお待たせするかもしれませんが、必ずお返事します。
