kotakaさん

この事象は、WordPress 6.3にアップデートした方に発生しているという話は、ちらほらと見掛けます。
（X(旧Twitter)では）

おそらく、WordPress側の問題ではないかと思われますが、今のところ正確なことは分かりません。
（私が見掛けた方のサイトは、テーマは「Illustfolio 3」でしたが、事象そのものを確認した訳ではありません）

そのため、

• どうすれば良いのか
• なぜ起こるのか

 
そういったことは、現状まだ分かりません。
これから調べていくしかない状態です。

初めて、その事象が発生しているサイトを拝見しますので、調査などご協力をいただきたく思います。

そこで、以下のご協力をまずお願いします。

1. 環境情報をすべて貼り付けてください
   現状途中で切れています

   何が原因で起きているか分かりませんので、できるだけ詳しい情報が欲しいです
    

2. ブロックエディタをご利用ということで、お間違いないでしょうか
   環境情報が途中で切れているため、こちらからは確認できません
    
3. ご提示いただいた投稿の、全ての画像で発生しているのでしょうか
   それとも、一部の画像でしょうか
   一部の画像であった場合、具体的にどの画像でしょうか
    
   また、画像が以前とどう違うのでしょうか
   （外部の者は、以前の状態が分かりません）
    
4. 比率が変わった画像は、エディタを開くと、どういう状態なのでしょうか
   ブロックエディタであれば、画像ブロックはどういう状態でしょうか

 
他にもご協力をいただかないと分からないかもしれませんが、今思いつくのは以上です。

とりあえず、私のテスト環境（ローカル）のものを確認してみましたが、同事象は発生していないようです。

画像を貼り付けてある投稿の数も少なくて、発生する条件を満たしていないのかもしれないです。

発生しているサイトで確認していくしかなさそうです。

X(旧Twitter)で見ると。

「投稿をリライトしたら、画像が全部カスタムサイズに変更された」というものがあるみたいです。
テーマは「JIN」みたいでした。

あまり有益な情報は見つからないため、調査等はしていないのですけれど・・・。
（時間がありませんので、一旦離脱します。ご提示もないみたいですし、自分の作業をします、その後晩御飯も）

ありがとうございます。

お返事遅くなり申し訳ございません。

以下お答えいたします。

1．環境情報をすべて貼り付けてください
現状途中で切れています
何が原因で起きているか分かりませんので、できるだけ詳しい情報が欲しいです

⇒環境情報というのは以下のもので大丈夫でしょうか。

----------------------------------------------
サイト名：現役簿記講師コタカの簿記ブログ
サイトURL： https://kotakaboki.com
ホームURL： https://kotakaboki.com
コンテンツURL：/wp-content
インクルードURL：/wp-includes/
テンプレートURL：/wp-content/themes/cocoon-master
スタイルシートURL：/wp-content/themes/cocoon-child-master
親テーマスタイル：/wp-content/themes/cocoon-master/style.css
子テーマスタイル：/wp-content/themes/cocoon-child-master/style.css
WordPressバージョン：6.3
PHPバージョン：7.4.33
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/115.0.0.0 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/1.1
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4
カテゴリー数：6
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：1.1.3
style.cssサイズ：845バイト
functions.phpサイズ：203バイト
----------------------------------------------
Gutenberg：1
AMP：0
PWA：0
Font Awesome：4
Auto Post Thumbnail：0
Retina：0
ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg
----------------------------------------------
ブラウザキャッシュ有効化：0
HTML縮小化：0
CSS縮小化：0
JavaScript縮小化：0
Lazy Load：0
----------------------------------------------
利用中のプラグイン：
Contact Form 7 5.8
EWWW Image Optimizer 7.2.0
Site Kit by Google 1.106.0
WP Multibyte Patch 2.9
XML Sitemap Generator for Google 4.1.13
----------------------------------------------

2．ブロックエディタをご利用ということで、お間違いないでしょうか
環境情報が途中で切れているため、こちらからは確認できません

⇒Wordpressの知識が乏しいため、
ブロックエディタなのか否かの判断ができません。
大変申し訳ございません。

