ヘッダーのサイズを背景画像に設定したアスペクト比を保つように設定する方法

テーマ設定
この記事は約1分で読めます。

Cocoon設定の「ヘッダー」に「背景画像の全てを表示」オプションを追加しました。

これにより「ヘッダー背景画像」に設定した画像を待つことなく全て表示できるようになりました。

\エックスサーバー開発のWordPressテーマ/
エックスサーバー開発のWordPressテーマ

設定方法

この設定を行なうにはCocoon設定の「ヘッダー」の「ヘッダー背景画像」をまず設定する必要があります。

「ヘッダー背景画像」を設定したら「背景画像の全てを表示」を有効にして保存してください。

背景画像の全てを表示設定にする

動作

このように設定することで以下のように端末を変えても背景画像のアスペクト比ができる限り保持されます。

パソコン画面

パソコン画面での表示

パソコン画面ではヘッダーのサイズを「ヘッダー背景画像」に設定した画像の縦横比サイズに合わせて表示させます。これにより背景画像が隠れることなく表示されます。

「ヘッダーレイアウト」設定が「センターロゴ」時のみ。

モバイル画面

タブレット画面での表示

スマホ画面

スマホ画面での表示

モバイル画面ではロゴ画像との兼ね合いもあり背景画像が全て表示されることは保証できません。

注意点

今回の設定を行なうことでCocoon設定の「ヘッダー」の「高さ」や「高さ(モバイル)」の値は無効になります。

ヘッダーの高さ設定は無効になる

画面幅が1023未満になった時、Cocoon設定の「ヘッダー」の「ヘッダー背景画像の固定」は無効になります。

ヘッダー背景画像の固定はモバイルで無効になる

タイトルとURLをコピーしました