[ 解決済 ] トップ画像の大きさの変更

[wptakao]

お世話になります。
Lightning Pro: 3.2.2
VK Block Pro: 0.22.3
Pale使用

固定ページのトップ画像はデフォルトでは2000x494pxになっておりますが、この表示大きさの変更の方法を教えてください。

[DRILL LANCER]

ページヘッダーの画像はどの画像サイズのものを使っても縦横比を保ったまま拡大・縮小され、全幅で表示されるようになっています。

なので、該当部分の画像サイズは特に気にする必要はありませんが、ある程度解像度が高めのものを指定すると良いでしょう。

例えば、Lightning Skin Pale のデモサイトでは 1920 x 720 の画像が使われています。

[wptakao]

ご回答ありがとうございます。
試してみましたが、トップページ以外の固有ページのページヘッダーの画像の大きさは現行のままで変更できません。

[DRILL LANCER]

検証し直してみたところ下記のようになっていました。
画像の横幅は下記の CSS によって全幅で固定されています。

.page-header {
	background: url(略) no-repeat 50% center;
	background-size: cover;
}

画像の縦幅は下記 CSS によって調整されています。

.page-header_pageTitle,
h1.page-header_pageTitle:first-child {
	margin: 1.2em 0;
	font-size: 1.75rem;
	line-height: 1.1;
}

上記を参考に調整すれば OK だと思います。

[Vektor,Inc]

補足ですが、固定ページのタイトル名が出ているページヘッダー部分は、
外観 > カスタマイズ > Lightning ページヘッダー設定 から文字の上下余白が変更可能なので、それに伴って縦横比も変動します。

[wptakao]

ご丁寧にご回答ありがとうございます。

何の方法もオリジナルのデザインスキンでは変更できるのですが、Pale（Pale　PlaeⅡとも）を適用すると変更ができません。
デザインスキンの設定に問題があるのでしょうか。
あるいはそもそもPaleを適用すると変更ができない仕様なのでしょうか。

[DRILL LANCER]

Pale II では下記の指定がありましたので、これを追加でいじれば画像の表示領域のサイズを変更可能と思われます。

@media (max-width: 991px) {
	.page-header {
	    height: 100px;
	}
}

@media (min-width: 992px) {
	.page-header {
	    height: 200px;
	}
}

[wptakao]

丁寧にご教示いただき感謝します。
CSSに追記して変更できました。

[投稿者]

投稿