3．ご提示いただいた投稿の、全ての画像で発生しているのでしょうか
それとも、一部の画像でしょうか
一部の画像であった場合、具体的にどの画像でしょうか

また、画像が以前とどう違うのでしょうか
（外部の者は、以前の状態が分かりません）

⇒全ての画像で発生しております。

また、以前との違いは次の通りです。

【以前の状態】
大きめの画像を挿入した際に、それをスマホで閲覧すると、縦横の比率は変わらずに、そのままの形で縮小されて表示された。

【今の状態】
大きめの画像を挿入した際に、それをスマホで閲覧すると、横幅だけが縮まってしまい(つぶれてしまい)、その結果、元の画像よりも縦長の形になってしまった。

4．比率が変わった画像は、エディタを開くと、どういう状態なのでしょうか
ブロックエディタであれば、画像ブロックはどういう状態でしょうか

⇒エディタとは編集画面のことでしょうか？
もしそうであれば、エディタの状態は以前と変わりないように見えます。

なお、画像の設定の「伸縮」のところで「contain」を選択すると、以前のように画像の縦横比率が元の比率のままにできました。
画像を添付します。

(「伸縮」のところをどちらも選択しないと、縦横比率が変わってしまうみたいです)

以上、宜しくお願いいたします。

kotakaさん

申し訳ないですが、今スマホしかないもので、短めのお返事しかできません。

すべての画像とのことですが、私からは以下のように見えているのですが、これも比率が変わっているということでしょうか。（入金伝票です）

僕もパソコンで該当ページを見てみましたが、第三者の目からしては特に縦横比率がおかしいようには見えないようです。
この状態がおかしいということでしょうか？

伝わりづらい文章で申し訳ありません。

画像の設定の「伸縮」のところで「contain」を選択して更新したら、以前のように画像の縦横比率が元の比率のままにできました。

(「伸縮」のところをどちらも選択しないと、縦横比率が変わってしまうみたいです)

よって、今現在は画像は正常に表示されています。

ｍｋ２様及びわいひら様が添付してくださった画像は正常です。

以前は、画像の設定の「伸縮」で何も選択しなくても問題無かったのですが、現在は「伸縮」のところで「contain」を選択しないと画像の縦横比率が変わってしまうみたいなのです。

投稿者:: @kotaka

↑

以前は、画像の設定の「伸縮」で何も選択しなくても問題無かったのですが、現在は「伸縮」のところで「contain」を選択しないと画像の縦横比率が変わってしまうみたいなのです。

よろしければ今後の参考のため、この状態のスクリーンショットを貼っていただくことは可能でしょうか。
とはいえCocoon関係の変更でそこに変化が出るようなことはやっていないと思います。
ですのでWordPressの仕様変更か不具合なのかもしれません。
ただ仕様変更だとkotakaさんや、旧Twitterで書き込まれている方のように困る人がたくさんおられるので不具合なのかもしれませんね。
不具合だったらそのうち修正されると思います。

お返事ありがとうございます。

画像を添付いたします。

宜しくお願いいたします。

kotakaさん

「contain」に変更しなかった場合、画像はどんな状態なのかということだと思います。

返信ありがとうございます。

失礼いたしました。

・「contain」を選択した場合の画像(上)

・「contain」を何も選択しなかった場合の画像(下)

を並べたスクショを添付いたします。

宜しくお願いいたします。

@kotaka さん

「幅」と「高さ」を入力されているためではありませんか？

ありがとうございます！
確かにこれだけ違うといつも見られている人にとっては全然違って見えますね。
僕も同じ画像を使って確認してみます。

ブロックで指定したものが、インラインで入っていますね。

●原因

「高さ」を指定しているので、以下のheigh:autoが効かなくなり。
伸縮でcontainを指定したので、画像幅がおさまり。

図は、試しにcontatinのチェックを外しています。

※画像ブロックをつまんで、縮小すると、「幅」「高さ」が設定され。ただ伸縮は未設定になり。

dist/block-library/style.min.css

.wp-block-image img {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  vertical-align: bottom;
}

幅と高さを入力している場合、style 属性を追加するように変更されています。

https://github.com/WordPress/gutenberg/commit/1c3c161382e7bb157778f0d50d885324953ec076

