サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL：
相談内容：
不具合の発生手順：
解決のために試したこと：
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報：※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え（FAQ）
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法（推奨ツール：notepad.pw）
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
Topic starter
2024年7月1日 16:42
cocoonのサイトでメインビジュアル（cocoonの場合は名称がエリア画像になるかもしれません）をきちんと表示するためのサイズを教えてください。
調べると、一般的にメインビジュアルのサイズは、幅1920px x 高さ1080pxとなっており、下記のサイトでもそのように記載されていました。
https://cocoon-grayish.na2-factory.com/ref-img-size/
実際にこのサイズで掲載すると、PCだと上下が切れてしまい、モバイルだと主に左右がきれてしまいました。
よく考えてみれば、cocoon設定でエリア画像といいますか、アピールエリアの高さは800が最大なので、幅1920px x 高さ1080pxがよくなかったのかなあと思い、縦を800で画像制作しましたが、それでもやはり切れてしまいます。
スマホが切れてしまうのは基本的に防ぎようがなく、どうしてもきれいに表示させたい場合はこちらの方のコードを使うのがよいとわかりましたが、PCがどうにもいかず、困っております。
#appeal {
height: calc(100vw * 0.3);
}
2024年7月1日 17:24
●回答
CocoonにはSWELLのようなメインビジュアルはありまりません。
アピールエリアを使っていますが、ヘッダーでは問題ですか？
[Cocoon設定]→[ヘッダー]→ヘッダー背景画像を設定
「背景画像の全てを表示」オン
もしアピールエリアを使うなら以下で、背景画像のアスペクト比をすれば表示されます。
コードについては、ご自身で調べ勉強して下さい。
.appeal {
/* width / height */
aspect-ratio: 3 / 4;
}
●ご参考
https://wp-cocoon.com/header-size-background-image-aspect-ratio/
わいひら reacted
Topic starter
2024年7月1日 17:54
ちなみに、もしご存じでしたら教えていただきたいのですが、cocoon設定における、「高さ（800pxまで可能）」はどのような目的を持った機能なのでしょうか？
当初、cocoonには基本的に縦横比が固定で設定されているものの、これに縛られないサイズの画像を使いたいときに使う設定機能なのかと思いました。ただ、実際は、縦800pxの画像をつくってアップロードしても切れてしまいます。
ということは、おそらくこの機能は縦サイズを絶対値で固定するものではないだろうと思いました。でも、それだったら、なぜこの機能があるのかなと思い、不思議に感じました。
2024年7月1日 23:10
アピールエリアはもともとメインビジュアルとかではなく、中央の文章を読んでもらうことを目的としたエリアです。
その目的を果たすには、800px以上必要ないかなという判断からです。
Topic starter
2024年7月2日 09:24
わいひらさま
そういうことだったのですね、ありがとうございます。
ということは、つまり、cocoonにおいて使用可能な最大画像をアピールエリアに、切れないように置くのであれば、高さを800pxに固定した上で、上でchu-yaさまが教えてくださった
.appeal {
/* width / height */
aspect-ratio: 3 / 4;
}
のコードを使ってaspect-ratioを1/2とかにすれば800pxの倍の1600が幅pxになるため、概ね実現可能（横1600px 縦800pxの画像）であるという理解は正しいでしょうか？
※仰るように、ここは基本的に文字を見せる部分とのことなので、画像に文字などは入れるべきではなく、背景画像程度にした方が良いのかもしれませんが。。
2024年7月2日 19:16
ということは、つまり、cocoonにおいて使用可能な最大画像をアピールエリアに、切れないように置くのであれば、高さを800pxに固定した上で、上でchu-yaさまが教えてくださった
.appeal { /* width / height */ aspect-ratio: 3 / 4; }のコードを使ってaspect-ratioを1/2とかにすれば800pxの倍の1600が幅pxになるため、概ね実現可能（横1600px 縦800pxの画像）であるという理解は正しいでしょうか？
実際のサイトの状態を見ていないので、確かなことはわかりませんが高さとかを設定せずとも aspect-ratio を画像のアスペクト比で設定すれば良いかと思います。
※grayishスキンを使っている場合は、また別の記述が必要なのかもしれませんが、確認はしていません。
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね！」もご活用ください。回答者の励みになります。
（CC BY-ND 2.1）準じていれば（リンクを貼っていただければ）転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。