サイト内検索
Cocoonフォーラム
![](https://wp-cocoon.com/wp-content/themes/cocoon-master/screenshot.jpg)
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年8月10日 15:10
以下質問ですが、宜しくお願いいたします。
2023.8.7に投稿した以下の記事ですが、記事の画像の縦横比率が勝手に変わってしまいます。
これまで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
2023年8月10日 17:16
kotakaさん
この事象は、WordPress 6.3にアップデートした方に発生しているという話は、ちらほらと見掛けます。
(X(旧Twitter)では)
おそらく、WordPress側の問題ではないかと思われますが、今のところ正確なことは分かりません。
(私が見掛けた方のサイトは、テーマは「Illustfolio 3」でしたが、事象そのものを確認した訳ではありません)
そのため、
- どうすれば良いのか
- なぜ起こるのか
そういったことは、現状まだ分かりません。
これから調べていくしかない状態です。
初めて、その事象が発生しているサイトを拝見しますので、調査などご協力をいただきたく思います。
そこで、以下のご協力をまずお願いします。
- 環境情報をすべて貼り付けてください
現状途中で切れています何が原因で起きているか分かりませんので、できるだけ詳しい情報が欲しいです
- ブロックエディタをご利用ということで、お間違いないでしょうか
環境情報が途中で切れているため、こちらからは確認できません
- ご提示いただいた投稿の、全ての画像で発生しているのでしょうか
それとも、一部の画像でしょうか
一部の画像であった場合、具体的にどの画像でしょうか
また、画像が以前とどう違うのでしょうか
(外部の者は、以前の状態が分かりません)
- 比率が変わった画像は、エディタを開くと、どういう状態なのでしょうか
ブロックエディタであれば、画像ブロックはどういう状態でしょうか
他にもご協力をいただかないと分からないかもしれませんが、今思いつくのは以上です。
わいひら reacted
2023年8月10日 18:14
とりあえず、私のテスト環境(ローカル)のものを確認してみましたが、同事象は発生していないようです。
画像を貼り付けてある投稿の数も少なくて、発生する条件を満たしていないのかもしれないです。
発生しているサイトで確認していくしかなさそうです。
わいひら reacted
2023年8月10日 18:35
X(旧Twitter)で見ると。
「投稿をリライトしたら、画像が全部カスタムサイズに変更された」というものがあるみたいです。
テーマは「JIN」みたいでした。
あまり有益な情報は見つからないため、調査等はしていないのですけれど・・・。
(時間がありませんので、一旦離脱します。ご提示もないみたいですし、自分の作業をします、その後晩御飯も)
わいひら reacted
Topic starter
2023年8月10日 19:55
ありがとうございます。
お返事遅くなり申し訳ございません。
以下お答えいたします。
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」を選択すると、以前のように画像の縦横比率が元の比率のままにできました。
画像を添付します。
(「伸縮」のところをどちらも選択しないと、縦横比率が変わってしまうみたいです)
以上、宜しくお願いいたします。
Topic starter
2023年8月10日 20:28
伝わりづらい文章で申し訳ありません。
画像の設定の「伸縮」のところで「contain」を選択して更新したら、以前のように画像の縦横比率が元の比率のままにできました。
(「伸縮」のところをどちらも選択しないと、縦横比率が変わってしまうみたいです)
よって、今現在は画像は正常に表示されています。
mk2様及びわいひら様が添付してくださった画像は正常です。
以前は、画像の設定の「伸縮」で何も選択しなくても問題無かったのですが、現在は「伸縮」のところで「contain」を選択しないと画像の縦横比率が変わってしまうみたいなのです。
わいひら reacted
2023年8月10日 20:34
以前は、画像の設定の「伸縮」で何も選択しなくても問題無かったのですが、現在は「伸縮」のところで「contain」を選択しないと画像の縦横比率が変わってしまうみたいなのです。
よろしければ今後の参考のため、この状態のスクリーンショットを貼っていただくことは可能でしょうか。
とはいえCocoon関係の変更でそこに変化が出るようなことはやっていないと思います。
ですのでWordPressの仕様変更か不具合なのかもしれません。
ただ仕様変更だとkotakaさんや、旧Twitterで書き込まれている方のように困る人がたくさんおられるので不具合なのかもしれませんね。
不具合だったらそのうち修正されると思います。
2023年8月10日 21:01
ありがとうございます!
確かにこれだけ違うといつも見られている人にとっては全然違って見えますね。
僕も同じ画像を使って確認してみます。
2023年8月10日 21:21
幅と高さを入力している場合、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, } }
そのため、幅と高さを入力しないか、入力する場合は「伸縮」も同時に指定する必要がある気がします。
Topic starter
2023年8月10日 21:22
Akira様
回答ありがとうございます。
以前も「幅」と「高さ」は入力された状態で投稿していたと思いますが、スマホで見た時に画像の比率が変更されてしまうのは今回が初めてなのです。
わいひら様
回答ありがとうございます。
僕のほうも何か分かり次第追加のコメントをいたします。
mk様
回答ありがとうございます。
サイズはブロック指定とは違う?
⇒元の画像サイズと指定のサイズは違います。
元のサイズだとパソコンで見るには大きすぎるので、手動で少し小さくしています。
このサイズ指定が、WordPressバージョンアップ前からあったものなのか、それと指定はしていなかったのか、異なる指定だったのか。
WordPressバージョンアップ以前は、どういう指定でしたでしょう?
⇒以前から画像設定方法は何も変えていません。
以前から、数値を手入力するのではなく、手動で(左クリックしたままマウスを動かして)画像の大きさを指定していました。
mk様、何度も回答していただき本当にありがとうございます。
Topic starter
2023年8月10日 21:28
chu-ya様
回答ありがとうございます。
Topic starter
2023年8月10日 21:28
Akira様
回答ありがとうございます。
やはり最近のバージョンアップが原因ということなのですね。
今後はもし画像の幅と高さを指定するなら、必ず「伸縮」で「contain」を選択しないと、縦横比率が変わったしまうということですね。
Topic starter
2023年8月10日 21:34
mk2様
回答ありがとうございます。
パーセント指定ではなく、画像自体をドラッグしてという感じでしょうか。
⇒その通りです。
以前のバージョンは、6.2.2でしょうか。
⇒以前のバージョンは覚えておりません。申し訳ございません。
ただ、常に最新に更新をするようにしていましたので、現在のバージョンの一つ前のものだったと思われます。
2023年8月10日 22:46
WordPress6.3以前は画像のインラインスタイルはなく、width、heightは付かなかったのでは?
おそらく、そうだったと思います。
インラインはなかったと思います。
LazyLoadの関係で、imgタグにwidth,heightがあっただけではなかったかと思います。
>kotakaさん
すみません、今あまり時間がとれませんので、確認は明日になってしまうかもしれません。
WordPressの仕様が変わったのだと思いますが、バージョンアップしただけで、画像のアスペクト比が変わってしまうのはいただけないですねぇ。
バージョンアップしたことで、どういうケースが比率が変わるのか、確認はしておきたいと思います。
(何だかばたばたしているもので・・・やはり明日以降になってしまうかと)
わいひら reacted
Topic starter
2023年8月10日 23:10
mk2様
回答ありがとうございます。
毎度本当に助かっております。
僕のような素人にとって、専門知識を持った皆さまからの回答は本当に心強い限りです。
この質問はしばらく【解決済】にはせず、僕も何か気付いたことがあれば再度コメントいたします。
回答してくださった皆様には深く感謝いたします。
2023年8月11日 00:14
あとで、幅と高さを入力して試してみます。
2023年8月11日 00:17
@kotaka さん
kotaka さんの運用方法の場合、過去記事を編集する際にも全ての画像で「伸縮」の「contain」を選択する必要があるかもしれません。これは面倒だと思いますので、CSS で解決するのがいいように思えます。
子テーマの style.css に以下の CSS をお書きになれば、「contain」を選ばずとも WordPress のバージョンアップ前と同じ表示になります。
img[class*="wp-image-"][style*="height\:"] { height: auto !important; }
This post was modified 1年前 by Akira
わいひら reacted
2023年8月11日 01:14
長くなりますので、いくつかに返信を分けます。
画像は、kotakaさんのサイトからお借りしたものです。
元々は、532px × 218pxのものです。
WordPress 6.2.2で、以下のように、3つ配置しました。
上から以下のように3つの画像を配置しました。
- ドラッグして縮小したもの(280px × 115px)
- 幅と高さを入力したもの
ドラッグして縮小したものにあわせるため、「280px × 115px」を入力しました
- 高さを大きくしたもの
幅と高さを入力しましたが、「280px × 180px」としました
この状態では、3つとも、同じ大きさに見えます。
(3番目は、高さを大きくしたのに)
わいひら reacted
2023年8月11日 01:27
こうやってみると・・・。
WordPress 6.2.2で、入力した高さが、実は反映されていなかった。
それを、WordPress 6.3では、反映されるようにした。
そんな風に見えます。
そして、WordPress 6.3にアップデートしただけでは、反映されないようです。
投稿の再編集(最低でも空更新)がなければ、反映はされないように見えます。
あくまでも、上記のように試した範囲では・・・ですけれど。
わいひら reacted
Topic starter
2023年8月11日 09:34
mk2様
検証していただきありがとうございます。
非常に分かりやすかったです。
過去記事の画像は現時点で問題なくても、今後更新をしたら縦横比率が変わってしまうということですね。
Akira様が教えて下さった対処法をやってみます。
本当にありがとうござました。
わいひら reacted
2023年8月11日 09:48
kotakaさん
過去記事の画像は現時点で問題なくても、今後更新をしたら縦横比率が変わってしまうということですね。
いえ、私の検証では、アスペクト比を元画像から変更している場合に、影響が出ています。
そして、投稿を再編集した時に影響があるようです。
(変更していない場合は、WordPress 6.3にアップデートしても、問題ない。私の添付画像の上2つのケースがそうです)
ただ、kotakaさんの場合、アスペクト比は元画像と同じなのではないか・・・という気がして、私の検証では、完全に再現できていないかもしれないと、少し思っています。(ここが私の勘違い?)
今、スマホなもので、確認ができないのですけれど。
後程時間がとれて、PCを使えるようになったら、確認してみます。
ちなみに、モバイルだけなど条件はありますか。
再現に、他にどういう条件が必要か、なかなか思い浮かばすにいます。
対処は、Akiraさんご提示の方法でできると思いますので、あまり気にしなくても良いのかもしれないですけれど。
わいひら reacted
Topic starter
2023年8月11日 11:02
mk2様
お返事ありがとうございます。
そうですね、基本的に画像を挿入するときはサイズを手動で(マウスでドラッグして)変更しています。
画像をその形(比率)のまま縮小しているということです。
『ちなみに、モバイルだけなど条件はありますか。』
⇒はい、パソコン画面で閲覧すると、画像は正常でしたが、スマホで閲覧したときだけ、画像の縦横比率が変わってしまっていました。
ですが、先ほどAkira様の言ってくれた通りに子テーマのstyle.cssを記述をしたところ、
・今日(2023.8.11)再編集をして更新をした
・「contain」を選んでいない(何も選択していない)
という記事について、モバイルで閲覧しても画像が正しい表示になっています。
2023年8月11日 17:09
続いて、WordPress 6.3へアップデートしました。
それだけでは表示は変わらないのは、先のものと同様でした。
そこで、投稿を空更新しました。
その結果が以下です。
【HTML】
【PC表示】
【モバイル表示:画面幅 375px】
【モバイル表示:画面幅 445px】
WordPress 6.3+空更新で、style属性が出てくるのは同じです。
問題は、画像の幅が、画面幅に収まるかどうかだと思います。
style属性で幅・高さが指定されてはいるものの、
画面幅に画像が収まらなければ、収まるように幅は縮小する
高さは収まるので、style属性のままの高さが適用される
高さは収まるので、style属性のままの高さが適用される
そんな感じに見えます。
「contain」を指定すれば、もちろんアスペクト比は元画像と同じになります。
WordPress側の変更が原因だとは思います。
不具合と言えるのかどうか、どう考えたものか・・・。
ただ、縮小などしている画像が、こうやってバージョンアップで変わってしまうのは、やはり厳しいものがありますね。
不具合と言えるのかどうか、どう考えたものか・・・。
ただ、縮小などしている画像が、こうやってバージョンアップで変わってしまうのは、やはり厳しいものがありますね。
わいひら reacted
2023年8月11日 17:39
ちなみに上記の【モバイル表示:画面幅 375px】のものも、編集画面で「contain」を指定すれば、アスペクト比は元画像と同じにはなります。
但し、領域的には高いです。
そのため、WordPress 6.2.2の頃と比較すると、上下の間隔が広くなります。
【WordPress 6.3+空更新】
【WordPress 6.2.2】
今回のものは極端に高くないので、分かりづらいとは思いますが。
「縮小なし(フルサイズ)」の上下の間隔を比較すると分かり易いかもしれません。
WordPress 6.2.2では、上下とも同じです。
WordPress 6.3では、上の間隔が広いです。(画像の領域の高さ分高くなった)
WordPress 6.3では、上の間隔が広いです。(画像の領域の高さ分高くなった)
わいひら reacted
Topic starter
2023年8月11日 21:52
mk2様
何度も検証していただきありがとうございます。
理解できました。
皆様のおかげで本当に助かりました。
ありがとうございました。
わいひら reacted
2023年8月12日 00:42
いえ、とりあえずどんなパターンがあるのか、ある程度分かりました。
再現もできましたし。
結果的に、幅・高さを入力した場合、エディタ画面での変更では完全にWordPress 6.2.2と同等にするのは難しく、CSSで対応するしかないことも分かりましたし。
何かあれば、長いけれど、このトピックを見てくださいという風にすることもできるのかと思います。
ただ、こういう変更は厳しいなぁと思います。
時々、WordPressってありますよね。
わいひら reacted
2023年8月12日 18:42
mk2さん、詳しい検証ありがとうございます。
マウスで画像サイズを変更している方にこういった問題が出るのはちょっと厳しいですね。
ワードプレスリポジトリなどを確認してみたところSWELLの作者の了さんによってプルリクエストが出されていますね。
https://github.com/WordPress/gutenberg/pull/53598
Gutenbergに詳細なissueも出されています。
https://github.com/WordPress/gutenberg/issues/53555
プルリクが通れば次のバージョンで直りそうな感じですね。
This post was modified 1年前 by わいひら
Akira reacted
2023年8月12日 18:47
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 1年前 by わいひら
Akira reacted
2023年8月12日 19:09
Cocoonにも上記コードを使用して対応させてみました。
kotakaさん、mk2さんの環境でも改善されますでしょうか?
------------------------------------------------
https://github.com/xserver-inc/cocoon
開発中の最新ファイルをダウンロードする場合は、上記ページのダウンロードボタンからzipファイルをダウンロードしてください。
WordPressでの手動アップデート方法はこちら
https://wp-cocoon.com/manual-update-of-cocoon-theme/
------------------------------------------------
mk2 reacted
2023年8月12日 22:19
ご対応いただきありがとうございます。
どう考えるか・・・なところはありますけれど。
先に、スッキリした方から。
以下に書いた、モバイルの画面幅よりも、画像の幅が広いために起こる問題ですね。
https://wp-cocoon.com/community/postid/72965/
それは、解消されました。
(WordPress 6.2.2と同様の表示になりました)
以下が、そのキャプチャ画像です。
style属性から、width,heightが消え、aspect-ratioになりました。
わいひら reacted
2023年8月12日 22:21
もう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)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。