style={ {
	width:
		( width && height ) || aspectRatio ? '100%' : 'inherit',
	height:
		( width && height ) || aspectRatio ? '100%' : 'inherit',
	objectFit: scale,
	...borderProps.style,
} }

そのため、幅と高さを入力しないか、入力する場合は「伸縮」も同時に指定する必要がある気がします。

Akira様

回答ありがとうございます。

以前も「幅」と「高さ」は入力された状態で投稿していたと思いますが、スマホで見た時に画像の比率が変更されてしまうのは今回が初めてなのです。

わいひら様

回答ありがとうございます。

僕のほうも何か分かり次第追加のコメントをいたします。

mk様

回答ありがとうございます。

サイズはブロック指定とは違う？

⇒元の画像サイズと指定のサイズは違います。
元のサイズだとパソコンで見るには大きすぎるので、手動で少し小さくしています。

このサイズ指定が、WordPressバージョンアップ前からあったものなのか、それと指定はしていなかったのか、異なる指定だったのか。
WordPressバージョンアップ以前は、どういう指定でしたでしょう？

⇒以前から画像設定方法は何も変えていません。
以前から、数値を手入力するのではなく、手動で(左クリックしたままマウスを動かして)画像の大きさを指定していました。

mk様、何度も回答していただき本当にありがとうございます。

kotakaさん

投稿者:: @kotaka

↑

以前から、数値を手入力するのではなく、手動で(左クリックしたままマウスを動かして)画像の大きさを指定していました。

パーセント指定ではなく、画像自体をドラッグしてという感じでしょうか。

今、WordPressを触れませんが、後で試してみます。

以前のバージョンは、6.2.2でしょうか。

【追記】

あ、もうAkiraさんが。

chu-ya様

回答ありがとうございます。

Akira様

回答ありがとうございます。

やはり最近のバージョンアップが原因ということなのですね。

今後はもし画像の幅と高さを指定するなら、必ず「伸縮」で「contain」を選択しないと、縦横比率が変わったしまうということですね。

ｍｋ２様

回答ありがとうございます。

パーセント指定ではなく、画像自体をドラッグしてという感じでしょうか。
⇒その通りです。

以前のバージョンは、6.2.2でしょうか。
⇒以前のバージョンは覚えておりません。申し訳ございません。
ただ、常に最新に更新をするようにしていましたので、現在のバージョンの一つ前のものだったと思われます。

@mk2_mk2 さん

WordPress6.3以前は画像のインラインスタイルはなく、width、heightは付かなかったのでは？

画像ブロックをつまんで、画像拡縮すると、幅、高さのフォームに値は反映され。
ただ、先に添付したように伸縮（cover、contain）が選択されない場合があり。

投稿者:: @chu-ya

↑

WordPress6.3以前は画像のインラインスタイルはなく、width、heightは付かなかったのでは？

おそらく、そうだったと思います。
インラインはなかったと思います。
LazyLoadの関係で、imgタグにwidth,heightがあっただけではなかったかと思います。

>kotakaさん

すみません、今あまり時間がとれませんので、確認は明日になってしまうかもしれません。

WordPressの仕様が変わったのだと思いますが、バージョンアップしただけで、画像のアスペクト比が変わってしまうのはいただけないですねぇ。

バージョンアップしたことで、どういうケースが比率が変わるのか、確認はしておきたいと思います。
（何だかばたばたしているもので・・・やはり明日以降になってしまうかと）

ｍｋ２様

回答ありがとうございます。

毎度本当に助かっております。

僕のような素人にとって、専門知識を持った皆さまからの回答は本当に心強い限りです。

この質問はしばらく【解決済】にはせず、僕も何か気付いたことがあれば再度コメントいたします。

回答してくださった皆様には深く感謝いたします。

取り急ぎ、今確認したものだけ。

画像は、kotakaさんのサイトからお借りしました。

①WordPress 6.2.2で、画像ブロックで投稿内に挿入
②画像を編集画面内で、ドラッグして縮小
③投稿を公開
④WordPress 6.3へアップデート

