Cocoonアピールエリア｜画像サイズと表示崩れを直す方法【初心者向け】

✅　当記事のポイント

🌿アピ―ルエリアの画像サイズは自動調整される仕様

🌿background-size: cover;というコードをコピペすると解決する可能性大

🌿おすすめのデザイン案

🌿参考画像サイズ

✨特典 – Canvaテンプレートリンクを共有しています！

便利コード – background-size: cover;

アピールエリアの画像は、表示エリアのサイズに合わせて自動調整されます。

その際、画像の高さが足りなくなる、拡大されてぼやけるなどの現象が起こることがあります。

そんなときに、以下のコードをコピペすると、オリジナル画像のイメージに近い表示になる可能性が高いです。

background-size: cover;
・背景エリア全体を覆うように、縦横比を保ちながら画像をリサイズするコード

いくみ

様々なデバイスサイズへの「レスポンシブ対応」をしてくれるということです。

以下のコードを管理画面の[外観] > [テーマファイルエディター]からCocoon Childの「必要ならばここにコードを書く」というセクションに貼り付けて[ファイルを更新]ボタンを押してください。

/*アピールエリアの表示仕様変更*/
.appeal {
  background-size: cover !important;
}
.appeal {
  background-repeat: no-repeat;
  background-position: center center;
}

そのコードを使って、数種の画像サイズを試した結果がこちらです。

テスト環境
・小さめラップトップ（13.3インチ／1920×1080／表示領域：1280×551）
・大きいモニター（24インチ／1920×1080／表示領域：1850×940）

いわゆる「普通サイズ」のラップトップ（14〜15インチ）でも、表示バランスはそこまで大きく変わらないと思われます。

いくみ

スクリーンショットのサイズは表示倍率に関係なく、幅をそろえています。

このコードを使うと、オリジナル画像と出来上がりイメージが近くなり、成功率もグッとあがります。

それでも、「常にオリジナル画像のバランスで、全範囲を見せたい」というのは、やはり不可能です。

アピールエリアの大きさが、デバイスによって変わるからです。

例え自分の環境で完璧になっても、他のデバイスで表示されれば見た目は変わります。

例として、以下二つのデザインは、私の環境ではまぁOKかなと思いましたが、Responsinatorでチェックすると、イマイチなデバイスサイズもありました。（コードを使っても。）

ターゲットデバイスでOKならよい、と割り切る気持ちも大事です。

画像の調整が本当に難しくて、あるデバイスサイズの表示を直せたと思ったら、OKだったデバイスがイマイチになったり。

いくみ

深入りせず、潔く別のデザインにしたり、これで良し！とすることをおススメします。

いくみ

ということで、安全なデザイン案をご紹介します。

サンプルで使用したサイズのまとめです。

画像サイズ	縦横比	コメント
1280x 360	約32 : 9	よくある縦横比。Canvaで多くのテンプレートが出る。
1600×450	約32 : 9	同上。高さ450は割と存在感があるため、Cocoon設定で高さを調整するのもおススメ。
1600 x 320	約5 : 1	横長。個人的には、高さはこれくらいがいいなと感じました。
1920 x 360	約5.33 : 1	更に横長