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