✅ 当記事のポイント
🌿アピ―ルエリアの画像サイズは自動調整される仕様
🌿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だったデバイスがイマイチになったり。

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

ということで、安全なデザイン案をご紹介します。
おすすめデザイン・選び方・対応策
とにかくリサイズされる仕様なので、「どこが切れても様になる」ような画像を選ぶのがおススメです。
そして、おすすめデザインの場合も、上記のコードをコピペすることをおススメします。
表示エリアに隙間ができることを防げるからです。
伝えたい文字情報は、Cocoon設定>アピールエリアにある、タイトル・メッセージ・ボタンメッセージを利用すればOK!
無敵デザイン
グラデーション

全体柄


パターン柄


水玉とかも可愛いですよね。
センターに余白があるデザイン
無敵デザインほど簡単なわけではないですが、割とやりやすいです。


上のデザインで高さ450pxだと余白がありすぎる印象。そんなときは、Cocoonの高さ設定を低くすると便利です。


無敵デザインなら、どの高さにしてもきまるので、やっぱり一番楽なのはそちらです。
参考:使用した画像サイズ
サンプルで使用したサイズのまとめです。
画像サイズ | 縦横比 | コメント |
1280x 360 | 約32 : 9 | よくある縦横比。Canvaで多くのテンプレートが出る。 |
1600×450 | 約32 : 9 | 同上。高さ450は割と存在感があるため、Cocoon設定で高さを調整するのもおススメ。 |
1600 x 320 | 約5 : 1 | 横長。個人的には、高さはこれくらいがいいなと感じました。 |
1920 x 360 | 約5.33 : 1 | 更に横長 |
横幅は最低でも1280px程度はあるほうが、画質の悪化を防げると思います。
32:9の縦横比で、上記2サイズの間にくるのが、1440×405px、これもいい予感がします。
意外な解決策
画像をまったく使わずに、好きな色をアピールエリアの背景色として選ぶ。
読者のデバイスがほぼ携帯、という場合は意外とおススメです。
携帯表示はボタン回りが少し表示されるだけですので、画像を設定してもそんなに表示されません。
こちらが携帯表示例です。

注:上の携帯ヨコ表示は切れているのではなく、スクロールするときちんとうつります。
Canvaサンプル画像のテンプレートリンク
Canvaで有料プランをお持ちの方は、以下のボタンリンクから、私がセレクトして調整したサンプル画像を編集・ダウンロードすることが可能です。各サイズで10枚、用意しました!
無料プランでも、閲覧はできるようです。
アカウントの取得はこちらからできます。⇒ Canva
✨有料プランの方向けテンプレート受け取りの流れ
1.ボタンリンクをクリック。以下のような画面になります。

2.下のボタン「新しいデザインにテンプレートを使用」 を押す。(どちらからでもオリジナルは編集されないらしいのですが、一応。)
3.自分のCanvaアカウントに、10ページ分のデザインが一気にコピーされる
4.そこから好きな画像を自由に編集 or 保存できる

テストしていないデザインもたくさんあるので、イメージ通りにならなくてもご容赦くださいませ。これなら・・・という勘は得たと思います。
✨無料プランの場合
以下の操作は可能のようです。(自分自身が有料プランなので、テストはできないのですが★。)
✅ リンクを開くとテンプレの閲覧は可能(ただし、有料の素材・デザインには網がかかってしまいます。)
→ 網無しでご覧になりたい方は、上記画面でボタンを押さずに、画像をクリックしていくと見ることはできます。
✅ テンプレートをコピーして自分のCanvaに保存
✅ Pro素材やテンプレートが使われていない作品は、編集・加工・ダウンロードも可能
おわりに
この記事のために10時間くらい試行錯誤しました…(笑)
でも、結論は「数行のCSS」。技術って奥深いですね。
ブログを始めたばかりの頃、ある画像をアピールエリアで使いたくて、それは色々な切り取り方をして頑張りましたが、結局全然合わずにあきらめました。
この記事は、あの時悩んだ自分へのメモでもあります。
あなたの「そうそう、それで困ってた!」のヒントになりますように☺️
このコードを理解するためにお世話になったサイトです。興味のある方はぜひ読んでみてください。
参照サイト
・【CSS】background-sizeの基本的な使い方を詳しくサンプル解説!
・CSSで背景画像を画面いっぱいに表示するには?レスポンシブ対応も忘れずに
・background-size
・【CSS】background-sizeで背景画像をレスポンシブに設定する方法
・CSSのbackground-sizeで背景画像サイズを設定する方法を徹底解説!!
コメント