「投稿リスト」でアイキャッチを設定するとアイキャッチがぼやける
「投稿リスト」でアイキャッチを設定するとアイキャッチがぼやける
- このトピックには7件の返信、3人の参加者があり、最後に
により3年、 1ヶ月前に更新されました。
-
投稿
-
■ WordPress のバージョン
5.8■ テーマ・プラグインは全て最新版で確認してください。
確認しました。■ 子テーマをご利用の場合は親テーマに変更して症状が改善するか確認してください。
確認しました。■ テーマの種類
Lightning ( G3 ) + Lightning G3 Pro Unit■ テーマのバージョン
14.11.6■ Pro Unit のバージョン
0.12.0■ スキンの種類
Origin III■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。■ プラグインの種類・バージョン
Lightning G3 Pro Unit・0.12.0
VK Blocks Pro・1.16.4■ 期待する動作
アイキャッチ画像がぼやけない■ 自分で試した事
制作中にアイキャッチがぼやけるのに気が付き、最低限の環境(Lightning + Lightning G3 Pro Unit + VK Blocks Pro)を用意して試したところ同様の現象を確認。■ 症状が発生するブラウザ
Chrome, Edge■ 実際の症状
最低限の環境で試したところ再現できましたので、その時の手順となります。
環境：Windows 10, local by flywheel１．Lightningをインストール後、Lightning G3 Pro UnitとVK Blocks Proをインストール。
２．「Sample Page — フロントページ」に投稿リストを入れる（どこの固定ページのどこに入れても症状は発生すると思います）
３．投稿のHello world!にアイキャッチ画像を設定
４．新しい投稿を作り同じアイキャッチ画像を設定
投稿が２つなので、投稿リストには[新しい投稿][Hello world!]が表示されます。[PCのChromeでの症状]
「Hello world!」のアイキャッチがぼやける[PCのEdgeでの症状]
「新しい投稿」のアイキャッチがぼやける投稿数が3つ以上の場合でも、Chromeは左上から二番目、Edgeは左上の画像がぼやけます。
（ぼやける箇所が固定されている）■ その他特記事項
[スマホのChromeでの症状]
アイキャッチのぼやけはなし。
（※本番環境からの確認）[添付の画像]
素材サイトからの拾い物とそれを使ってぼやけた状態の画像です[その他]
1920*1280の画像ならどれでもぼやける感じです。
試しに1024*538、640*427、252*300の画像を試してみたところぼやけた感じはしませんでした。参考情報です。
ご質問者がアップされた 1920*1280 の画像 22587773_m-1.jpg で私のサイトでも試してみました。
投稿リストを置いた固定ページはこちら ↓ です。
私のパソコンの Chrome / Edge で表示すると、1枚目・2枚目のアイキャッチ画像は同じように見えています。
ご質問者のパソコンではこの固定ページはどう見えていますか？
ご丁寧にありがとうございます。
確認したところ同様にぼやけていました。
[PCのChromeでの症状]
アイキャッチ画像のテスト投稿①のアイキャッチがぼやける
[PCのEdgeでの症状]
アイキャッチ画像のテスト投稿②のアイキャッチがぼやける
[スマホのChromeでの症状]
アイキャッチのぼやけはなしそこで別のPCで確認したところ以下の状態でした。
[PCのChromeでの症状、PCのEdgeでの症状]
アイキャッチ画像のテスト投稿②のアイキャッチがぼやけるPCもモニターもメーカーが違うものですが、これはひょっとしてPC側に原因があるのでは・・・と思いました。
職場環境のPCからそう見えたので、自宅環境（Window, Mac）から確認して、再度投稿いたします。自宅環境で確認したところ下記のようになりました。
【Mac OS X】
[Chromeでの症状]
アイキャッチ画像のテスト投稿①のアイキャッチがぼやける【Windows 10】
[Chromeでの症状]
アイキャッチ画像のテスト投稿②のアイキャッチがぼやける
[Edgeでの症状]
アイキャッチ画像のテスト投稿①のアイキャッチがぼやける
[FireFoxでの症状]
ぼやけなし正直よくわからない状況です。
ただ、wordpressというよりは個人の環境に依存しているのかな？と思いました。いま確認してみたところ、1枚目・2枚目のアイキャッチ画像を出力している HTML は同一です。
なので、WordPress 側の問題ではないと考えます。私のデスクトップパソコンでは同じに見えましたが、
解像度 1366×768 のノートパソコンで表示したところ、2枚目の画像がぼやけて見えます。たぶん、パソコン側の処理に起因する現象ではないでしょうか。
「Chrome 画像 ぼやける」
「Edge 画像 ぼやける」
でググると関連しそうな情報や解決方法がヒットします。ブラウザが画像を縮小表示するときのレンダリングに起因する現象みたいです。
お世話になっております。ベクトルの石川でございます。
テーマ側での対応はちょっとむずかしいかなという印象です。wordpress側の問題ではないとわかったので、解決とさせていただきます。
色々とありがとうございました。
- このトピックに返信するにはログインが必要です。
