サイト内検索
アピールエリアの画像の縦横比を保持してほしい | 要望 | Cocoon フォーラム

Topic starter2021年4月3日 07:47
お世話になっております。
アピールエリアの画像の縦横比を保持してほしいです。
現状では、PCでは画像の下方が見切れ、モバイルでは両端が見切れてしまいます。
要望としては、ただ普通に画面幅いっぱいに合わせて縮小していってほしいのです。
ご検討をお願いします。
2021年4月3日 08:22
前略、non さん
アピールエリアには、文字やボタンを設置することができるようになっています。
アピールエリアの画像は、この文字やボタンの背景画像という位置付けになっています。
Webサイトを作ったことのある方ですと、すぐにわかることなのですが、HTMLの背景画像に設定した画像は、「高さ」を持っていません。
そのため、画像のアスペクト比を保って表示するためには、以下のようなCSSのコードで、アスペクト比を保つ必要が生じます。
#appeal { height: 数値vw; }
背景画像の高さpx ÷ (背景画像の幅px + 17px)×100=数値vw
背景画像に設定される画像のサイズは、どのようなサイズが用いられるのか、わからないので、ご自身で背景画像に設定した画像のサイズを参照してください。
ただし、上記のコードを設定してみるとわかるかと思いますが、アピールエリアに文字やボタンを設定していると、それらとの整合性がとれずに、デザインが崩れてしまいます。
背景画像のアスペクト比を保つ指定をしてしまうと、文字やボタンの表示と整合性がとれなくなってしまうため、現在のような仕様になっているものと推測されます。
表示させたいコンテンツが画像だけの場合は、「画像」ウィジェットを用いて、CSSでマージンを調整する方法もあります。
This post was modified 2週間前 3回 by リフィトリー
わいひら と Yamachan11 件のいいね!
2021年4月3日 08:30
non さん
つまり、何が言いたいのかといいますと、
要望としては、ただ普通に画面幅いっぱいに合わせて縮小していってほしいのです。
このご要望は、アピールエリアには、適していないということです。
もし、画像だけを配置するのが目的であるなら、「画像」ウィジェットを用い、余分な余白が、周囲に生じてしまう場合にはCSSで調整する方が良いのかもしれません。
なぜかと言いますと、画像ウィジェットの方は、背景画像ではないので、「高さ」を持っています。
わいひら 件のいいね!
2021年4月3日 08:36
non さん
お差し支えがなければ、フォーラム冒頭の案内にありますとおり、対象ページのURLをご提示いただき、高速化設定を無効にして、いただければと思います。
より具体的なアドバイスがいただけるかもしれません。
高速化設定を無効にするには
https://wp-cocoon.com/theme-trouble/
This post was modified 2週間前 by リフィトリー
わいひら 件のいいね!
2021年4月3日 22:20
nonさん
過去の同様の内容のトピックのリンクを貼っておきます。
[解決済] モバイル版のアピールエリアを全画面表示させたい
https://wp-cocoon.com/community/postid/43692/
もしアピールエリアが背景画像だけの場合は、CSSのコードを3行、追加CSSか、子テーマのCSSに記述すれば解決します。
CSSの記述のやり方がわからないときは、この続きに書きこんでいただければと思います。
わいひら 件のいいね!
Topic starter2021年4月4日 17:01
ご親切に回答くださいましてありがとうございます。
アピールエリアの画像が背景画像とのこと、理解いたしました。
calcで計算式を埋め込んで解決いたしました。
お手数をおかけしました。
リフィトリー 件のいいね!