上記の手順では、インラインスタイルが出てこず、画像の比率も変わりませんでした。
他に何か必要なのかも・・・。

今日はもう時間が無さそうですので、明日じっくり試してみようかと思います。

以下は、上記①～④をしたものです

あとで、幅と高さを入力して試してみます。

@kotaka さん

kotaka さんの運用方法の場合、過去記事を編集する際にも全ての画像で「伸縮」の「contain」を選択する必要があるかもしれません。これは面倒だと思いますので、CSS で解決するのがいいように思えます。

子テーマの style.css に以下の CSS をお書きになれば、「contain」を選ばずとも WordPress のバージョンアップ前と同じ表示になります。

img[class*="wp-image-"][style*="height\:"] {
  height: auto !important;
}

長くなりますので、いくつかに返信を分けます。

画像は、kotakaさんのサイトからお借りしたものです。

元々は、532px × 218pxのものです。

WordPress 6.2.2で、以下のように、3つ配置しました。

上から以下のように3つの画像を配置しました。

• ドラッグして縮小したもの（280px × 115px）
   
• 幅と高さを入力したもの
  ドラッグして縮小したものにあわせるため、「280px × 115px」を入力しました
   
• 高さを大きくしたもの
  幅と高さを入力しましたが、「280px × 180px」としました

上の返信のものを、WordPress 6.3へとバージョンアップしました。

この段階では、表示に変化ありません。

続きまして。

WordPress 6.3アップデート後に、投稿を「空更新」します。
（投稿をエディタで開いて、何も変更せずに「更新」ボタンを押しました）

編集画面を開いて、3番目の画像の「伸縮」に、「contain」を指定し更新します。

こうやってみると・・・。

WordPress 6.2.2で、入力した高さが、実は反映されていなかった。
それを、WordPress 6.3では、反映されるようにした。

そんな風に見えます。

そして、WordPress 6.3にアップデートしただけでは、反映されないようです。
投稿の再編集（最低でも空更新）がなければ、反映はされないように見えます。

あくまでも、上記のように試した範囲では・・・ですけれど。

ちなみに、各バージョンの画像ブロックの「設定」です。

【WordPress 6.2.2】

• 「画像サイズ」⇒「解像度」へ変更
• 「アスペクト比」追加
• 「伸縮」追加
• 「25%・50%・75%・100%」指定削除

ｍｋ２様

検証していただきありがとうございます。

非常に分かりやすかったです。

過去記事の画像は現時点で問題なくても、今後更新をしたら縦横比率が変わってしまうということですね。

Akira様が教えて下さった対処法をやってみます。

本当にありがとうござました。

Akira様

ご教示ありがとうございます。

教えて下さった通り、子テーマのstyle.cssの記述をしてみました。

一番下に記述しましたが、これで合っているでしょうか？
(画像添付いたします)

kotakaさん

投稿者:: @kotaka

↑

過去記事の画像は現時点で問題なくても、今後更新をしたら縦横比率が変わってしまうということですね。

いえ、私の検証では、アスペクト比を元画像から変更している場合に、影響が出ています。

そして、投稿を再編集した時に影響があるようです。

（変更していない場合は、WordPress 6.3にアップデートしても、問題ない。私の添付画像の上2つのケースがそうです）

ただ、kotakaさんの場合、アスペクト比は元画像と同じなのではないか・・・という気がして、私の検証では、完全に再現できていないかもしれないと、少し思っています。（ここが私の勘違い？）

今、スマホなもので、確認ができないのですけれど。

後程時間がとれて、PCを使えるようになったら、確認してみます。

ちなみに、モバイルだけなど条件はありますか。

再現に、他にどういう条件が必要か、なかなか思い浮かばすにいます。

対処は、Akiraさんご提示の方法でできると思いますので、あまり気にしなくても良いのかもしれないですけれど。

ｍｋ２様

お返事ありがとうございます。

そうですね、基本的に画像を挿入するときはサイズを手動で(マウスでドラッグして)変更しています。

画像をその形(比率)のまま縮小しているということです。

『ちなみに、モバイルだけなど条件はありますか。』

