サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 2024年11月13日 21:31
いつもありがとうございます。
アップデート直後から全記事の画像3枚目以降の各画像が縮小(出力されているサイズが変更されてる)されてしまうようになってしまいました。
例えば横幅1000pxでアップした画像がなぜか記事の画像3枚目以降すべて800pxで出力されてしまいます。
色々考えてはみたんですが、なぜ画像3枚目以降のサイズが縮小されるのか全くわかりません。
サイトのURLはこちらになります。
コクーン及びワードプレスのバージョンは最新です。
どうかご教授お願いします。
このトピックは1か月前 5回からabc111に変更されました
2024年11月13日 21:50
abc111さん
私からは以下のように見えております。
（容量オーバーのため、かなり縮小してしまい、見づらくてすみません）
どこが、縮小されているのか、分からないのですけれど・・・。
アップデート直後
何のバージョンアップ後なのでしょうか。
（主語がない）
コクーン及びワードプレスのバージョンは最新です。
「最新」というのは、曖昧な言葉です。
具体的なバージョンのご提示が必要かと思います。
フォーラム上部の案内にありますように、環境情報のご提示をお願い致します。
書き込みの前に以下の3点をご確認ください。
の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
わいひら reacted
トピックスターター 2024年11月13日 22:09
説明不足ですいません。ワードプレスのバージョンは6.7です。
コクーンとワードプレスを同時にアップデートし、その直後からです。
デベロッパーツールで記事の3枚目までの画像はアップした通りのサイズで出力されているのですが、4枚目以降を見るとintrinsic sizeがアップした通りのサイズになっておらず、縮小されて出力されてしまっています。
その他必要な情報などはありますでしょうか？
2024年11月13日 22:15
abc111さん
フォーラム上部の案内にありますように、環境情報のご提示をお願い致します。
（2度目です、案内を読んでいただきますよう、お願い致します。）
また、高速化を解除してください。
フォーラム上部の案内にありますように、環境情報のご提示をお願い致します。
（以下は、フォーラム上部に記載されているものです、フォーラム上部の案内、リンク先をご確認ください）書き込みの前に以下の3点をご確認ください。の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
私からは、先にご提示したように、特に異常はないように見えます。
abc111さんからは、どのように見えているのか、キャプチャ画像（スクリーンショット）も添付してください。
お問い合わせ時は、プラグイン「LiteSpeed Cache」も無効にしていただくと良いと思います。
（最新の状態が確認できない可能性があるため）
わいひら reacted
2024年11月13日 22:22
●発生要因
期待の表示となっているimgタグ
<img
decoding="async"
src="https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2.jpg"
alt="とんかつ山花 周辺"
width="1000"
height="750"
class="alignnone size-full wp-image-12884"
srcset="
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2.jpg 1000w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-500x375.jpg 500w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-800x600.jpg 800w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-300x225.jpg 300w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114322-2-768x576.jpg 768w
"
sizes="(max-width: 1000px) 100vw, 1000px"
>
100vwが選択され、画面幅となる。
小さくなってしまっているimgタグ
Cocoonが要因ではないと思われます（imgタグはWordPressの関数で自動生成しており）。
<img
loading="lazy"
decoding="async"
src="https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259.jpg"
alt="とんかつ山花 駐車場の案内"
width="1024"
height="768"
class="alignnone size-full wp-image-12885"
srcset="
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259.jpg 1024w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-500x375.jpg 500w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-800x600.jpg 800w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-300x225.jpg 300w,
https://www.niigata-gate.com/wp-content/uploads/2024/11/20241031_114259-768x576.jpg 768w
"
sizes="auto, (max-width: 1024px) 100vw, 1024px"
>
autoが付いているため、図示のブラウザの指定に従い、300✕150pxとなってしまった（Chrome130）。
●対策
height:autoのため、以下のコードでwidth:autoではなく、本来width:100vwとし画面幅とすべき。
@media screen and (max-width: 480px) {
.article .entry-content img {
margin: 0 calc(50% - 50vw);
max-width: none;
width: auto;
}
}
わいひら reacted
トピックスターター 2024年11月13日 22:23
---------------------------------------------- サイト名：Gate to にいがた サイトURL： https://www.niigata-gate.com ホームURL： https://www.niigata-gate.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 スキン：/wp-content/themes/cocoon-master/skins/simple-green/style.css WordPressバージョン：6.7 PHPバージョン：8.1.29 ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36 サーバーソフト：Apache サーバープロトコル：HTTP/1.1 言語：ja,en-US;q=0.9,en;q=0.8 ---------------------------------------------- テーマ名：Cocoon バージョン：2.7.9.1 カテゴリー数：23 タグ数：0 ユーザー数：1 ---------------------------------------------- 子テーマ名：Cocoon Child バージョン：1.1.3 style.cssサイズ：30699 バイト functions.phpサイズ：5583 バイト ---------------------------------------------- Gutenberg：0 Font Awesome：4 Auto Post Thumbnail：0 Retina：1 ホームイメージ：/wp-content/themes/cocoon-master/screenshot.jpg ---------------------------------------------- ブラウザキャッシュ有効化：1 HTML縮小化：0 CSS縮小化：1 JavaScript縮小化：1 Lazy Load：0 ---------------------------------------------- 利用中のプラグイン： Akismet Anti-spam: Spam Protection 5.3.3 BackWPup 4.1.6 Category Order and Taxonomy Terms Order 1.8.6 Contact Form 7 6.0 Edit Author Slug 1.9.1 EWWW Image Optimizer 7.9.1 Flamingo 2.5 Flying Scripts: Delay JavaScript to Improve Site Speed & Performance 1.2.3 LiteSpeed Cache 6.5.2 Regenerate Thumbnails 3.1.6 SiteGuard WP Plugin 1.7.8 TypeSquare Webfonts for エックスサーバー 2.0.8 Wordfence Security 8.0.0 WP Multibyte Patch 2.9 XML Sitemap Generator for Google 4.1.21 ----------------------------------------------
トピックスターター 2024年11月13日 22:32
お二人方ありがとうございます。width:100vwにしてスマホの表示上は元に戻りました。
ただ、画像のように1000pxでアップした画像がintrinsic sizeをみると800pxとなっているのですが、画像4枚目以降だけなぜこうなるのでしょうか？
この投稿は1か月前ずつabc111に変更されました
トピックスターター 2024年11月13日 22:56
それです！
デベロッパーツールでスマホの方を表示してからPCの方を表示するとmkさんがいうように1000pxであれば1000pxというようになっているのですが、最初からPC、もしくはスマホからPCに変え更新などすると私が先ほどアップしました「画像のように1000pxでアップした画像がintrinsic sizeをみると800pxとなっている」というようになってしまうようなのですが。
トピックスターター 2024年11月14日 00:07
width:100vwにしてスマホの表示上は元に戻せたので解決という事でお願いします。ありがとうございました。
トピックスターター 2024年11月14日 00:17
@chu-ya 上手く伝えることができずすいません。
キャプチャはこちらになります。
imgのwidth1000に対しintrinsic sizeが800となっています。
ただデベロッパーツールで再度確認したんですが、デベロッパーを開いた時に表示されている画像のintrinsic sizeが1000で下にスクロールし遅延表示される画像のintrinsic sizeが800となっていたので、私の勘違いでintrinsic sizeについては問題なかったものと思います。
それとあと1点だけ分からなかったことがあったんですが、100vwにすることで解決はしたのですが、なぜ4枚目以降だけが縮小されていたのでしょうか？
cssに問題があれば1～3枚目も縮小されて表示されているものと思っていました。
この投稿は1か月前ずつabc111に変更されました
2024年11月14日 00:40
すみません、直接原因はよく分かりません。
imgタグのsize=autoとなっているのが、4枚目以降と3枚目までの違いです。
そこから推測し、CSSでもwidth:autoとしているため、デフォルトの定義が適用されたと思われます。
この現象は見たことがないです。
Gutenbergエディターでない点も気になります。
わいひら reacted
2024年11月14日 00:55
sizes="auto"についてですけれど。
以下をご覧ください
Auto Sizes for Lazy Loaded Images in WordPress 6.7
https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/
WordPress will only add
autoto thesizesvalue if the image includesloading=”lazy”. Otherwise, browsers that supportsizes=autowill fail to validate thesizesvalue and apply the default value of100vw, which will cause larger than needed images to be selected from thesrcsetattribute. Any custom implementations that change the loading value of images after WordPress generates the markup should use the newwp_img_tag_add_auto_sizes()function to correct thesizesattribute.
WordPressは、画像にloading="lazy"が含まれている場合にのみ、sizes属性にautoを追加します。それ以外の場合、sizes=autoをサポートするブラウザはsizes属性の値を検証できず、デフォルト値である100vwを適用します。これにより、srcset属性から不必要に大きな画像が選択されることになります。WordPressがマークアップを生成した後に画像のloading値を変更するカスタム実装では、sizes属性を修正するために新しいwp_img_tag_add_auto_sizes()関数を使用する必要があります。
2024年11月14日 03:44
以下辺り？
wp_get_loading_optimization_attributes
https://developer.wordpress.org/reference/functions/wp_get_loading_optimization_attributes/
以下で、ビューポートとかその付近か等を見ている？
https://github.com/WordPress/WordPress/blob/a20a5a4516dbf4cc7ca9e16f1604e96f4f13f563/wp-includes/media.php#L6059-L6066
この直上の部分で、$maybe_in_viewportの判定をしていそう・・・。
以下によると、閾値は「3」？
（WordPress 6.3で変わった？）
wp_omit_loading_attr_threshold
https://developer.wordpress.org/reference/functions/wp_omit_loading_attr_threshold/
わいひら reacted
2024年11月21日 17:28
abc111さん
本日、WordPress 6.7.1 リリース候補版が使用可能になりました。
上記で確認したところ、WordPress側としては、以下のstyleタグを暫定的に追加することにしたようです。
（sizes属性の"auto"は残る）
Chromiumの不具合も絡んでいるらしく、Chromiumのユーザーエージェント スタイルシートを上書くstyleタグを暫定的に追加したみたいです。
WordPress 6.7.1 の正式リリースは、日本時間で明日11/22(金) の予定です。
よろしければ、ご確認いただけますと幸いです。
なお、WordPress 6.7.1では、sizes属性"auto"の出力制御ができるようなフックも追加されるようです。
add_filter ( 'wp_img_tag_add_auto_sizes' , '__return_false' );
わいひら reacted
2024年11月22日 18:19
abc111さん
ご確認いただき、ありがとうございます。
問題なかったということで良いのですよね。
この件に関しては、WordPress側の問題かと思いますし、今回WordPress側で対応がなされたということで、「解決済」及び「クローズ」させていただければと思います。
もし関連するお問い合わせ事項があれば、新たなトピックを立てていただければと思います。
その際、本トピックをリンクしていただけますと、幸いです。
なお、WordPress側の対応は、Chromiumの対応を待つ間の暫定的なもののようです。
そのため、今回追加されたstyleタグは、将来的には無くなると思います。
（フックについては、今後も残るはずです）
わいひら reacted
2024年11月25日 22:39
abc111さん
WordPress側のこの先の対応が不明確です。
そのため、WordPress側でこの問題が解決するまでは、親テーマに対応を入れていただくこととなりました。
以下手順で、GitHubから親テーマをダウンロード＆適用していただければ、functions.phpへの追記は不要ですので、お知らせ致します。
（親テーマのアップデート後は、今回追記していただいたものは、削除していただいて問題ありません）
Cocoonテーマファイルを手動でアップデートする方法
https://wp-cocoon.com/manual-update-of-cocoon-theme/
一旦クローズしたトピックですし、お戻りになるかは分かりませんが・・・。
本トピックは、本日から1週間程度は開けておこうと思います。
（恐れ入りますが、その後は、お戻りならなくても、クローズしてしまうと思います。）
わいひら reacted
2024年11月25日 23:40
以下アップデートに含まれていますので、近い内にダッシュボードから更新できるようになります。
Cocoon 2.8.1公開。WordPress 7.0からの不具合対応やその他不具合対応
https://wp-cocoon.com/2-8-1/
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。