Cocoon記事一覧の画像がぼやける問題はボタン一つで解決できます!

ブログ運営

ブログを始めて2週間くらい。Cocoonを使っていて、CSSもいじって段々と見た目も整ってきましたが、トップにならぶアイキャッチ画像がぼやけているのに悩んでいました。

PHPを書き換えたり、画像を変えてみたり、試行錯誤しましたがなかな直らず。

けれど、解決方法はチェックボタンにひとつチェックを入れるだけでした。

以下でその方法と経緯を解説します。

スポンサーリンク

解決方法

解決方法は、「サムネイルをRetinaディスプレイ対応にする」にチェックを入れるだけでした。

Cocoon設定>画像 を選択

下にスクロールして、Retinaディスプレイの「サムネイルをRetinaディスプレイに対応する」にチェックをいれる

コレで完了です。簡単すぎる。

「画像がぼやける問題」詳細

私の場合、画像サイズは「600×450」でした。

画像自体は、開いてみると綺麗なのに、アイキャッチにするとぼんやりしてしまう…。

悩んでいたときの画像はこれ

Google様の検証機能とかをつかっていじってみると、imgタグの中にある、sizesの値を変えると綺麗になることがわかりました。

sizes="(max-width: 376px) 100vw, 376px"

これの、最後の376pxを実際の画像サイズの600pxに直すと綺麗になります。

sizesはレスポンシブとかメディアクエリの設定をしている記述らしいですが…

でも、多分これPHPとかで生成されているimgタグだよな…?と思いましたが、PHPはあんまりわからないので絶望しました。

試したこと

まず、画像自体を変えて解決できないか挑戦しました。

画像の文字を太くしたり、フォントを変えたり、文字の縁取りを太くしたり。

少しは見栄えがよくなりますが、ぼんやり感は消えず。

画像の変更で完璧に解決するのは不可能でした。

次に、ワードプレスの「外観」から「テーマエディタ」を開いてPHPを見てみました。

でも、メニューに全然PHPが表示されない。

調べてみると、PHPは親テーマにあるようで、親テーマの方を見てみるとズラッと並んでいました。

PHPをしらみつぶしに見て「sizes」という記述がないか見ましたが、やっと見つかった!と思ったらNoimageの設定…。

Google先生に「Cocoon 画像 php」とか「cocoon html php」とか色々検索してみましたが、直接的な解決方法は見つからず。

私の知識ではphpで解決するのは無理かな〜、と思って初心に戻り「Cocoon トップページ 画像 ぼやける」で検索したらヒットしました。

この3つ目の検索結果にそのままズバリな解決方法がありました。

Cocoonの作者のわいひらさんがユーザの質問に答えてくれていました。

そのリンクはこちら

トップページのサムネイルサイズと画質について
いつもお世話になっております。 現在トップページで縦型3列表示を採用しているのですが、サムネイルのサイズがバラバラになってしまうので下記ページを参考に『Regenerate Thumbnails』を使用しサムネイルの再生成を行いました。 するとサムネイルサイズは無事揃えることができたのです...

結果

みてくださいこの変化。

元の画像と同じくらい綺麗に表示されるようになりました。

めちゃくちゃ悩んだのに拍子抜けです。

でもさすがCocoon。悩んでいることも簡単に解決できました。

悩んでいる人は試してみてください。

この記事を書いた人
きぬたなお

在宅勤務を夢見るフツーの会社員。ブラックすぎる企業から転職して天国のような職場で働いています。多趣味すぎてあっちこっち手を出すものの、たいてい三日坊主。あと美味しいものに目がない。

きぬたなおをフォローする
ブログ運営
スポンサーリンク
omulife