Cocoonのアピールエリアに設定した画像の下の方が切れてしまいます。どうすれば直りますか？
こんな疑問にお答えします。
WordPressテーマCocoonは、ヘッダー下の「アピールエリア」に画像やテキスト、ボタンを配置できるようになっています。
これ自体はとても便利なのですが、画像のサイズによっては下の方が見切れてしまったり、スマホで見ると画像が表示されないことがあります。
切れても影響がない画像なら良いのですが、全体をしっかり表示したい場合は困りますよね。
ということで、今回はCocoonのアピールエリアの画像が見切れたり、スマホで表示されない場合の解決方法をご紹介します。解決方法を探している方の参考になれば嬉しいです。
この記事のレベル
難易度：
初心者（慣れている方）〜中級者向け
実際の表示
まずは修正前の実例を見ていただきましょう。
同じ現象が起きている方の参考になればと思います。
→飛ばして設定方法に進む方はこちら
修正前
この画像をアピールエリアに設定すると
↓
下の方が切れてしまいます。
またスマホで見ると、このようにアピールエリアがほぼ見えません。
高さを設定しても…
Cocoon設定でアピールエリアの高さを設定すると
画像は全て表示されましたが下に余白ができてしまいます。（スマホは変化なし）
数値を小さくすると下が切れてしまい、なかなか上手くいきません。
修正後
この記事の修正方法を使っていただくと、下記のようにアピールエリアの画像が全て表示されます。ブラウザの幅を変えても画像の上下が切れることはありません。
PC
スマホ
スマホの表示エリアを調整すれば、このように画像を大きく表示できます。
アピールエリアの高さを調整する方法
Cocoon設定でアピールエリアの高さを設定している場合はクリアしてから始めてください。
画像の幅と高さを確認する
アピールエリアに表示する画像の「幅(px)」と「高さ(px)」を調べてメモしておいてください。
画像サイズの調べ方はこちらを参考にしてください。
CSSコードを貼り付ける
① 以下のコードをコピーして、外観＞カスタマイズ＞追加CSSに貼り付けてください。
#appeal {
height: calc(100vw * calc(900 / 1600));
}② コードの中の数字を、先ほど確認した画像の幅と高さに書き換えます。
- 900の部分→画像の高さ
- 1600の部分→画像の幅
数値を書き換えたら、プレビューでスマホの表示も確認してみてください。
画面左下のスマホマークからスマホでの表示を見ることができます。
表示を確認したら[公開]して保存します。
これでアピールエリアの高さの調整は完了です。
PCはこれでいいけど、スマホの画像をもう少し大きくしたいな〜
スマホで見やすい大きさに変更する方法も説明するよ
PCとスマホでは見え方が異なるので、PC用の画像だとスマホでは小さく見えることも。そんな時はスマホのアピールエリアだけサイズを変更します。
スマホでアピールエリアの高さを変更する
下記のコードをコピーして、外観＞カスタマイズ＞追加CSSに貼り付けます。
/*アピールエリアの高さ設定 スマホ*/
@media (max-width: 767px){
#appeal {
height: 80vw;
}コードの中の「80vw」部分が高さの設定になりますので、画像の内容やお好みに合わせて「80vw」の数値を変更してください。
（画像を縦長に表示したい場合は100以上の値を設定してください）
「vw」は（簡単にいうと）スマホの横幅に対する割合を表しますので、「80vw」はスマホの横幅を100とした場合、80の高さという意味になります。
200pxなどの絶対値で指定すると、見るスマホの幅と高さによって表示範囲が変わってしまうため、どのスマホで見ても同じ比率で見えるように「vw」で設定します。
先ほどの例で元の設定が左、スマホのアピールエリアを「80vw」に設定したものが右になります。
変更前
変更後
かなり印象が変わりますね。
以上で、スマホのアピールエリアの高さ変更は完了です。
まとめ
今回は、Cocoonのアピールエリアの画像が見切れる、スマホで表示されない場合の解決方法を解説しました。
コードをコピペして数値を書き換えるだけなので簡単に設定できるかと思います。アピールエリアの表示が上手くいかずお困りの方の参考になれば嬉しいです。
どうしても設定方法が分からない、代わりに設定して欲しいという時は、Dressingのブログお悩み相談をご利用ください。あなたのご質問にチャットでお答えします。
Dressingでは、ブログ作成中の疑問やお悩みにチャットを使ってお答えしています。
- WordPressが思ったより難しくて挫折しそう
- 使い方が分からない、なぜか上手くいかない
- 自分のブログはこのままでいいの？
など、お困りの際はお気軽にご相談ください。
今すぐ解決！
