「メイド・イン・ヘブン」スキン適用中

Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

記事の画像の縦横比率が勝手に変わってし...
 
共有:
通知
すべてクリア

[クローズ] 記事の画像の縦横比率が勝手に変わってしまう

55 投稿
5 ユーザー
39 Reactions
2,657 表示
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

以下質問ですが、宜しくお願いいたします。

 

 

2023.8.7に投稿した以下の記事ですが、記事の画像の縦横比率が勝手に変わってしまいます。

https://kotakaboki.com/1008/

 

これまで30記事以上投稿してきましたが、過去にこういったことは一度もありませんでした。

(一つ前に投稿したのは2023.7.31ですが、画像の比率は正常でした。)

 

最近Wordpressのバージョンをアップした記憶があり、その影響なのかもしれないとも思っていますが、原因が分かりません。

 

 

【質問】

画像を元の縦横比率のままにしたいのですが、やり方を教えていただけますでしょうか?

 

 

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

 

 

 

-----以下テーマ情報-----

 

サイト名:現役簿記講師コタカの簿記ブログ
サイト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


   
トピックタグ
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

kotakaさん

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

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

そのため、

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

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

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

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

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

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

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

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

X(旧Twitter)で見ると。

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

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


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

ありがとうございます。

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

以下お答えいたします。

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」を選択すると、以前のように画像の縦横比率が元の比率のままにできました。
画像を添付します。

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

kotakaさん

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

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

 
 
投稿者:: @kotaka

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

これは、スマホで閲覧した場合のみ、発生するということでしょうか。


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16654
 

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


   
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

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

 

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

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

 

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

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

 

 

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


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16654
 

投稿者:: @kotaka

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

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


   
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

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

 

画像を添付いたします。

 

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

kotakaさん

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


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

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

 

失礼いたしました。

 

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

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

 

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

 

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

 


   
わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@kotaka さん

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


   
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16654
 

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

 
サイズはブロック指定とは違う?
 
このサイズ指定が、WordPressバージョンアップ前からあったものなのか、それと指定はしていなかったのか、異なる指定だったのか。
 
WordPressバージョンアップ以前は、どういう指定でしたでしょう?
 
今スマホなもので、実際にWordPressを操作できず・・・。あとで少し試してみます。

   
わいひら reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

●原因

「高さ」を指定しているので、以下の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;
}

   
わいひら reacted
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

幅と高さを入力している場合、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,
} }

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


   
わいひら and chu-ya reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

Akira様

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

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

わいひら様

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

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

mk様

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

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

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

kotakaさん

投稿者:: @kotaka

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

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

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

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

【追記】

あ、もうAkiraさんが。


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

chu-ya様

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


   
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

Akira様

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

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

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


   
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

mk2様

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

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

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


   
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

@mk2_mk2 さん

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

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

投稿者:: @chu-ya

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

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

 

>kotakaさん

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

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

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


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

mk2様

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

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

 

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

 

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

 

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

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

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

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

 
 
もしくは、急いでやりましたので、私が何かミスったのかも。
いずれしても、落ち着いて確認した方が良さそうです。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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


   
(@akira)
Famed Member Registered
結合: 6年前
投稿: 1657
 

@kotaka さん

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

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

img[class*="wp-image-"][style*="height\:"] {
  height: auto !important;
}
This post was modified 10か月前 by Akira

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

 

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

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

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

 

 
 
この状態では、3つとも、同じ大きさに見えます。
(3番目は、高さを大きくしたのに)

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

続きまして。

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

 
 
この段階で、インラインのstyle属性が出てきます。
その結果、3番目の画像の高さが、入力したものへと反映されます。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

 
この場合は、アスペクト比は元画像にあわせましたが、高さ指定があります。
そのため、領域的には高くなっているのかなと思います。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

そんな風に見えます。

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

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

【WordPress 6.2.2】

 
【WordPress 6.3】
 
 
WordPress 6.2.2 ⇒ WordPress 6.3の変更点は・・・。
  • 「画像サイズ」⇒「解像度」へ変更
  • 「アスペクト比」追加
  • 「伸縮」追加
  • 「25%・50%・75%・100%」指定削除

 


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

mk2様

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

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

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

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

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


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

Akira様

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

kotakaさん

投稿者:: @kotaka

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

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

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

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

 

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

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

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

 

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

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

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


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

mk2様

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

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

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

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

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

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

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

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


   
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

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

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

 

【HTML】

 
【PC表示】
 
【モバイル表示:画面幅 375px】
 
【モバイル表示:画面幅 445px】
 
 
 
WordPress 6.2.2では、いずれも表示に問題ないように思います。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

その結果が以下です。

【HTML】

 
【PC表示】
 
【モバイル表示:画面幅 375px】
 
【モバイル表示:画面幅 445px】
 
 
WordPress 6.3+空更新で、style属性が出てくるのは同じです。
 
問題は、画像の幅が、画面幅に収まるかどうかだと思います。
 
style属性で幅・高さが指定されてはいるものの、
画面幅に画像が収まらなければ、収まるように幅は縮小する
高さは収まるので、style属性のままの高さが適用される

そんな感じに見えます。
 
「contain」を指定すれば、もちろんアスペクト比は元画像と同じになります。
 
WordPress側の変更が原因だとは思います。
不具合と言えるのかどうか、どう考えたものか・・・。
ただ、縮小などしている画像が、こうやってバージョンアップで変わってしまうのは、やはり厳しいものがありますね。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

 
但し、領域的には高いです。
 
そのため、WordPress 6.2.2の頃と比較すると、上下の間隔が広くなります。
 
【WordPress 6.3+空更新】
 
【WordPress 6.2.2】
 
今回のものは極端に高くないので、分かりづらいとは思いますが。
 
「縮小なし(フルサイズ)」の上下の間隔を比較すると分かり易いかもしれません。
WordPress 6.2.2では、上下とも同じです。
WordPress 6.3では、上の間隔が広いです。(画像の領域の高さ分高くなった)

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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


   
わいひら reacted
(@kotaka)
Eminent Member Registered
結合: 2年前
投稿: 21
Topic starter  

mk2様

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

理解できました。

 

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

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

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


   
わいひら reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16654
 

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

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

This post was modified 10か月前 by わいひら

   
Akira reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16654
 

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;
}
This post was modified 10か月前 by わいひら

   
Akira reacted
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 6年前
投稿: 16654
 

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

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


   
mk2 reacted
chu-ya
(@chu-ya)
Famed Member Registered
結合: 2年前
投稿: 2400
 

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

●対応

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


   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

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

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

 

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

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

 
style属性から、width,heightが消え、aspect-ratioになりました。

   
わいひら reacted
mk2
(@mk2_mk2)
Illustrious Member Moderator
結合: 3年前
投稿: 7208
 

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

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

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

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

 
 
これは、WordPress 6.2.2の時とは、表示が変わってしまいました。
 
ただ、WordPress 6.2.2で反映されないのがおかしかった。
そう考えれば、良い気はしますね。
 
そもそも対処しなくても、WordPress 6.3ではこういう表示になるのですから。
 
そういう意味では、アスペクト比を変えていないのに、勝手に変わってしまう事象は解消されたと言って良いと思います。

   
わいひら reacted
固定ページ 1 / 2
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました