サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2018-06-11 20:41
はじめまして。
似たようなスレッドがあるようでなかったのでご質問させていただきます。
アイキャッチ設定した画像が、実際に投稿された時のことについてお聞きします。
前提として
・cocoon設定の画像タブでの、アイキャッチ表示はoff。
・wordpressのメディア設定は（横幅のみ）
サムネイル150、中サイズ300、大サイズ500
・当該画像のフルサイズは640
です。
このフルサイズの画像を、投稿画面でアイキャッチ画像に設定して投稿しました。投稿サイズは大サイズ500に設定しました。
すると、実際に投稿された画像は、
フルサイズ640のものが、500に縮小されて投稿されました。（圧縮ではなく縮小だと思います）
ちなみに、simplicity2を利用していた時は、大サイズ500に生成された画像が投稿されていました。
実際に投稿されたものをダウンロードして、ファイルサイズを確認したところ、cocoonでアイキャッチ設定した画像は、simplicity2でアイキャッチ設定した画像に比べて、ファイルサイズが大きな画像として投稿されていました。
↓これの一番上の画像が大サイズ500に表示して欲しい画像です。
https://news-ks.tfmwish.com/kokunai_nonalc/
simplicity2のように、大サイズ500に生成された画像にはなりませんでしょうか。
この画像自体は大して大きいものではありませんが、フルサイズ横幅1000くらいの画像を使ってリンク先に設定し、拡大表示させたいときもあります。
画像2枚用意するという手もありますけれど。
----------------------------------------------
サイト名：面垂に一撃／Relive my stress
サイトURL： https://news-ks.tfmwish.com
ホームURL： https://news-ks.tfmwish.com
コンテンツURL： https://news-ks.tfmwish.com/wp-content
インクルードURL： https://news-ks.tfmwish.com/wp-includes/
テンプレートURL： https://news-ks.tfmwish.com/wp-content/themes/cocoon-master
スタイルシートURL： https://news-ks.tfmwish.com/wp-content/themes/cocoon-child-master
Wordpressバージョン：4.9.6
PHPバージョン：7.2.3
ブラウザ：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.79 Safari/537.36
サーバーソフト：Apache
サーバープロトコル：HTTP/2.0
エンコーディング：gzip, deflate, br
言語：ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名：Cocoon
バージョン：0.6.8
カテゴリ数：9
タグ数：0
ユーザー数：1
----------------------------------------------
子テーマ名：Cocoon Child
バージョン：0.0.5
----------------------------------------------
利用中のプラグイン：
----------------------------------------------
2018-06-12 00:21
フルサイズ640のものが、500に縮小されて投稿されました。（圧縮ではなく縮小だと思います）
なぜそのように思われましたか？ ※どこか見落としがあるかも知れないので、お伺いしました。
HTMLを見てもlargeサイズのものが出力されてるように感じます。size-large
<img class="alignnone wp-image-364 size-large" src="https://news-ks.tfmwish.com/image/kokunai-500x353.jpg" alt="国内ニュース" width="500" height="353" srcset="https://news-ks.tfmwish.com/image/kokunai-500x353.jpg 500w, https://news-ks.tfmwish.com/image/kokunai-300x212.jpg 300w, https://news-ks.tfmwish.com/image/kokunai-320x226.jpg 320w, https://news-ks.tfmwish.com/image/kokunai.jpg 640w" sizes="(max-width: 500px) 100vw, 500px">
それからHTML内にある画像も以下のように500pxのものになってます。※320pxで出力されたものがテーマ側の指定で生成された画像っぽい。
s://news-ks.tfmwish.com/image/kokunai-500x353.jpg
WordPressの機能を使われて、その機能の通りご自身で設定されたものを出力しているように思いますが、違ってますかね？？？
画像をアップされてるディレクトリが/wp-content/uploads/hogehoge/とは違うのが個人的に知っている内容と違う点で、そこがちょっと気になってる状態です。
Topic starter
2018-06-12 07:44
お答えありがとうございます。
そのように思った理由は、2つほどあります。
１．プラウザ（chome）で投稿された画像を、「名前を付けて画像を保存」したときに、「kokunai.jpg」がダウンロードされて、そのファイルのプロパティが「640×452」になっている。
２．PageSpeed Insights のテストで、「kokunai.jpg」が「画像を最適化する」で削減対象になっている。 → 画像添付
simplicity2では、「kokunai-500x353.jpg」がダウンロードされて、PageSpeed Insights での削減対象にはなっていませんでした。
それから、先ほどプラウザをIE、firefoxでも同じことをやってみました。
結果は、「kokunai-500x353.jpg」がダウンロードされましたが、
PageSpeed Insightsでは、同様に「kokunai.jpg」が削減対象になっていました。謎です。
2018-06-12 09:35
ダウンロードはどこが関係しているのか（ブラウザの仕様なのか何かは）不明ですが、画像のアドレスをコピーした際、幅によって任意の画像のURLが表示されます。
…com/image/kokunai-500x353.jpg
幅を狭くすると300pxの画像URLをコピーできます。
やはりWordPressの機能をお使いでその機能の通り出力されてる気がしてなりません。
プラグインWP Theme Testを一時的に導入して、現環境でログインユーザーのみ同じドメインでのSimplicity2の環境をチェックしてみるのも良いかも知れないですね。
その上で心配事・気になる事があるようでしたら再書き込みして、テーマ作成者さんの返信をお待ち頂けたらと思います❦
2018-06-12 19:57
確かに、Firefoxだと500pxの画像がダウンロードされて、Chromeだと640pxの画像がダウンロードされますね。
おそらく、srcset属性あたりが関係しているのかなと。
<img class="alignnone wp-image-364 size-large" src="https://news-ks.tfmwish.com/image/kokunai-500x353.jpg" alt="国内ニュース" srcset="https://news-ks.tfmwish.com/image/kokunai-500x353.jpg 500w, https://news-ks.tfmwish.com/image/kokunai-300x212.jpg 300w, https://news-ks.tfmwish.com/image/kokunai-320x226.jpg 320w, https://news-ks.tfmwish.com/image/kokunai.jpg 640w" sizes="(max-width: 500px) 100vw, 500px" data-popupalt-original-title="null" title="国内ニュース" width="500" height="353">
ただこれは、この画像タグ出力はWordpressに依存する機能なので、動作が違うのはブラウザの仕様のような気がします。
そこらへんは、SimplicityもCocoonも出力タグに変更を加えてなかったと思います。
PageSpeed Insightsは、Googleの技術なので、Chromeのアルゴリズムが適用されているのかなと思います。けれど、僕も詳しいことはちょっとわからないです。
2018-06-12 20:00
あと、アイキャッチはCSSで非表示にはなっているけど、以下のようなタグは出力されているので、これが関係しているのかも。
<img width="640" height="452" src="https://news-ks.tfmwish.com/image/kokunai.jpg" class="attachment-640x452 size-640x452 wp-post-image" alt="国内ニュース" srcset="https://news-ks.tfmwish.com/image/kokunai.jpg 640w, https://news-ks.tfmwish.com/image/kokunai-300x212.jpg 300w, https://news-ks.tfmwish.com/image/kokunai-500x353.jpg 500w, https://news-ks.tfmwish.com/image/kokunai-320x226.jpg 320w" sizes="(max-width: 640px) 100vw, 640px" />
ただ、これは構造化データ用に画像URLを指定するためのものなので、これが原因だとしても、仕様なのでちょっと修正は難しいです。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。