サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2020年4月7日 16:18
Cocoonを使用してブログを立ち上げたんですが、アイキャッチ画像がどうしてもボヤけるので
サイズの認識が間違っていないか確認の為に質問させて頂きます。
色々調べた結果、width="320" height="180" のサイズで作ってみたんですが
アイキャッチの画像がぼやけてしまいます。
試した事
①プラグイン Regenerate Thumbnailsをインストール
②Retinaディスプレイ対応にする
私のサイト ➡️ https://daikieigo.com/
お手数ですがご確認お願いします。
2020年4月7日 19:32
Retinaディスプレイ対応するとしたら、横幅320pxの画像であれば、最低でも2倍の640pxのアイキャッチが設定してある必要があります。
例えば、以下のページなどは、アイキャッチサイズが小さすぎます。
https://daikieigo.com/?p=75
もっと大きなアイキャッチ画像を設定することをおすすめします。
小さな画像が設定されているのに、クリアな画像にすることはできません。
Topic starter
2020年4月17日 16:01
返信有難うございます。
Retinaディスプレイ対応するとしたら、横幅320pxの画像であれば、最低でも2倍の640pxのアイキャッチが設定してある必要があります。
→640×368で作成したところ、文字がボヤけずに綺麗に表示する事が出来ました。
ちなみにお伺いしたいのですが上記のサイズでこれから作成していこうと思うのですが
問題ないでしょうか？
2020年4月17日 17:52
ちなみにお伺いしたいのですが上記のサイズでこれから作成していこうと思うのですが
問題ないでしょうか？
いんじゃないですかね
大きな画像を入れておけば問題ないと思いますよ
わいひら reacted
2020年4月17日 19:44
ちなみにお伺いしたいのですが上記のサイズでこれから作成していこうと思うのですが
問題ないでしょうか？
640pxちょうどみたいな画像の大きさは推奨しません。
出来れば大きな画像を挿入することを推奨いたします。
少なくとも横幅が1280px以上、出来れば1920px以上でも良いかもしれません。
今後、機器の性能は上がっていくので、これぐらいのサイズが設定してあっても全く問題ないと思います。
Topic starter
2020年4月18日 11:51
640pxちょうど動画像の大きさは推奨しません。
出来れば大きな画像を挿入することを推奨いたします。
少なくとも横幅が1280px以上、出来れば1920px以上でも良いかもしれません。
今後、機器の性能は上がっていくので、これぐらいのサイズが設定してあっても全く問題ないと思います。
→横幅は出来る限り大きい方がいいと言うことですね。
なんども申し訳ないのですが、横幅を1920pxで作った場合縦は何ピクセルが理想的なんでしょうか？
以前の縦のサイズは368pxだったんですが。
お手数おかけしますがよろしくお願いします。
2020年4月18日 14:32
こんにちは。
基本的に、縦は自由で良いと思います。
少し前までは、Googleの画像検索に関するガイドで、オススメの比率みたいなのがあったと思うのですが、今は改訂されてなくなってる？ ようですね。
https://support.google.com/webmasters/answer/114016?hl=ja
たしか「16：9」「4：3」「1：1」とかだったと思います。
※これらの比率は基本的に美しいです。
https://ocadweb.com/web/aspect_ratio
横1920pxの場合、各比率ごとでは以下となります。
16：9 → 1920x1080
4：3 → 1920x1440
1：1 → 1920x1920
僕の場合は、パソコンで表示させる横の２倍にしています。縮小率が50%だと文字が綺麗に表示できます。
パソコンで横800pxで表示させる画像は、1600pxで作っています。（横1600px縦1200）
また、AMPにするとGoogle Discoverが狙えるので、やはり1200px以上のサイズがオススメです。（といっても、1200px以下でもDiscoverされることがあるそうですが）
- 高画質でサイズの大きい画像（幅が 1,200 ピクセル以上）を使用します。
https://support.google.com/webmasters/answer/9046777?hl=ja
以上、ご参考になればと思います。
【追記】
以前は320x180で作っていたのであれば、比率は16：9ですね。
This post was modified 5年前 2回 by たなかま
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。