- このトピックには9件の返信、2人の参加者があり、最後に
により6年前に更新されました。
-
投稿
-
こんにちは。表題の件、どこのカテゴリに書くか迷いましたがここに。
記事のアイキャッチ画像に設定した画像をレティーナ用の2倍サイズにしても、スマホで表示させるとトップページ／アーカイブページのサムネイルがぼやけて表示されます（かなりにじんだようになっている）。
MacのChoromeのデベロッパーツールで見たときは問題ないのですが（Macもレティーナです）
iPhone7で見ると、文字（コピー）やイラストなどがかなり滲んでしまって、とても読みづらくなっています。スライダー画像は問題なくクリアに表示されていますが、記事のサムネイル画像だけが、だいぶ残念な感じで、これを解消する方法があれば知りたいです（もし、どこかに既出でしたらすみません…検索はしたのですが、うまくみつけられず）
ではよろしくお願いいたします。
いいねをした人: 居ませんうーん、そうなのですね。実機が持ってないのでググった情報になりますが、7は ratina の比率が2、7 Plus は比率が3だったので、Plus だとボケるのかなと想像していました。
Snow Monkey のデフォルトでは、一覧のアイキャッチサイズは「medium」で、インフィード広告を使っている場合は「large」になるようになっています。もし子テーマをお使いで、
template-parts/loop/entry-summary-post.phpを上書きされている場合はアイキャッチのサイズがどうなっているか確認されてみてください（古いバージョンのテンプレートからコピーした場合はサイズが不適切な可能性があります）。特に問題なさそうなら、単純に ratina の比率と画像のサイズが合っていないのだと思うので、今の背景画像を使う実装から、レスポンシブイメージを使った実装に変える必要があるのかなと思います。
いいねをした人: 居ませんお返事遅くなりすみません。子テーマでそのphpは使っていません。
今の背景画像を使う実装から、レスポンシブイメージを使った実装に変える
は、どのようにしたら良いでしょう？<span style=”background-image: url(<?php echo esc_url( $background_image_url ); ?>)”></span>
をimgタグに変えるところまでは分かりますが、出し分け用の画像の設定はどうしたらいいのかな。それとも、テーマの方で対応していただく必要があるのでしょうか？
いいねをした人: 居ませんimgタグに変えるところまでは分かりますが、出し分け用の画像の設定はどうしたらいいのかな。
それとも、テーマの方で対応していただく必要があるのでしょうか？検証してみないと詳しくわからないのですが、
the_post_thumbnail()で画像出力すると自動的にsizesやらsrcsetが付与されるんじゃなかったでしたかね。pictureにするのは互換性なども考えると難しいかもしれませんが、sizesとsrcsetが付与されてフックで変更できるのなら良い感じにできそうな気はします。カスタマイズはされていないとのことなので、多分ボケるのは皆共通の現象だと思いますので、テーマ側で対応したほうが良いかもしれませんね。
いいねをした人: 居ません4.3 で img タグを使った方法に変えようかなと思いますが、直近の対応としては、ダッシュボード > 設定 > メディア > 大サイズの設定が小さい数値になっていないか確認してみてください（デフォルトでは 1024）
いいねをした人: 居ません諸々ありがとうございます！
あ、ちなみになんですが、その画像は、ベクターイラスト+テキストで作ったバナー的な画像（pngファイル）です。pngなのが原因かな？という気も今になってしていますが、OGP画像がSNSで表示されることを想定すると、pngを使いたい場面は結構あるので、pngも綺麗に表示されるテーマであると助かるなあ、とは思います。
それから、ダッシュボード > 設定 > メディア > 大サイズの設定はデフォルトのまま（1024）です。
いいねをした人: 居ません
- トピック「トップページ、アーカイブページのサムネイル画像がぼやける」には新しい返信をつけることはできません。