⇒はい、パソコン画面で閲覧すると、画像は正常でしたが、スマホで閲覧したときだけ、画像の縦横比率が変わってしまっていました。

ですが、先ほどAkira様の言ってくれた通りに子テーマのstyle.cssを記述をしたところ、

・今日(2023.8.11)再編集をして更新をした
・「contain」を選んでいない(何も選択していない)

という記事について、モバイルで閲覧しても画像が正しい表示になっています。

先とは少し違うケースを試しました。

同じ画像を使用しました。
532px × 218px の画像です。

WordPress 6.2.2で、ドラッグして縮小をしました。

モバイルの画面幅より大きくしたかったので、幅を410pxに調整しました。
その結果、410px × 171px のサイズになりました。

比較のために、下には縮小していないフルサイズの画像も貼ってあります。

【HTML】

続いて、WordPress 6.3へアップデートしました。

それだけでは表示は変わらないのは、先のものと同様でした。

そこで、投稿を空更新しました。

その結果が以下です。

【HTML】

ちなみに上記の【モバイル表示：画面幅 375px】のものも、編集画面で「contain」を指定すれば、アスペクト比は元画像と同じにはなります。

やはり分かりにくいので、2つの画像を重ねてみました。

ｍｋ２様

何度も検証していただきありがとうございます。

理解できました。

皆様のおかげで本当に助かりました。

ありがとうございました。

いえ、とりあえずどんなパターンがあるのか、ある程度分かりました。
再現もできましたし。

結果的に、幅・高さを入力した場合、エディタ画面での変更では完全にWordPress 6.2.2と同等にするのは難しく、CSSで対応するしかないことも分かりましたし。

何かあれば、長いけれど、このトピックを見てくださいという風にすることもできるのかと思います。

ただ、こういう変更は厳しいなぁと思います。
時々、WordPressってありますよね。

mk2さん、詳しい検証ありがとうございます。
マウスで画像サイズを変更している方にこういった問題が出るのはちょっと厳しいですね。

ワードプレスリポジトリなどを確認してみたところSWELLの作者の了さんによってプルリクエストが出されていますね。
https://github.com/WordPress/gutenberg/pull/53598
Gutenbergに詳細なissueも出されています。
https://github.com/WordPress/gutenberg/issues/53555
プルリクが通れば次のバージョンで直りそうな感じですね。

issueに書かれていましたが、子テーマのfunction.phpに以下のコードを追加すると要素のstyle属性にaspect-ratioが指定されて改善されるっぽい。

add_filter( 'render_block_core/image', __NAMESPACE__ . '\fix_img_v63', 10, 2 );
function fix_img_v63( $block_content, $block ) {
	$attrs = $block['attrs'] ?? [];
	$w = $attrs['width'] ?? '';
	$h = $attrs['height'] ?? '';
	if ( $w && $h ) {
		$size_style    = "width:{$w}px;height:{$h}px";
		$ratio         = "{$w}/{$h}";
		$block_content = str_replace( $size_style, "aspect-ratio:{$ratio}", $block_content );
	}
	return $block_content;
}

Cocoonにも上記コードを使用して対応させてみました。
kotakaさん、mk2さんの環境でも改善されますでしょうか？
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。

WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------

----------------------------------------------
テーマ名：Cocoon
バージョン：2.6.4.4
カテゴリー数：19
タグ数：149
ユーザー数：1
----------------------------------------------

●対応

インラインstyleからwidth、heightを削除。
代わりに、aspect-ratioを追加し、縦横比を保持するように。
問題ないように思えます。

ご対応いただきありがとうございます。

どう考えるか・・・なところはありますけれど。

先に、スッキリした方から。

以下に書いた、モバイルの画面幅よりも、画像の幅が広いために起こる問題ですね。

https://wp-cocoon.com/community/postid/72965/

それは、解消されました。
（WordPress 6.2.2と同様の表示になりました）

以下が、そのキャプチャ画像です。

もう1点は、以下に書いたものです。

https://wp-cocoon.com/community/postid/72953/

元画像のアスペクト比よりも、高さを高くしていたけれど、WordPress 6.2.2では、元画像のアスペクト比のままだった件です。
 

以下は、今回の対応後の表示です。