サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2023年3月7日 10:07
とても無知な質問をしていたらごめんなさい。
cocoonテーマで、1200×630サイズの画像をアイキャッチとして各記事に設定したいのですが、インデックス画面でどうしても画像の両端が見切れてしまいます。
この見切れてしまう状態は、cocoonテーマの仕様なのでしょうか？
もし可能でしたら、見切れないようにできるcocoon上の設定方法などありましたらご教授いただけますととても幸いです……！
なお、画像まわりなどはこのような設定にしております。
- サムネイル画像設定は「9:16, 1:1.777..（地デジ・YouTube比）デフォルト」
- 「サムネイルをRetinaディスプレイ対応にする」はオフ
- アイキャッチとして設定したい画像のサイズは1200×630
- カードタイプは「縦型カード2列」
- フロントページタイプ（β版）は「一覧（デフォルト）」
- メインカラム設定のコンテンツ幅は「800」
インデックス（記事の一覧）を表示した際のアイキャッチのサムネイル画像が見切れてしまう状態です。
インデックスの画面は、パソコンからのみ確認しています。
インデックスではなく、記事本文の一番上に表示されるアイキャッチ画像は見切れることなく表示されています。
まだ構築中のサイトですので、画像系のプラグインは使用していません。使用しているプラグインは、カテゴリーの並び順を整理するものと旧エディターを復活させるプラグインの２つのみ有効化してあります。
どうぞよろしくお願いいたします。
This topic was modified 2年前 2回 by potato
2023年3月7日 14:02
以下のページがご参考になると思います。
以下の部分は、1200x630 と同じアスペクト比になる数値を入力します。320x168 は、ちょうど同じアスペクト比です。
add_image_size('index_thumb', 320, 168, true);
ちなみに、1200x630 の画像は、Google 検索のリッチリザルトの記事の対象外です。
適切な画像が選択されるように、アスペクト比が 16x9、4x3、1x1 の高解像度画像（幅と高さをかけて 50,000 ピクセル以上になる画像）を指定してください。
This post was modified 2年前 by Akira
わいひら reacted
Topic starter
2023年3月8日 19:10
@akira 様
返信をありがとうございます！
cocoonさんの公式サイトに対策がちゃんと掲載されていたのですね。
私の確認不足でありました。
大変失礼いたしました……。
無事、1200×630のアイキャッチを見切れずに表示させることができました！
とても助かりました。本当にありがとうございます…！
ちなみに、「1200x630 の画像は、Google 検索のリッチリザルトの対象外」とのことで少し気になったのですが…、つまりはSEO的にマイナスということなのでしょうか…？
よく、「1200×630がアイキャッチ画像のサイズとして最適！」という情報を目にするため、このサイズを採用しようと考えておりました。
SNSでのアイキャッチ画像の表示のきれいさよりも、Google 検索のリッチリザルトの対象内となるように意識する方がSEO的には優先度が高いのでしょうか…？
cocoonとは関係のないことをここでお尋ねしてしまってごめんなさい。
2023年3月8日 21:18
@potato さん
ごめんなさい。訂正します。「対象外」は語弊があります。
リッチリザルトに使用する画像としてアイキャッチ画像が適切と Google が判断した場合は、16x9、4x3、1x1 以外のアスペクト比であってもリッチリザルトに表示されます。
ただ、リッチリザルトに表示されるのは、16x9、4x3、1x1 のどれかです。例えば、「サッカー」と検索したところ、添付画像のとおりトップニュースにハフポストの記事が表示されました。このリッチリザルトの画像は 116x65 です。16x9 とほぼ同じアスペクト比で表示されています。しかし、ハフポストの記事の画像の本来のアスペクト比は 197x131 です。そのため、上下が切れています。このように勝手に切れるのが嫌な場合は、Google の言っているように 16x9、4x3、1x1 のいずれか、あるいはいずれもにするのが望ましいと思います。
ちなみに、Facebook の推奨は 1.91x1 です。
参考：ベストプラクティス
Twitter カードは、summary_large_image だと 2x1 、summary だと 1x1 です。
参考：
あくまで私の感想ですが、「1200×630がアイキャッチ画像のサイズとして最適！」というのは「ん？」と思います。横幅は最低 1200px が必要。その 1.91x1 だからと書いている記事が多いですが、1200×630 は正確には 40x21 でしょ？と思うのは細かすぎるかな。横長が必要な場合は、16x9 が無難だと思っています。
わいひら reacted
Topic starter
2023年3月13日 11:50
@akira 様
ごめんなさい・・・！
いろいろと立て込んでいて返信がとても遅くなってしまいました。申し訳ないです・・・。
とても詳細に分かりやすく教えてくださり本当にありがとうございます！
ハフポストさんの例もあげてくださってとても分かりやすいです。
Google規定のアスペクト比でないと画像が切れてしまうのですね。
今後はその点も考慮に入れてアイキャッチのサイズを調整しようと思います。
1200×630が最適という情報に関しても、コメントいただけてうれしいです。参考にさせていただきます！
恥ずかしながらアスペクト比というものにあまり明るくないので、安易に1200×630にせずにもう少し調べてからアイキャッチサイズを決めようと思います・・・！
参考URLなども添えてとても分かりやすく教えてくださって本当にありがとうございます！
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。