開業税理士のHP④~Cocoonで士業のHPを作る際に、アピールエリアの画像を正しく表示する方法~

HPに関する記事

初期の状態では、PCやタブレット、モバイルでのアピールエリアの見え方が変わってしまいます。

アピールアリアはフロントページのみに表示しており、HPの顔ともいえるため、見え方が見切れてしまったりしてしまい、困ってしまいました

そこで、外観→カスタマイズ→追加CSSに以下を張り付けてみてください。

400は高さ、1300が幅になります。

#appeal { 
height: calc(100vw * calc(400 / 1300)); 
}

・「vw」を使うと、画面サイズの違いを気にする必要がなくなり、見え方が綺麗になります