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

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だったデバイスがイマイチになったり。

いくみ
いくみ

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

いくみ
いくみ

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

おすすめデザイン・選び方・対応策

とにかくリサイズされる仕様なので、「どこが切れても様になる」ような画像を選ぶのがおススメです。

そして、おすすめデザインの場合も、上記のコードをコピペすることをおススメします。

表示エリアに隙間ができることを防げるからです。

伝えたい文字情報は、Cocoon設定>アピールエリアにある、タイトル・メッセージ・ボタンメッセージを利用すればOK!

無敵デザイン

グラデーション

全体柄

パターン柄

いくみ
いくみ

水玉とかも可愛いですよね。

センターに余白があるデザイン

無敵デザインほど簡単なわけではないですが、割とやりやすいです。

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

いくみ
いくみ

無敵デザインなら、どの高さにしてもきまるので、やっぱり一番楽なのはそちらです。

参考:使用した画像サイズ

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

画像サイズ縦横比コメント
1280x 36032 : 9よくある縦横比。Canvaで多くのテンプレートが出る。
1600×45032 : 9同上。高さ450は割と存在感があるため、Cocoon設定で高さを調整するのもおススメ。
1600 x 3205 : 1横長。個人的には、高さはこれくらいがいいなと感じました。
1920 x 3605.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で背景画像サイズを設定する方法を徹底解説!!

アイキャッチ画像は

KollSDによるPixabayからの画像、素材・編集はCanva

コメント

タイトルとURLをコピーしました