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カスタマイズ依頼

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

トップページのサムネイルやロゴ画像がぼ...
 
共有:
通知
すべてクリア

トップページのサムネイルやロゴ画像がぼやける

14 投稿
3 ユーザー
2 Reactions
5,910 表示
 fuji
(@fuji)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

こんにちは。
表題に関して質問致します。

私のブログではトップページ表示を縦型カード3列を採用しておりますが、どうもサムネイルやロゴ画像がぼやけているのに最近気づきました。

ロゴ画像に関してはなぜか投稿ページに移動すると綺麗なロゴ画像が表示されます。
デベロッパーツールで確認しても、画像が置き換わったような形跡はありませんでした。

またサムネイルに関しては別トピックでfunction.phpの追記する方法を試しましたが、改善はありませんでした。再生性は何度か試しましたがこちらも改善せず。

よろしければご確認いただけないでしょうか。

該当URL: https://fmoga.com/
参考にしたURL:
1つ目
2つ目


※上がトップページのロゴ、下が投稿ページのロゴ
若干ぼやけている


   
引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

サムネイルのぼやけに関しては、Retinaディスプレイ対応していただくと良いかと思います。
https://wp-cocoon.com/retina-thumbnail/

ロゴに関しては、Cocoon設定「ヘッダー」タブの「ヘッダーロゴ」に倍の大きさの画像を設定して、「ヘッダーロゴサイズ」を半分の値に設定するとどうでしょうか?


   
返信引用
 fuji
(@fuji)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

わいひらさん返信ありがとうございます。

Retinaディスプレイ設定に関してはすでに行っており、設定したあとに再生成も試してみて今の状態でした。

ロゴに関しては1280pxのロゴにして、「ヘッダーロゴサイズ」で小さくしてみてましたが、トップページではボケが発生してしまいます。
投稿ページではきれいなのですが、この違いってなんでしょうか。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

デベロッパーツールで確認しても、画像が置き換わったような形跡はありませんでした。

ロゴに関しては1280pxのロゴにして、「ヘッダーロゴサイズ」で小さくしてみてましたが、トップページではボケが発生してしまいます。

実際ボケている状態が確認できないので微妙ですけど、キャッシュが残っているなどないですか?

h ttps://fmoga.com/wp-content/uploads/2019/09/fujilogo.png

ファイル名を変更・Cocoon設定で再セットしてから、画像の再生成。その後トップページに入って確認してキレイに表示されていれば、キャッシュが原因の可能性が高いと思いますよ。


   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

インデックスページのサムネイルのソースにpictureとかsourceとかCocoonが使用していない要素が入っているんですけど、これは何で出ているんでしょう?ログインとかでしょうか。
ここら辺を環境情報がないと何とも言えないかもしれません(わかっても原因がわからない可能性もあるけど)。
https://wp-cocoon.com/theme-report/


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

サイトロゴについても、ぼやけているようにはAndroid環境からは見えませんでした。

トップページのもの。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

投稿ページのもの。
これに関しても、端末とブラウザーの情報がないと、同じ環境で確認しているとは言えないので、何とも言えないかもしれません。


   
返信引用
 fuji
(@fuji)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

>>かうたっくさん
ご返信ありがとうございます。
ご指摘の手順で行ってみましたが改善はありませんでした。

>>わいひらさん
pictureとかsourceは「ShortPixel Image Optimizer」という画像プラグインのせいかもしれません。webp配信のために付与されています。
念の為停止してみましたが、特に変化はありませんでした。

----------------------------------------------
サイト名:フジモガ
サイトURL: https://fmoga.com
ホームURL: https://fmoga.com
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
子テーマスタイル:/wp-content/themes/cocoon-child-master/style.css
Wordpressバージョン:5.2.3
PHPバージョン:7.3.8
ブラウザ:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.9.6.4
カテゴリ数:17
タグ数:0
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:1.0.8
----------------------------------------------
Gutenberg:1
AMP:0
PWA:0
Auto Post Thumbnail:0
ホームイメージ:/wp-content/uploads/2019/03/logokabegami.jpg
----------------------------------------------
ブラウザキャッシュ有効化:0
HTML縮小化:1
CSS縮小化:0
JavaScript縮小化:1
Lazy Load:0
WEBフォントLazy Load:0
JavaScript(フッター):1
----------------------------------------------
利用中のプラグイン:
Category Order and Taxonomy Terms Order 1.5.7
Flying Pages 2.0.8
Google XML Sitemaps 4.1.0
Lazy Load for Comments 1.0.10
LiteSpeed Cache 2.9.8.5
plugin load filter 3.1.0
Regenerate Thumbnails Advanced 2.1.0
Search Regex 1.4.16
ShortPixel Image Optimizer 4.14.5
TinyMCE Advanced 5.2.1
UpdraftPlus - Backup/Restore 2.16.17.24
WebSub/PubSubHubbub 3.0.3
WP Cerber Security, Antispam & Malware Scan 8.4
WPForms Lite 1.5.5.1
WP Mail SMTP 1.6.2
----------------------------------------------

