メインビジュアルの背景画像を縦横比固定で出力する方法
完成パーツ
上部のヘッダーをご確認下さい。
設定するCSS
下記CSSはサンプルであり、お客様のサイトに正しく反映されるかについては検証しておりません。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
またCSSの詳細についてはサポート対象外となるため、CSSが動作しないといったお問い合わせについてはご遠慮下さい。
//背景画像の表示設定（画像サイズ 1200 x 630 pxを使用した場合）
.main-visual.sub-page-custom {
height: calc(630 / 1200 * 100vw);
min-height: auto !important;
background-size: cover !important;
}
.main-visual.sub-page-custom {
height: calc(630 / 1200 * 100vw);
min-height: auto !important;
background-size: cover !important;
}
height: calc(630 / 1200 * 100vw);
の部分を画像サイズに合わせて変更してください。
の部分を画像サイズに合わせて変更してください。
設定方法
ヘッダーのカスタマイズからclass名「sub-page-custom」を設定します
ページのCSSに貼り付けて保存します
下書き保存、または更新して完成です