ボケはスマホ表示では再現なく、Chromeブラウザで見た時にのみ発生するようです。
そう思い、MicrosoftEdgeで確認したらロゴのボケがなくなっていました。

もしかしたら自分の環境のせいで表示がおかしいのかもしれません。


   
返信引用
かうたっく
(@kautakku)
Illustrious Member Moderator
結合: 7年前
投稿: 4770
 

>>かうたっくさん
ご返信ありがとうございます。
ご指摘の手順で行ってみましたが改善はありませんでした。

トップページの画像のパスは現在以下の通りです。

<img class="site-logo-image" src="h ttps://fmoga.com/wp-content/uploads/2019/09/fujilogo.png" alt="フジモガ">

前回のトップページロゴ画像のパスは以下。

h ttps://fmoga.com/wp-content/uploads/2019/09/fujilogo.png

h ttps://fmoga.com/wp-content/uploads/2019/09/fujilogo.png

今回のは上記

パスやファイル名は何も変わってないように見えますけど、これはキャッシュLiteSpeed Cacheのせいでしょうか???

 

***

キャッシュの削除をしてもダメ。ってことですか?

pictureとかsourceは「ShortPixel Image Optimizer」という画像プラグインのせいかもしれません。webp配信のために付与されています。

ただの可能性としてだけですが、原因がテーマでない可能性も十分のこってるように思えるので、その可能性を皆無にしてみたら、残る原因が見えてくると思われます。

 

**

あと。上記キャッシュを削除できている状態で
Chromeのキャッシュがない状態:シークレットモードなどでチェックしても同じですかね???

どこに原因があるんだろ?っと思うので、サーバーのキャッシュも怪しい気もしますが、何等かのキャッシュを使ってませんか???

 

他思うのはどれほどボケて見えてらっしゃるかが分からないんです。

正常な状態とボケてる状態の画像をご提示いただけますか???

 

あえて拡大してないので、かなり見にくいかもですが、こちら側から見えているのは以下の通りです。トップページの画像

https://gyazo.com/e4d3385a77ad37390ef08ec2b80d6ee1


   
わいひら reacted
返信引用
 fuji
(@fuji)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

v

取り急ぎGIF動画を取ってみたので投稿しておきます。
ロゴのボケはトップページから投稿ページに移動する時に発生しています。
これはChromeでシークレットモードにして撮影しました。

>>かうたっくさん
画像に関しては改善しなかったため元画像に戻しています。
キャッシュはLiteSpeed Cacheのみ使用しています。


   
返信引用
 fuji
(@fuji)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

みなさま原因を特定しました。

かうたっくさんに言われて「LiteSpeed Cache」の設定を見直したところ、「CSSを非同期ロード」をオフにしたらロゴのぼやけが解消されました。

テーマの問題かと完全にプラグインの可能性を捨ててしまっておりました。
かうたっくさん、わいひらさんありがとうございました!

こちらはこれにて解決済みと致します。
本当にありがとうございました。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

pictureとかsourceは「ShortPixel Image Optimizer」という画像プラグインのせいかもしれません。webp配信のために付与されています。

僕は停止した状態の動作を見ていないので、何とも言えないです。現在もタグは出力されているようなので。


   
返信引用
 fuji
(@fuji)
Active Member
結合: 5年前
投稿: 9
トピックスターター  

>>わいひらさん
現在.htaccessを介したwebp配信に切り替えました。
これでpicture、sourceの要素が消えました。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17407
 

現在の状態でサムネイルがぼけていますか?
ちょっとぼけているようには見えないんですけど。


   
返信引用
共有:

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

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

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

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

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

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

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

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